clear float without clearing floated items???

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

clear float without clearing floated items???

Post 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 ...
Husafan
Forum Newbie
Posts: 2
Joined: Wed Dec 19, 2007 11:18 am

incorrect sig

Post by Husafan »

No. The value of a video would be: video = fps * length in seconds * 1000?
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Re: incorrect sig

Post by s.dot »

Husafan wrote:No. The value of a video would be: video = fps * length in seconds * 1000?
:lol:
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Re: incorrect sig

Post 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.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

Floats can be tricky. There are three solutions that I use often:

Solution #1 (the same as matthijs)
Float the containing element

Code: Select all

div {
float: left;
}
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;
}
Post Reply