Advanced Search

Results 1 to 5 of 5

Thread: problems with width of 2-col layout

  1. #1
    Join Date
    Oct 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default problems with width of 2-col layout

    Hi,

    This is my first post here. I've looked at a lot of CSS layout, including these, but I find it difficult to single out the magic code that makes them work and not mine. They all seem unnecessarily complex with negative margins.

    I am trying to understand the problem illustrated by the following code/page. It works and breaks exactly the same on all 4 browsers (IE9, Firefox, Chrome & Safari - all on Windows Vista).

    As it's coded below, it works just fine. The green & cyan columns are side-by-side. As soon as I try to add a border around either column (for example - just remove the comment from the "border" attribute on either column), the cyan column drops down to the next row. I understand why that occurs - the border is outside the box width, so when I add the border, the width is now "1px + 20% + 1px" and therefore it can no longer fit in the available 20%.

    Yes, I can change the width from 80% to 79% or from 20% to 19% to provide room for the borders, but I want the columns packed tight, with no spacing between them. I can also have widths of 500px and 100px, and when I add a 1px border to the right column, I just change the width from 100px to 98px to make room for the 1px border around it. But I don't like fixed-width blocks - I want %.

    So is it possible to specify the widths in %, and allow for changes in styling (add/remove/edit borders), without having to change the widths and still have tightly-packed blocks?

    Thanks.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
    <html>
    <head>
    <style type="text/css">
    html {		margin:			0;}
    
    #container {	background-color:	yellow;
    		width:			100%;
    		margin:			0;
    		padding:		0;
    	}
    
    #main	{	float:			left;
    		width:			80%;
    		background-color:	green;
    		margin:			0;
    		padding:		0;
    		/*border:			1px solid magenta;*/
    	}
    
    #rightcol {	width:			20%;
    		background-color:	cyan;
    		float:			right;
    		margin:			0;
    		padding:		0;
    		/*border:			1px solid magenta;*/
    	}
    </style>
    </head>
    <body>
    
    <div id="container">
    	<div id="main"><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></div>
    	<div id="rightcol"><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></div> 
    </div>
    
    </body>
    </html>
    Last edited by oldandintheway; 10-08-2011 at 04:01 AM.

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    672
    Thanks
    1
    Thanked 110 Times in 108 Posts

    Default

    Hi there oldandintheway,

    and a warm welcome to these forums.

    Adding borders will, obviously, take the width over 100%.

    So try it like this...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>80% plus 20% plus 4px is greater than 100% !!!</title>
    
    <style type="text/css">
    html,body {
        margin:0;
        font-family:arial,sans-serif;
        font-size:1em;
     }
    #container {
        min-width:600px;
        background-color:#ff0;
        overflow:hidden;
     }
    #main	{
        float:left;
        width:80%;
        background-color:#008000;
     }
    #rightcol {
        float:left;	
        width:20%;
        background-color:#0ff;
     }
    #main-content{
        padding:2.5%;
        border:1px solid #f0f;
     }
    #rightcol-content{
        padding:10%;
        border:1px solid #f0f;
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
    
    <div id="main">
    <div id="main-content">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at lectus 
    a metus sollicitudin consequat sit amet vitae diam. In et sem quis libero 
    consequat dapibus. Maecenas sit amet lobortis magna. Morbi volutpat velit 
    sit amet lacus congue pretium volutpat justo varius. Nullam vitae pulvinar 
    dui. Nunc molestie accumsan mauris, vel aliquet urna cursus sed. Morbi 
    vitae consequat nunc. In hac habitasse platea dictumst. Donec magna ante, 
    hendrerit sit amet commodo bibendum, ullamcorper et tellus. Vivamus pretium 
    mauris sed magna dignissim aliquet. Praesent tortor risus, luctus et viverra 
    eu, feugiat sit amet justo. Mauris et leo id ante semper venenatis.
    </p>
    </div>
    </div><!-- end #main -->
    
    <div id="rightcol">
    <div id="rightcol-content">
    <p>
    Cras ac arcu eget massa iaculis vestibulum. Quisque orci lorem, ultrices eu 
    elementum vel, dictum eget diam. In sed sapien eget nisl fringilla rhoncus. 
    Suspendisse elit arcu, tempus ac facilisis eget, sodales at magna. Nulla 
    iaculis, ante in rhoncus convallis, arcu metus feugiat justo, ut scelerisque 
    ipsum urna ac risus. Quisque laoreet, sapien nec interdum rhoncus, nibh elit 
    condimentum diam, in sagittis ante ante ac felis. Sed elementum augue eget 
    sem pretium tempus. Proin congue vehicula molestie. Ut facilisis quam nulla, 
    eget posuere massa. In ipsum ligula, consectetur ac congue at, commodo iaculis 
    erat.
    </p>
    </div>
    </div><!-- end #rightcol --> 
    
    </div><!-- end #container -->
    
    </body>
    </html>
    
    coothead

  3. The Following User Says Thank You to coothead For This Useful Post:

    oldandintheway (10-08-2011)

  4. #3
    Join Date
    Oct 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Ah, excellent. The secret is to apply the border to another box inside the column box and use margin: 0 on that box to push the border up against the inside of the outer <div>. When I sketched the 2 nested boxes with margin, padding, border, it's obvious. Thank you!

    Two followup questions:
    1. I had:
    (a) #main: float left
    (b) #rightcol: float right

    I don't exactly know why I did that, but it made sense at the time. I notice you changed it to:
    (a) both columns have float left

    Can you explain that? Either way seems to provide the same effect (side-by-side).

    2. You also added:
    min-width:600px;
    overflow: hidden;

    That's not needed for the layout, is it? Just personal preference? It seems to work fine either way.

    I'm not actually putting plain text in either column. I'm going to use both panels as canvases for maps, etc.

  5. #4
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    672
    Thanks
    1
    Thanked 110 Times in 108 Posts

    Default

    Hi there oldandintheway,

    1. Actually it is just force of habit.
      Unless there is a specific need for float:right I use float:left.
    2. The attribute overflow:hidden ensures that the #container div actually contains the floated elements.
      Without it the yellow background would not be visible.
      The drawback is that, as the window width is reduced a point will be reached where the text will overflow its container and therefore be hidden.
      The min-width attribute will produce a horizontal scrollbar at the appropriate point.
      Try taking it out to see what I mean.

    I hope that this helps.

    coothead

  6. #5
    Join Date
    Oct 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Ok, got it. Yes, I see the purpose of min-width.

    I had coloured the boxes with bright colours so I could see them. I don't really care about the yellow box.

Bookmarks

Posting Permissions

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