Floating divs overlapping

HTML & CSS
1

Hello all,
I’m having some problems with floating 2 divs within another div. Basically what I have is this:


<div>
  <div class="left">
    <ul>
      <li>some content</li>
      <li>more content</li>
    </ul>
  </div>
  <div class="right">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

The left div is being defined as 10% width, and right is 80%. so there is 10% that is undefined. The problem is that when the window is made small enough the right float overlaps the left. Does anyone know how I could fix this?

2

Yes you can,

You need to set the width of the div that contains both the left and right divs. Set the width of that div in pixels so that shrinking the window won’t “crush” the interior divs together.

3

Gotta clear em bro.

4

I have pretty much everything based on percents or ems. I do have min-width set for the entire container. I haven’t worked with css extensively in a few years, so I’m a bit out of the know, but I know min-width works in Firefox, not sure about IE 7 or 8 but I’m pretty sure it doesn’t work in IE 6. I really want to try and keep the layout flexible as possible without anything breaking, although I know this can be quite a challenge sometimes. Blake, I am clearing the floats at the bottom of the page in the footer, otherwise I think some other strange behavior would be occurring, but thank you for bringing it up, I should have said that to begin with.
I’d rather not set the div that contains those 2 in pixels because I enjoy pages that can flow to meet the dimensions of your monitor. I think min-width would take care of this, but I’m setting it a bit too small so it doesn’t catch this in time. It also doesn’t work in IE 6, which is sadly expected. I also forgot to mention that despite the names in the example, these are both being floated left, if I float the right div to the right side, the problem is solved, but looks strange as there is a bunch of space between the two divs then. Thank you for the feedback so far, anything else I might try? Any solution to min-width in IE?

5

min-height/width works everywhere but IE6 and lower. However the height: and width: property are treated as min-height/width in IE6 as long as overflow is not set (hidden or auto, etc)


#element{min-height:400px;}
* html #element{height:400px;}/*Targets IE6 below*/

On the parent of #left and #right add overflow:hidden; to contain the floats.

Also to move the floated elements you can add margins, eg margin-right/left.

However if you float something the same direction as the float, in IE6 a bug will be triggered so you need to ad display:inline; to the float.

6

Damn, Ryan, you have done it again…

7

What did I do again lol?

8

Good information, thank you so much Ryan.

9

Your welcome :). If you have any more questions just ask.

10

This is basically a continuation of this thread, so i’ll try to keep it alive for now. My structure is still the same as it is in the first post up there. What I’m basically trying to do is get two divs next to each other, the left is for a voting block like other social media sites have, and the right is for a description that goes along with it. I would like these things right next to each other and be able to flow when the user resizes the browser. It will work if I am to float them both left, or one left and the other right, but only when the browser on my widescreen is maximized, when i shrink the browser down, they overlap and it looks bad. I am not sure what the best solution in this situation is. Would anyone be willing to take a look at it? the problem can be found here, informativeinfirmary.info if you look at the questions/responses.

11

They’ll overlap if someone makes the page ridiculously small-- if “small” means a still-popular browser width (600x800, or you have no mobile stylesheet) then yeah, it’s a problem. They have no choice but to overlap, unless you give one of the them (the right one likely) a left margin equal to the width of the other float. What’ll happen at smaller page widths then is the right one will have to drop.

*edit wait a minute, floats would drop anyway, how are you even getting them to overlap??

Another possibility is to float the first one left, and the right one, don’t float it, don’t set a width on it, just set a left margin (can be in %) equal to the width of the left float. That right side will always try to be 100% wide, minus the margin, so it’ll stretch and grow better than a %-width float will.

An example of the latter would just be these forums-- the left column with the poster info isn’t a % width but pretend it is. Meanwhile the right side just grows as needed. Because it can also shrink as needed, it doesn’t drop down below like a float does.

You would still need a min-width. And for IE6, you COULD use a CSS expression, which is basically javascript for IE only in the CSS. It means users with IE6 and security settings or goofy firewalls that block scripts won’t get the min-width, but that’s why you’d set a regular width anyway:

#box {
min-width: whatever;
max-width: whatever;
}

  • html #box {
    width: the min-width you stated above for those with js off;
    width: expression((document.body.clientWidth>thebiggest) ? “maxwidthinpx” : ((document.body.clientWidth>thesmallest) ? “auto” : “minwidthinpx”));
    }

It also won’t validate unless you want to stuff it into an IE6-only stylesheet, but I don’t really see the point in that. Non-IE6 browsers won’t even see or parse that.

Paul O’B also has a pure-CSS min-width that works with IE6, but it requires you adding an extra container around the page. If this is more appealing I can try to find it (it might be posted in the tips and tricks thread already, it’s pretty old).