Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Jun 2012
    Location
    San Diego
    Posts
    60
    Thanks
    46
    Thanked 0 Times in 0 Posts

    Unhappy Tables Easy. CSS Hard

    Trying to build a page with pure CSS. Easy with tables. Hard with CSS. See video.

    The goal I am looking for: "How to keep the right column from wrapping under (liquid result), and fill out 100% to the right hand border of the browser.

    VIDEO of MY PROBLEM
    http://www.youtube.com/watch?v=KC9hJ6DvEMs
    Last edited by ryanjohnsond; 04-09-2013 at 05:58 PM.

  • #2
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    You can do something like this.

    Your left column stays at a fixed width and stays on the left. Meanwhile, the right column of the table adjusts to fit the width of the browser but stops shrinking at a certain point. Set a minimum width for the right one that.

    In other words, your HTML would be something like this:

    Code:
    <div class="left-column">
    	I am the left column.
    </div>
    <div class="right-column">
    	I am the right column.
    </div>
    Your CSS would be something like this:

    Code:
    .left-column {
    	width: 200px;
    	float:left;
    	background: yellow;
    }
    .right-column {
    	min-width: 500px;
    	background: orange;
    }
    Here is a live example. I added background colors so you can tell what's happening more easily.

    http://jsfiddle.net/T9Vbp/
    My signature :)

  • #3
    New Coder
    Join Date
    Jun 2012
    Location
    San Diego
    Posts
    60
    Thanks
    46
    Thanked 0 Times in 0 Posts
    I tried something like that. Here are my results.

    Abosolute and Relative Position Version.
    PHP Code:
    <html>
    <
    head><title></title>
    <
    link rel="stylesheet" type="text/css" href="css/xleftNav.css">
    <
    style>
    html,body{font-family:sans-serif;margin:0padding:0}
    ul#leftNav {
         
    list-stylenone;
         
    padding0px;
         
    margin0px 50px 0px 0px;
        
    border:1px solid #cdcdcd;
        
    margin-left:1em;
         
    font-family:ArialHelveticasans-serif;
    }
    </
    style>
    </
    head>
    <
    body>
    <
    div style="position:relative; padding-right:50px">
        <
    div style="position: absolute; border:1px solid red; margin: 50px 50px 0 35px;">
                <
    ul id="leftNav">
                <
    li class="title">Title Header Here</li>
                <
    li><a href='#'>voluptatem accusantium</a></li>
                <
    li><a href='#'>voluptatem accusantium</a></li>    
                <
    li><a href='#'>voluptatem accusantium</a></li>
                <
    li><a href='#'>voluptatem accusantium</a></li>
                <
    li><a href="#">voluptatem accusantium</a></li>
                <
    li><a href="#">voluptatem accusantium</a></li>
                <
    li><a href='#'>voluptatem accusantium</a></li>
                <
    li><a href='#'>voluptatem accusantium</a></li>
                <
    li><a href='#'>voluptatem accusantium</a></li>
                <
    li><a href='#'>voluptatem accusantium</a></li>
                <
    li><a href='#'>voluptatem accusantium</a></li>
                <
    li class="selected"><a href='#'>voluptatem accusantium</a></li>
            </
    ul>
        </
    div>
        
        <
    div style="position: absolute; border:1px solid red; margin: 50px 50px 0 280px;">
                <
    h1 class="claro">Maintenance</h1>
                <
    h2>Update Title Here</h2>
                
    Title Here Days * <input class="submit-field" type="text" size="25" />
                <
    p><input type="submit" value="Submit" /></p>
                <
    p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantiumtotam rem aperiameaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicaboNemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugitsed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciuntNeque porro quisquam estqui dolorem ipsum quia dolor sit ametconsecteturadipisci velitsed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatemUt enim ad minima veniamquis nostrum exercitationem ullam corporis suscipit laboriosamnisi ut aliquid ex ea commodi consequatur?</p>
        </
    div>    
    </
    div>
    </
    body
    Float Left Version
    The problem with this is that the 2nd Column width is 78% and does not maintain a consistent right hand margin/padding against the browser border.
    PHP Code:
    <!doctype html>
    <
    html>
        <
    head><title></title>
            <
    style>
                
    html,body{
                    
    font-family:sans-serif;
                    
    margin:0;
                    
    padding:0;
                    
    width100%;
                    
    min-width1024px;
                    }

                .
    wrapper {
                    
    margin-leftauto;
                    
    margin-rightauto;
                    
    width100%;
                }
                .
    clearfix {
                    
    clearboth;
                }
                .
    menu {
                    
    border:1px solid red;
                    
    width220px;
                    
    floatleft;
                }
                .
    content {
                    
    border:1px solid red;
                    
    width78%;
                    
    floatleft;
                }
            

            </
    style>
        </
    head>
        <
    body>
            <
    div class="menu">
                <
    ul id="leftNav">
                <
    li class="title">Title Header Here</li>
                <
    li><a href='#'>voluptatem accusantium</a></li>
                <
    li><a href='#'>voluptatem accusantium</a></li>    
                <
    li><a href='#'>voluptatem accusantium</a></li>
                <
    li><a href='#'>voluptatem accusantium</a></li>
                <
    li><a href="#">voluptatem accusantium</a></li>
                <
    li><a href="#">voluptatem accusantium</a></li>
                <
    li><a href='#'>voluptatem accusantium</a></li>
                <
    li><a href='#'>voluptatem accusantium</a></li>
                <
    li><a href='#'>voluptatem accusantium</a></li>
                <
    li><a href='#'>voluptatem accusantium</a></li>
                <
    li><a href='#'>voluptatem accusantium</a></li>
                <
    li class="selected"><a href='#'>voluptatem accusantium</a></li>
            </
    ul>
            </
    div>
                <
    div class="content">
                        <
    h1 class="claro">Maintenance</h1>
                        <
    h2>Update Title Here</h2>
                        
    Title Here Days * <input class="submit-field" type="text" size="25" />
                        <
    p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantiumtotam rem aperiameaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicaboNemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugitsed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciuntNeque porro quisquam estqui dolorem ipsum quia dolor sit ametconsecteturadipisci velitsed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatemUt enim ad minima veniamquis nostrum exercitationem ullam corporis suscipit laboriosamnisi ut aliquid ex ea commodi consequatur?</p>
                </
    div>
                <
    div class="clearfix"></div>
        </
    body>
    </
    html

  • #4
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    I'm not sure what you mean, by margin/padding. My example didn't specify a width for the right column (aka take out "width:78%"). Take out the width, and your right column will adjust accordingly.
    My signature :)

  • #5
    New Coder
    Join Date
    Jun 2012
    Location
    San Diego
    Posts
    60
    Thanks
    46
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ttkim View Post
    I'm not sure what you mean, by margin/padding. My example didn't specify a width for the right column (aka take out "width:78%"). Take out the width, and your right column will adjust accordingly.
    The 78% is to keep the right hand column from wrapping/jumping under the left-hand column when the browser becomes too narrow. The goal I am looking for: "How to keep the right column from jumping under (liquid result), and fill out 100% to the right hand border of the browser.

  • #6
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,398
    Thanks
    11
    Thanked 296 Times in 295 Posts
    Is this what you're looking for?

    http://www.go-fast.org/test.html

    Dave

  • Users who have thanked tracknut for this post:

    ryanjohnsond (04-09-2013)

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,688
    Thanks
    22
    Thanked 1,829 Times in 1,813 Posts
    Hello ryanjohnsond,
    Mixing % and px measurements doesn't work very well. Assuming 100% is the full width available in .wrapper, here are the two elements that are sharing that space - 78% plus 220px = ???

    This is based on this two column demo -
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #000;
    	background: #fc6;
    }
    #container {
    	/*min-width: xxxpx; if needed*/
    	margin: 20px;
    	border: 2px solid #999;
    	background: #0f0;
    }
    	#left {
    		width: 360px;
    		padding: 20px;
    		float: left; 
    		border-right: 2px solid #999;
    	}
    	#right {
    		padding: 20px;
    		overflow: auto;
    		background: #fcc;
    	}
    		#left, #right {height: 600px;} /*demo only*/
    </style>
    </head>
    <body>
    	<div id="container">
                <div id="left">
                	<h2>left column</h2>
                <!--end left--></div>
            <div id="right">
            <h2>right column</h2>
            	<p>
                    Float your left column left and <em>overflow: auto;</em> fits your right column into 
    				what space is left over.
                </p>
            <!--end right--></div>
        <!--container--></div>  
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    ryanjohnsond (04-09-2013)

  • #8
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    Quote Originally Posted by ryanjohnsond View Post
    The 78% is to keep the right hand column from wrapping/jumping under the left-hand column when the browser becomes too narrow. The goal I am looking for: "How to keep the right column from jumping under (liquid result), and fill out 100% to the right hand border of the browser.
    Oh, I see what you mean. So the wrapping effect is the problem. Looks like you got a few solutions. Here's a third solution I checked this in IE7+, Chrome, and Firefox. They all work.

    HTML:
    Code:
    <div class="container">
    	<div class="menu"> 
    	</div> 
    	<div class="content"> 
    	</div> 
    </div>
    CSS

    Code:
    html,body{ 
    	font-family:sans-serif; 
    	margin:0; 
    	padding:0;
    } 
    .container {
    	height: auto;
    	overflow: hidden;
    }
    .menu { 
    	border:1px solid red;
    	width: 220px;
    	float:left;
    } 
    .content {
    	border:1px solid red; 
    	width: auto;
    	overflow:hidden;
    }
    I took out the width/min-width from your html/body. The width:100% was unnecessary, and I highly doubted that you wanted a 1024px minimum width.

    Other than that, .menu stays the same. I added a container and changed your content class.

    Edit: Oh yea, I also took out your clearfix div.
    Last edited by ttkim; 04-09-2013 at 06:42 PM.
    My signature :)

  • Users who have thanked ttkim for this post:

    ryanjohnsond (04-09-2013)

  • #9
    New Coder
    Join Date
    Jun 2012
    Location
    San Diego
    Posts
    60
    Thanks
    46
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tracknut View Post
    Is this what you're looking for? http://www.go-fast.org/test.html

    Dave
    The video at the top shows the objective. The first example is a table, and shows that the left margin stays fixed, and the right column's width adjusts to the browser width.

  • #10
    New Coder
    Join Date
    Jun 2012
    Location
    San Diego
    Posts
    60
    Thanks
    46
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ttkim View Post
    Oh, I see what you mean. So the wrapping effect is the problem. Looks like you got a few solutions. Here's a third solution I checked this in IE7+, Chrome, and Firefox. They all work.

    HTML:
    Code:
    <div class="container">
    	<div class="menu"> 
    	</div> 
    	<div class="content"> 
    	</div> 
    </div>
    CSS

    Code:
    html,body{ 
    	font-family:sans-serif; 
    	margin:0; 
    	padding:0;
    } 
    .container {
    	height: auto;
    	overflow: hidden;
    }
    .menu { 
    	border:1px solid red;
    	width: 220px;
    	float:left;
    } 
    .content {
    	border:1px solid red; 
    	width: auto;
    	overflow:hidden;
    }
    I took out the width/min-width from your html/body. The width:100% was unnecessary, and I highly doubted that you wanted a 1024px minimum width.

    Other than that, .menu stays the same. I added a container and changed your content class.

    Edit: Oh yea, I also took out your clearfix div.
    TTKIM, can you stick those rules in my original HTML. The min-width was there to keep the right column from wrapping under the fixed left column. I also have to shoot for a 1024 resolution.

  • #11
    New Coder
    Join Date
    Jun 2012
    Location
    San Diego
    Posts
    60
    Thanks
    46
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tracknut View Post
    Is this what you're looking for?

    http://www.go-fast.org/test.html

    Dave
    YES! You're the man! Now that I have that fix! lol... do you know how to do this w/out absolutes? I can't get it to work in floats w/out the right-hand column wrapping under the left-hand column.
    Last edited by ryanjohnsond; 04-09-2013 at 09:13 PM.

  • #12
    New Coder
    Join Date
    Jun 2012
    Location
    San Diego
    Posts
    60
    Thanks
    46
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello ryanjohnsond,
    Mixing % and px measurements doesn't work very well. Assuming 100% is the full width available in .wrapper, here are the two elements that are sharing that space - 78% plus 220px = ???

    This is based on this two column demo -
    I tried your demo and it breaks in IE, even though it works in IE, in the original demo. Is that because there is a perecentaged width on the divs. It seems you have to go below a comfortable number for the browser so it doesn't wrap the right hand columns. I don't want them to wrap. Here's my error using your demo example:
    https://www.youtube.com/watch?v=_ETSRyeCVrE

    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
    html, body {
    	margin: 0;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #000;
    	background: #fc6;
    }
    #container {
    	margin: 20px auto;
    	background: #0f0;
    }
    h1 {
    	line-height: 75px;
    	margin: 0;
    	text-align: center;
    	background: #ff6600
    }
    #left {
    	width: 360px;
    	padding: 20px;
    	float: left; 
    }
    #right {
    	padding: 20px;
    	overflow: auto;
    	background: #ccc;
    }
    footer {
    	color: #ccc;
    	background: #330000;
    }
    h2, h3, footer p {
    	line-height: 45px;
    	margin: 0;
    	text-align: center;
    }
    </style>
    </head>
    <body>
    <div id="container">
    <h1>header</h1>
    <div id="left">
    <h2>left column</h2>
    <!--end left--></div>
    <div id="right">
    <h2>right column</h2>
    <p>
    It doesn't get any easier than this!<br />
    Float your left column left and <em>overflow: auto;</em> fits your right column into 
    what space is left over ... and that's it!
    </p>
    <p>
    Click on the Markup or CSS links above to see how this is coded.
    </p>
    <!--end right--></div>
    <footer>
    <p>footer stuff goes here</p>
    </footer>    
    <!--container--></div>  
    </body>
    </html>

  • #13
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,688
    Thanks
    22
    Thanked 1,829 Times in 1,813 Posts
    Quote Originally Posted by ryanjohnsond View Post
    I tried your demo and it breaks in IE, even though it works in IE, in the original demo. Is that because there is a perecentaged width on the divs. It seems you have to go below a comfortable number for the browser so it doesn't wrap the right hand columns. I don't want them to wrap.
    I didn't mean for you to use that demo, that snippet of code I posted was based on that demo.

    That snippet will also break until you decide what you want to do with your overflow. A min-width, see my commented bit of CSS?, would stop the site from collapsing down to a width that would keep the content from just disappearing - it would still be available with an X scroll.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    ryanjohnsond (04-09-2013)

  • #14
    New Coder
    Join Date
    Jun 2012
    Location
    San Diego
    Posts
    60
    Thanks
    46
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    I didn't mean for you to use that demo, that snippet of code I posted was based on that demo.

    That snippet will also break until you decide what you want to do with your overflow. A min-width, see my commented bit of CSS?, would stop the site from collapsing down to a width that would keep the content from just disappearing - it would still be available with an X scroll.
    That's it. It works great!

    What's the philosophy and the functionality behind Overflow? I see that the green disappears when i remove it. I don't understand when to use it.

  • #15
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,688
    Thanks
    22
    Thanked 1,829 Times in 1,813 Posts
    Quote Originally Posted by ryanjohnsond View Post
    That's it. It works great!

    What's the philosophy and the functionality behind Overflow? I see that the green disappears when i remove it. I don't understand when to use it.
    The old way of doing it would have been like this -
    Code:
    	#left {
    		width: 360px;
    		padding: 20px;
    		float: left; 
    		border-right: 2px solid #999;
    	}
    	#right {
    		margin: 0 0 0 400px;
    		padding: 20px;
    		background: #fcc;
    	}
    That 400px left margin makes room for the left column. overflow: auto; just saves you from adding up border/margin/padding to get the total width.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    ryanjohnsond (04-09-2013)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •