[kwlug-disc] CSS help

[Richard Weait]

On Mon, Mar 15, 2010 at 1:49 AM, Chris Frey <cdfrey at foursquare.net> wrote:
> On Sun, Mar 14, 2010 at 11:57:08PM -0400, Richard Weait wrote:
>> html
>> <div class="split">
>>   <div class="left">400nm</div>
>>   <div class="right">1400nm</div>
>>   <div class="spacer">log scale</div>
>> </div>
>>
>> css
>> .split {width: 48em;} # set the total width
>> .left {float: left; text-align: left;} # left align stuff
>> .right {float: right; text-align: right;} # right align stuff
>> .spacer {text-align: center;} # and center the rest.
>
>
> Thanks Richard!  Unfortunately, I couldn't make this work for me,
> since I don't have any text to use in the spacer.

What?!?! *sputter* Everybody needs some center-justified text!  And a
blink tag!  ;-)

> But!  Some folks on IRC pointed me at the following links:
>
>        http://phrogz.net/css/understandingfloats.html  (very good!)
>        http://css.maxdesign.com.au/floatutorial/
>
> So, boiled down, my problem was:
>
>        <div class="container">
>                <div class="element1">...</div>
>                <div class="element2">...</div>
>        </div>
>
> If I make element1 to float left, and 2 to float right, then the container
> suddenly decides that it doesn't "contain" anything anymore, and the
> elements overflow the small container div, making it disappear.
>
> There were two ways to fix this:
>
> 1) Add an empty clearing div:
>
>        <div class="container">
>                <div class="element1">...</div>
>                <div class="element2">...</div>
>                <div style="clear: both;"></div>
>        </div>
>
> This now expands the container to the bottom of both elements.
>
> or,
>
> 2) Use the automatic overflow mode in the container:
>
>        # css
>        .container { overflow: auto; }
>
>        <div class="container">
>                <div class="element1">...</div>
>                <div class="element2">...</div>
>        </div>
>
>
> - Chris