|
Tarwn -> RE: Layout Question (3/21/2006 13:15:18)
|
Quick addition to TailSlide's post:
Rather than be dependant on the length of the text for the height of your div, or specifying a hardcoded height, you can use an additional element with the clear: both attribute set that will clear any floated elements (basically forcing your outer div to expand to be large enough to hold the contents of any floated items). Example:
<style>
.ident{
border: 2px solid blue;
margin: 5px 10px 15px 10px;
}
.ident .limg{ float: left; }
.ident .break{ clear: both; }
</style>
<div class="ident">
<img class="limg" src="http://www.google.com/intl/en/images/logo.gif">
<p>This is some text with the cleared float div below it</p>
<div class="break"></div>
</div>
<div class="ident">
<img class="limg" src="http://www.google.com/intl/en/images/logo.gif">
<p>This is some text with the cleared float div below it</p>
<div class="break"></div>
</div>
<div class="ident">
<img class="limg" src="http://www.google.com/intl/en/images/logo.gif">
<p>This is some text <strong>without</strong> the cleared float div below it</p>
</div>
<div class="ident">
<img class="limg" src="http://www.google.com/intl/en/images/logo.gif">
<p>This is some text <strong>without</strong> the cleared float div below it</p>
</div>
I would still agree with him on setting the line-height, but I would sitll consider clearing your floats in any case, as some browsers let the user change the default font-sizes and spacing and such, and those minor changes can sometimes cause wierd issues if your completely dependant on the font being a certain size or something similar.
|
|
|
|
