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 2 of 2 FirstFirst 12
Results 16 to 16 of 16
  1. #16
    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
    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.
    I didn't know that. "overflow" to automatically create spacing?

    I added a middle column. If the example below was a TD, it would be connected to the other two TDs and be the same height. Is it possible to create a middle column grows in height with the other two columns?


    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: 1000px; 
    	margin: 20px;
    	border: 2px solid #999;
    	background: #0f0;
    }
    	#left {
    		width: 360px;
    		padding: 20px;
    		float: left; 
    		border-right: 2px solid #999;
    	}
    	#middle {
    		padding: 20px;;
    		width: 5px;
    		float: left; 
    		background: #ccc;
    
    	}
    	#right {
    		padding: 20px;
    		overflow: auto;
    		background: #fcc;
    	}
    	/*#left, #right, #middle {height: 600px;} demo only*/
    </style>
    </head>
    <body>
    	<div id="container">
                <div id="left">
                	<h2>left column</h2>
                <!--end left-->
    			</div>
            <div id="middle">
    		</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>
    Last edited by ryanjohnsond; 04-10-2013 at 04:20 AM.


 
Page 2 of 2 FirstFirst 12

Posting Permissions

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