SitePoint Sponsor |
|
User Tag List
Results 1 to 13 of 13
-
Sep 6, 2007, 10:46 #1
- 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
-
Sep 6, 2007, 14:31 #2
- 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.Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Sep 6, 2007, 14:35 #3
- 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
-
Sep 6, 2007, 14:48 #4
- 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%; 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
-
Sep 6, 2007, 14:58 #5
- 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%; } #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>
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Sep 6, 2007, 15:10 #6
- 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%; 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
-
Sep 6, 2007, 15:24 #7
- 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.Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Sep 6, 2007, 15:26 #8
- 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
-
Sep 6, 2007, 15:34 #9
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 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
-
Sep 6, 2007, 15:37 #10
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I forgot about the 3px jog.
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Sep 6, 2007, 15:42 #11
- 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
-
Sep 6, 2007, 15:52 #12
- 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.
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Sep 6, 2007, 16:40 #13
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 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