[kwlug-disc] CSS help

[Chris Frey]

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.

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