SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Addict
    Join Date
    Sep 2001
    Posts
    320
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    creating a fluid 2 column layout?

    so say i want a page with 2 columns equally taking up half the width of the page, with 40 pixels of space on the sides of them, and 40 pixels of space BETWEEN them, like this:

    40px , * , 40px , * , 40px

    this is easy on fixed width layouts, but i'm not sure how to go about this with a fluid layout.
    Steve Davis

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your left column will need to have a child container have 40px of left padding and 20px of right padding, with the right column being reversed (20px of left padding, 40px of right padding on the child container).

    Or replace with margins if you prefer.

    Then from there, float the left column left, give both columns (the parent ones) a width of 50% and apply a -1px right margin to the left parent column.

    Bear in mind I cannot test this out since I'm installing updates to a fresh install of Windows XP Pro, but it should work.

  3. #3
    SitePoint Addict
    Join Date
    Sep 2001
    Posts
    320
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, i think i got it. but what does the -1px margin for the left parent column do? prevent the right column from dropping below the left column?
    Steve Davis

  4. #4
    SitePoint Addict
    Join Date
    Sep 2001
    Posts
    320
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok i did this... didn't work. they just lay on top of each other...

    Code:
    <style type="text/css" media="all">
    
    #leftColumn {float:left; width:50&#37;; margin: 0 -1px 0 0; padding:0;}
    #rightColumn {width:50%; margin:0; padding:0;}
    #leftColumnChild {margin:0 20px 0 40px; padding:0;}
    #rightColumnChild {margin:0 40px 0 20px; padding:0;}
    
    </style>
    </head>
    <body>
    <div id="leftColumn">
      <div id="leftColumnChild">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean quis justo ut metus semper vehicula. Donec consequat. Curabitur metus mauris, pharetra id, viverra nec, porta quis, dolor. Suspendisse bibendum vulputate tortor. Donec laoreet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Cras sollicitudin. Praesent porta sem sit amet massa. Morbi facilisis interdum nunc. Nunc elementum tortor. Nullam arcu eros, bibendum viverra, tincidunt auctor, faucibus et, urna. Vestibulum id metus. Suspendisse gravida. Nullam placerat, risus sit amet fermentum cursus, lacus risus sodales lorem, et tincidunt velit justo a ligula. Vivamus nisi orci, volutpat et, pretium vitae, semper ac, odio. Donec tempus. Aenean vulputate feugiat elit.</p>
      </div>
    </div>
    <div id="rightColumn">
      <div id="rightColumnChild">
        <p>Suspendisse libero diam, ultrices non, iaculis quis, facilisis et, lorem. Aliquam ac diam. Praesent molestie turpis id massa. Donec tellus turpis, interdum vel, faucibus at, egestas elementum, magna. Vestibulum tortor. Maecenas lobortis. Sed ligula libero, tristique vel, pulvinar malesuada, pellentesque vel, est. Fusce dictum nonummy libero. Fusce imperdiet, leo eget semper condimentum, enim nisl molestie nisl, eget condimentum nulla turpis id quam. Mauris commodo, lacus at iaculis dignissim, elit metus semper neque, a dapibus sapien lacus ut neque. Integer turpis. Mauris purus enim, tristique eu, viverra ut, interdum faucibus, nulla. Aenean tempor sapien vitae quam fringilla laoreet. Donec posuere luctus urna. Etiam auctor libero et augue. Maecenas enim lorem, dapibus id, laoreet quis, vulputate in, dui.</p>
      </div>
    </div>
    Steve Davis

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It prevents a calculating error in Internet Explorer and a couple other browsers (IIRC, even including some versions of Konqueror and iCab).

    Oh, and I do apologize. I forgot to mention to float the right column to the right as well.

    You can see it in action here:

    HTML 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" xml:lang="en" lang="en">
    <head>
    	<title>XHTML/CSS Template for Steve Davis</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<meta http-equiv="imagetoolbar" content="no" />
    	<style type="text/css">
    	
    	* {
    		margin: 0;
    		padding: 0;
    	}
    	
    	#column1 {
    		background: #FCC;
    		color: #000;
    		float: left;
    		margin-right: -1px;
    		width: 50&#37;;
    	}
    		#column1 .wrapper {
    			margin: 0 20px 0 40px;
    			padding: 40px 0;
    		}
    	
    	#column2 {
    		background: #CCF;
    		color: #000;
    		float: right;
    		width: 50%;
    	}
    		#column2 .wrapper {
    			margin: 0 40px 0 20px;
    			padding: 40px 0;
    		}
    	</style>
    </head>
    <body>
    <div id="column1">
    	<div class="wrapper">
    		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean quis justo
    		ut metus semper vehicula. Donec consequat. Curabitur metus mauris, pharetra
    		id, viverra nec, porta quis, dolor. Suspendisse bibendum vulputate tortor.
    		Donec laoreet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    		Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
    		inceptos hymenaeos. Cras sollicitudin. Praesent porta sem sit amet massa.
    		Morbi facilisis interdum nunc. Nunc elementum tortor. Nullam arcu eros,
    		bibendum viverra, tincidunt auctor, faucibus et, urna. Vestibulum id metus.
    		Suspendisse gravida. Nullam placerat, risus sit amet fermentum cursus, lacus
    		risus sodales lorem, et tincidunt velit justo a ligula. Vivamus nisi orci,
    		volutpat et, pretium vitae, semper ac, odio. Donec tempus. Aenean vulputate
    		feugiat elit.
    	</div>
    </div>
    <div id="column2">
    	<div class="wrapper">
    		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean quis justo
    		ut metus semper vehicula. Donec consequat. Curabitur metus mauris, pharetra
    		id, viverra nec, porta quis, dolor. Suspendisse bibendum vulputate tortor.
    		Donec laoreet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    		Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
    		inceptos hymenaeos. Cras sollicitudin. Praesent porta sem sit amet massa.
    		Morbi facilisis interdum nunc. Nunc elementum tortor. Nullam arcu eros,
    		bibendum viverra, tincidunt auctor, faucibus et, urna. Vestibulum id metus.
    		Suspendisse gravida. Nullam placerat, risus sit amet fermentum cursus, lacus
    		risus sodales lorem, et tincidunt velit justo a ligula. Vivamus nisi orci,
    		volutpat et, pretium vitae, semper ac, odio. Donec tempus. Aenean vulputate
    		feugiat elit.
    	</div>
    </div>
    </body>
    </html>

  6. #6
    SitePoint Addict
    Join Date
    Sep 2001
    Posts
    320
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks a lot for all your extra effort. would this work too? seems to work ok for me on FF, IE 5, and Safari.

    Code:
    <style type="text/css" media="all">
    
    * {margin:0; padding:0;}
    body {padding:40px 0;}
    #leftColumn {float:left; width:50&#37;; margin 0 -1px 0 0; padding:0;}
    #rightColumn {margin:0 0 0 50%; padding:0;}
    #leftColumnChild {margin:0 20px 0 40px; padding:0;}
    #rightColumnChild {margin:0 40px 0 20px; padding:0;}
    
    </style>
    Steve Davis

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It would, but it uses more code than I like (for example, why re-declare all padding values to be zero when the universal selector already did so?).

    I floated the right column to the right just to make it easier for people who aren't familiar with floats and margins to understand.

  8. #8
    SitePoint Addict
    Join Date
    Sep 2001
    Posts
    320
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah yeah, i didn't mean to include the superfluous padding declarations. too much in a hurry.

    so which method would u recommend? floating it right or not floating it and just add a large left margin like that?
    Steve Davis

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You'll get the 3 pixel jog in IE when you use a float next to static content so Dan's method is better

  10. #10
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I forgot about the 3px jog.

  11. #11
    SitePoint Addict
    Join Date
    Sep 2001
    Posts
    320
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, i'll just float to the right, but what's the 3 pixel jog?
    Steve Davis

  12. #12
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's three pixels of margins that are added when you float an element. I don't recall exactly what triggers it, though there is a discussion and explaination about it in the CSS FAQ right here in the SitePoint forums.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    As Dan said theres a FAQ about this under the float topic.

    Any static content alongside a float will suffer from the 3 pixel jog and is a mysterious 3 pixels that IE applies between the float and the static content alongside. When the static content is below the float the column suddenly jogs back in by 3px - hence the 3px jog. This is a menace to cure and needs almost a three pronged attack to squash the bug which is why I advise floating both columns and avoiding the bug altogether.


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
  •