Recommended Technique.your suggestions

[koob]

Hi All,

I'm new here - been teaching myself CSS recently and I could use some advice from a few wise heads.

I'm designing a page and as part of the design i want an intro div (width:900px) in which i want to put 3 separate divs containing varying amounts of texts to give the look of 3 columns of text (width:300px). I can do this fine but my problem arises in that I have a border-bottom on the parent intro div that i would like to resize.

What would be the best way to go about doing this? I essentially need the intro div to resize vertically to the 'longest' text div. I got it to kinda work with inline-block but I'm not sure this is the best way to go about doing things.

My apologies if I haven't made myself very clear, please bear with me!

thanks for your time

k/

[Setek]

Hi koob and welcome to Webmaster World :)

I've found the best way to tackle this is with multiple floats. It has it's problems, but so do all methods :)

What to do:

1. Have a parent element
   
2. Have three floating children
   
3. Clear the floating children. (Parent elements are not meant to acknowledge their floated children, as they have been taken out of natural document flow. We need to counteract this by forcing the parent to acknowledge something (an element, a... pseudo-element?) that sits below the floats.)
   
4. Account for any bugs along the way.

How to do it:
HTML:

<div id="shell">

<div id="column-01">
<!-- Please use more meaningful ID names than I am :D -->
In hac habitasse platea dictumst.
</div>

<div id="column-02">
Morbi fringilla massa eu turpis.
</div>

<div id="column-03">
In rutrum varius felis.
</div>

<div class="clear">&nbsp;</div> <!-- The space is for legacy support; some browsers would not draw the element when it is without content -->

</div>

Now, for the CSS:

div#shell { width: 900px; }

div#column-01, 
div#column-02, 
div#column-03 { float: left; /* because multiple float sit side by side */
display: inline; /* removing IE's double margin float bug, and will cure the duplicate characters bug */
width: 300px; /* assign widths otherwise they'll only be as wide as the content within */ }

div.clear { clear: both; /* sits past a float, so the parent will acknowledge the end point of this, which in turn is past the end point of the float */
height: 1px; /* Now we squish it into as small an area as possible */
overflow: hidden; /* Stops IE from expanding the height because of the size of text within */
visibility: hidden; /* be unobtrusive by not looking like it's there, but still being there */ }

And that's about it. You may need to tweak here and there, just let us know how it goes!

[edited by: Setek at 2:05 am (utc) on May 9, 2008]

[koob]

WOW! Thanks so much Setek. Your reply not only solved my issue but also explained it really well - which is so important when trying to master CSS with its quirks.

I definitely wouldn't have worked this one out alone and probably would have given up or gone mad! Learning something like CSS on your own can be extremely difficult and books only go so far in explaining workarounds/fixes so its great that people at webmaster world take the time to help people like me.

Thanks again

[koob]

I've just been playing around with this...

How do I stop the columns reflowing underneath each other when the browser window is narrowed? Is this possible?

thanks

[Xapti]

Set a minimum width for the container (900px assuming no pading/border). Most browsers support this, but for IE (only one you need to worry about, I think), you will have to set a fixed width, unless you want to use javascript, since min-width is not supported.