floating divs popping out of container div and looking like shite (1 Viewer)

[krystal]

My problem is that my floating divs don't seem to want to stay within the confines of their container, or rather, their container doesn't stretch down to contain them. This looks like shit because I have a background and borders applied to the container div and it's stopping way up the page. Basically I have 2 divs - one floated left and one margined to the right. The left is for content, the right for a submenu. The container div stretches as far as the length of the right hand div and no further. I've tried applying 'clear:both' classes to the ends of both divs and hey presto, yay it works. Oh no it doesn't. It has the effect of clearing out the divs above which contain breadcrumbing and titles. Anyone managed to solve this issue? Oh and of course, this is an IE bug.

Mucho helpo appreciado.

 

[Wavioli]

did you try adding a third div to the container, and giving that a clear:both attribute?

 

[krystal]

Nope - as in below the other two?

did you try adding a third div to the container, and giving that a clear:both attribute?

 

[krystal]

has the same effect. knocks out the top 2 divs above the container div.
ARGH. I may play with a negative top margin. Or something.
I knew there was a reason I never used right hand sub-menus. GAAHH.

 

[krystal]

fixed it. This bad boy did the trick:

.cleared:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

 

[krystal]

ok no I didn't fix it.
GARGJKFYFCFI:bdxadnkcknsad

 

[Wavioli]

i feel your pain...

goddam internot explorer. There is some bug in explorer, that fucks up floated divs if you have border or padding on them, i was having similar troubles last week. Hang on and ill see if i can dig up the page about it...

 

[Wavioli]

its on here somewhere - http://www.positioniseverything.net/index.php

lots of bugs talked about on there, im sure youll find your problem there somewhere

 

[pete]

Go with the Cooper / Simpson solution

"I went to the doctor and I said "it hurts when I do that", he said "well, don't do it."

If something is hard to do then it's not worth doing.

 

[krystal]

oh that's fine thanks, I solved the padding thing for myself long ago. I don't like using hacks, because you've no guarantee that the hack will work in future browser versions for one thing. I nest divs to get round the padding problem and apply rules to the inner div.

i feel your pain...

goddam internot explorer. There is some bug in explorer, that fucks up floated divs if you have border or padding on them, i was having similar troubles last week. Hang on and ill see if i can dig up the page about it...

 

[krystal]

ok....big deep breath...OKK. I think I have it.

 

[Wavioli]

oh that's fine thanks, I solved the padding thing for myself long ago. I don't like using hacks, because you've no guarantee that the hack will work in future browser versions for one thing. I nest divs to get round the padding problem and apply rules to the inner div.

actually that site uses very little hacks to get around the problems.

ok....big deep breath...OKK. I think I have it.

So, care to share?

 

[krystal]

yeah pretty much the 3rd div with clear:both applied to it. Once there was some actual content in the content div and I'd added 50px of padding to the bottom of the body in the CSS that seemed to iron out the 2 divs disappearing up at the top. Thanks for your help!

actually that site uses very little hacks to get around the problems.



So, care to share?

 

[Wavioli]

no problem!

 

[taubstumm]

another possible fix (if i've understood your problem right) is to do a semantic hack (i.e. one in the html) with a non-floated character after the floats.

the logic: your container div doesn't have any content that isn't also enclosed in one or other of the float divs, and so therefore there's nothing 'in' the container to make it 'contain' the floats (it's a bit hard to describe but it makes sense).

the fix is to add in a single character (full stop, comma, whatever) in the container div after all the other divs/content (then use the css to disappear it from view by making it the same colour as the background or something). this forces the container div to display the floats because it has to display a non-floated something-or-other below those floats.

example of this in use in the main nav of the trinity college site. disable styles on the page and you can see a single full stop in the html of the page after the floated <ul> containing the six main nav links. this was done to force the nav background to display properly all the way across even though the nav float doesn't have a 100% width.

 

[krystal]

churs bozz. I tried that alright but it didn't fix what I was doing. I shall keep it in mind for the future however!

 

[Wavioli]

another possible fix (if i've understood your problem right) is to do a semantic hack (i.e. one in the html) with a non-floated character after the floats.

the logic: your container div doesn't have any content that isn't also enclosed in one or other of the float divs, and so therefore there's nothing 'in' the container to make it 'contain' the floats (it's a bit hard to describe but it makes sense).

the fix is to add in a single character (full stop, comma, whatever) in the container div after all the other divs/content (then use the css to disappear it from view by making it the same colour as the background or something). this forces the container div to display the floats because it has to display a non-floated something-or-other below those floats.

example of this in use in the main nav of the trinity college site. disable styles on the page and you can see a single full stop in the html of the page after the floated <ul> containing the six main nav links. this was done to force the nav background to display properly all the way across even though the nav float doesn't have a 100% width.

well you may not have helped kirstie, but it sorted out a problem I'd been banging my head about! Good man tom!