SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to evenly space div columns in a fixed layout

    Wrapper width = 990px
    Column width = 280px ( there are three columns)

    If I float them, then I need to use margins to space them out. However when I use margin right for example, the 3rd column obviously can't sit aligned to the very right side of the page, vice-versa if I were to use margin left.

    What I ended up doing was floating the first and second column left and the third column right. Then gave the second column a margin left equal to half the space remaining between the second and third column. VIOLA!

    However, I had to give each column a separate ID so I could give them the necessary attributes to make this work, therefore making my CSS much longer than I wanted to. Anyway around this?

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    840px is the value of 280*3 so that means you have 150px worth of free space.

    You are going to have to give each column an ID or something. I'd float everything left. Even if you just write 3 rules, one for each column, that's not very long CSS...You shouldn't be having an issue/complaining about something as short as that .

    I'd personally (depending on how it looked) just give each column some left and right margins to space it out and make it look equally spaced out, and that way the left wouldn't sit on the left border, and the right wouldn't be a hundred pixels away from the border.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,514
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If ie7+ support was only needed then you could use the pseudoclass :first-child like so:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style ty=e"text/css">
    #outer {
    	border:1px solid #000;
    	background:#ccc;
    	width:990px;
    	overflow:hidden;
    	margin:auto;
    }
    .column {
    	float:left;
    	width:280px;
    	margin:0 0 0 75px;
    	background:#eee;
    	min-height:100px;
    }
    #outer .column:first-child{margin-left:0}
    
    </style>
    </head>
    
    <body>
    <div id="outer">
    				<div class="column">column</div>
    				<div class="column">column</div>
    				<div class="column">column</div>
    </div>
    </body>
    </html>
    If Ie6 support was needed then you would need an extra inner element and do something like this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style ty=e"text/css">
    #outer {
    	border:1px solid #000;
    	background:#ccc;
    	width:990px;
    	overflow:hidden;
    	margin:auto;
    }
    .inner {
    	margin:0 0 0 -75px;
    	zoom:1.0;/* ie6/7 hacks*/
    	position:relative;/* ie6/7 hacks*/
    }
    .column {
    	float:left;
    	width:280px;
    	margin:0 0 0 75px;
    	background:#eee;
    	min-height:100px;
    	display:inline;/* ie6 hack*/
    }
    </style>
    </head>
    
    <body>
    <div id="outer">
    		<div class="inner">
    				<div class="column">column</div>
    				<div class="column">column</div>
    				<div class="column">column</div>
    		</div>
    </div>
    </body>
    </html>

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,819
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Replying to the OP. It would seem to me you ONLY need to give the last element a class or ID to override the margin-right and set it back to 0. something like div.last{margin-right:0}, that would be the easiest most supported fix.

    Of course you may not have access to the HTML.

    An alternate solutions to Paul's FIRST suggestion, but offering similar support with regards to IE6... %&*^#&$%%‡!!!^@&^ IE6!!

    Code:
    .column {
    	float:left;
    	width:280px;
    	background:#eee;
    	min-height:100px;
    	display:inline;/* ie6 hack*/
    }
    .column + .column{margin-left:75px;}


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
  •