Page 1 of 1
clear float without clearing floated items???
Posted: Wed Dec 19, 2007 4:09 pm
by alex.barylski
I have this code:
Code: Select all
<div>
<img style="float: right" src="someicon.png" />
<h3>Header</h3>
<span>Some text</span>
</div>
Simple...with on problem...the wrapping div has a background color and because the image is floated, the wrapping DIV doesn't "wrap" the image entirely UNLESS there is enough text to fill the DIV and push it beyond the height of the image...
I have tried setting
height: 90px (height of image) on the wrapping DIV as well as
min-height: 90px
But neight seems to work...what else can I do to ensure that the background fully encapsulates the IMG tag regardless of the text inside the DIV???
Can I clear a float value or something? I need the image floated to the right ...
incorrect sig
Posted: Wed Dec 19, 2007 4:41 pm
by Husafan
No. The value of a video would be: video = fps * length in seconds * 1000?
Posted: Thu Dec 20, 2007 12:44 am
by matthijs
One simple solution I often use is to float the div as well.
Code: Select all
div#element {
float:left;
width:100%;
}
Another good solution is to use
http://www.positioniseverything.net/easyclearing.html
Re: incorrect sig
Posted: Thu Dec 20, 2007 2:21 am
by s.dot
Husafan wrote:No. The value of a video would be: video = fps * length in seconds * 1000?

Re: incorrect sig
Posted: Fri Dec 21, 2007 2:50 am
by JellyFish
Husafan wrote:No. The value of a video would be: video = fps * length in seconds * 1000?
funny how his signature catches my attention too.
Posted: Tue Jan 08, 2008 4:03 pm
by superdezign
Floats can be tricky. There are three solutions that I use often:
Solution #1 (the same as
matthijs)
Float the containing element
Solution #2
Force the containing element to extend vertically to fit the element
Code: Select all
div {
height: 100%; /* Needed for IE6 */
overflow: hidden;
}
Solution #3
Simply clear the floating at the end of the element (you could use any element, but be careful when using self-closing elements like <br>, as I think they have problems with the CSS 'display' property)
Code: Select all
<div>
<img style="float: right" />
<span class="clear"></span>
</div>
Code: Select all
.clear {
display: block; /* Will save you from a lot of little glitches in both IE and FF */
clear: both;
}
Also, for the min-height route, you could combine Solution #2 with an inner div for the min-height since IE6 doesn't support the min-height CSS property.
Code: Select all
<div>
<div class="minheight"></div>
<img style="float: right" />
</div>
Code: Select all
div {
height: 100%;
overflow: hidden;
}
div .minheight {
width: 1px;
height: 90px;
float: right;
}