SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 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?

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 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>
    Hope it helps

  3. #3
    SitePoint Addict
    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?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Natural flow between the columns cannot be done then?
    No it can't.

    As Mark said this is proposed for CSS3 so you will have to wait about 10 years until IE implements it.

  5. #5
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 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.

  6. #6
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    I wrote a more in-depth answer here:
    http://www.yellowshoe.com.au/tips/columns-again/
    Thanks for that, i was wondering how flexible is it in regard to putting inside another frame.

    i.e would it still work if put in a fixed width say 700px, or not because its done with %'s?


  7. #7
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Yes, this should be fine.
    Code:
    .columns {
    	overflow: hidden; /* Clear children */
    	width: 700px; /* Clear children in IE */
    }
    Or you can leave it as 100&#37; if it is within another fixed width container.
    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

Posting Permissions

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