SitePoint Sponsor |
|
User Tag List
Results 1 to 7 of 7
-
Sep 18, 2007, 03:36 #1
- Join Date
- Jul 2006
- Posts
- 379
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
2 column text layout, text flowing between?
I wouldn't mind building a perfect 2 column text layout for use on each site i do and wondered whether it could be done with the text following between 2 columns like below.
Whats the best way to do this?
Just 2 divs bother floating left? Thinking what it about, what about the line in the middle?
3 divs, all floating left?
I'm assuming you would have to had put in the text for it to flow as you read between the columns?
-
Sep 18, 2007, 03:58 #2
- Join Date
- Jul 2006
- Location
- Victoria, Australia
- Posts
- 4,122
- Mentioned
- 29 Post(s)
- Tagged
- 2 Thread(s)
Well the CSS3 columns would be perfect - only Safari / Firefox and maybe Opera support it unfortunately.
http://www.css3.info/preview/multi-column-layout/ -> to whet your appetite
It depends what you want from your dividing line, if you don't mind the line reaching the full height of the left column just use a 1px solid border. You could also use a background image but it sounds like you're wanting to be able to re-use it for different heights.
Here's how I would do it:
I'm using a negative margin to prevent the columns to drop in IE from a rounding bug - see 50% + 50% = 101%! in FAQ
I'm also using the overflow method of clearing floats and forcing haslayout to clear the floats in IE.
I added the inner div so you could apply padding to it without effecting the layout of the columns.
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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> .columns { overflow: hidden; /* Clear children */ width: 100%; /* Clear children in IE */ } .columns .left { float: left; width: 50%; border-right: 1px solid #EFEFEF; } .columns .right { float: left; width: 50%; margin-left: -2px; } .columns .inner { padding: 20px } .columns .right .inner { padding-left: 22px } </style> </head> <body> <div class="columns"> <div class="left"> <div class="inner"> <p>Sed egestas, lectus a sollicitudin imperdiet, ipsum leo sagittis sem, ac porttitor sapien nulla vitae justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Donec condimentum facilisis ante. Pellentesque arcu ligula, eleifend ut, semper in, tincidunt id, sapien. Donec at sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean sodales iaculis elit. Mauris dolor leo, lobortis nec, fringilla at, nonummy eu, nibh. Nunc neque dui, vestibulum ut, euismod eget, tincidunt ac, sapien. Sed sem mi, vehicula ut, aliquam eget, fringilla nec, odio. Integer metus sapien, pretium accumsan, vehicula vitae, scelerisque non, felis. Sed nibh. Ut turpis ante, lobortis sed, viverra vel, blandit eget, nibh. Duis mi urna, lobortis vitae, adipiscing vel, hendrerit a, leo. Vivamus viverra, elit pulvinar vestibulum tempor, nibh pede posuere pede, in auctor mi velit a elit. In nunc ante, ornare nec, feugiat in, dictum in, est. Fusce eu tortor. Morbi aliquam.</p> </div> </div> <div class="right"> <div class="inner"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce facilisis est nec arcu. Sed sem. Praesent ut elit. Donec ultrices lacinia metus. Nam euismod. Praesent sit amet mi et justo commodo convallis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras vitae turpis auctor tortor bibendum congue. In viverra arcu eu erat. Maecenas orci eros, blandit eget, vulputate et, commodo mollis, quam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce id purus. Curabitur in mauris vel mauris viverra ullamcorper. Ut rhoncus turpis ut dui. Suspendisse augue tellus, elementum id, gravida vel, gravida eu, dui. Fusce et nisi. Donec ornare ornare risus. Donec blandit facilisis diam. Donec blandit.</p> </div> </div> </div> </div> </body> </html>
-
Sep 18, 2007, 04:00 #3
- Join Date
- Jul 2006
- Posts
- 379
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks i'll have a play with that
Natural flow between the columns cannot be done then?
-
Sep 18, 2007, 04:35 #4
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Natural flow between the columns cannot be done then?
As Mark said this is proposed for CSS3 so you will have to wait about 10 years until IE implements it.
-
Sep 18, 2007, 04:58 #5
- Join Date
- Jul 2006
- Location
- Victoria, Australia
- Posts
- 4,122
- Mentioned
- 29 Post(s)
- Tagged
- 2 Thread(s)
I wrote a more in-depth answer here:
http://www.yellowshoe.com.au/tips/columns-again/Last edited by markbrown4; Sep 18, 2007 at 07:01.
-
Sep 19, 2007, 08:10 #6
- Join Date
- Jul 2006
- Posts
- 379
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Sep 19, 2007, 16:15 #7
- Join Date
- Jul 2006
- Location
- Victoria, Australia
- Posts
- 4,122
- Mentioned
- 29 Post(s)
- Tagged
- 2 Thread(s)
Yes, this should be fine.
Code:.columns { overflow: hidden; /* Clear children */ width: 700px; /* Clear children in IE */ }
I'm pretty sure a width given in percentages is calculated relative to width of the parent. - Though I think this has tripped me up before when I haven't cleared my floats - The floats escape the parent container and then the width is calculated relative to it's new parent.
The clearing method for IE is simply forcing hasLayout, so any dimension will work (height or width) - it doesn't need to be 100% - It's just that this value won't hve any adverse effects it in any browser so no hacks are neccessary.
Bookmarks