Tuesday ([info]fiere) wrote in [info]webdesign,
@ 2008-05-14 01:04:00
Previous Entry  Add to memories!  Tell a Friend!  Next Entry
Float issue (maybe?)
I keep having this issue but forget to ask for help, mainly because it's kind of hard to explain:

Here I have a sidebar div and a text/content div, both within a container div, and then a footer div outside the container (here's the CSS). The sidebar div is set to "float: left", the text div is not positioned, and the footer div is set to "clear: both". The issue appears when the height of the text div is less than the height of the sidebar div - then the footer jumps up to match the height of the text div as opposed to the sidebar div. I've worked around it by setting a height for the sidebar, but then I have to manually change that every time the sidebar's height changes.

I have the same issue on another site where the sidebar div (float:left) and the content div (not defined) are within a container div, and the footer div (clear:both) is outside it, except here the footer stays below the sidebar but the defined background of the content div jumps up to match the height of the content div as opposed to the sidebar's, which led me to believe that it's not the footer being outside the container that's the problem.

...I hope that made at least some sense, I can try to clarify if it didn't. Any help would be greatly appreciated!

(Post a new comment)


[info]tactful_cactus
2008-05-13 11:38 pm UTC (link)
Two things that sometimes help:
Make the containing div a float also, or give the containing div on overflow value.

(Reply to this)(Thread)

[info]fiere
2008-05-14 10:04 am UTC (link)
Thanks! What kind of float/which overflow value would help?

(Reply to this)(Parent)(Thread)

[info]tactful_cactus
2008-05-14 03:45 pm UTC (link)
Float right or left... it shouldn't really matter since there's not actually anything that will be floating next to it. I tend to just use whatever value I've given the other floats. The examples I've read always make the overflow visible. I'm not certain, but I think any value might work (though I'd stay away from auto, as there's always the risk of unintentionally getting scroll bars). It's basically supposed to work because assigning an overflow value sort of "reminds" the div that it needs to pay attention to the content and the space those contents take up.

(Reply to this)(Parent)(Thread)

[info]fiere
2008-05-14 06:40 pm UTC (link)
Assigning an overflow value didn't have an effect, but floating the container either right or left did solve the jumping-up issue, except it then shifted the container to the left/right (it's usually centred). Gah! Is there any way to work around this?

(Reply to this)(Parent)(Thread)

[info]tactful_cactus
2008-05-14 07:13 pm UTC (link)
Oh, gah. One thing always leads to another. I just realized that whenever I've used that technique, it was already within a box that was within a centered div (one more layer of divs).

...so you could add another unnecessary containing div and center that.

...or you could use the negative margin method on the existing containing div (which means you'd have to use absolute positioning):
#content {
position: absolute;
width: 682px;
left: 50%;
margin-left: -341px; (half of width)
}

...or, you could remove the float that I recommended and add an empty div to the end of your containing div that just has the property "clear: both;".

Obviously, all of these have their disadvantages. :-/

(Reply to this)(Parent)(Thread)

[info]fiere
2008-05-14 08:00 pm UTC (link)
I couldn't centre the additional containing div, for some reason, it seemed the original container just ignored it and continued to float left. The negative margin method might work on the site I linked to (haven't tried that yet), but won't work on the second site because it needs a percentage width. How would the empty div be different from the footer, which already has clear: both? I really don't mean to shoot you down or anything, I just wish there was a surefire way to fix this! (I thought I'd solved it when I gave the content/text div a min-height value that's the same as the sidebar's height, but then I realised that's pretty much exactly the same thing as giving the sidebar a fixed height. Dear god.)

(Reply to this)(Parent)(Thread)

[info]tactful_cactus
2008-05-14 08:36 pm UTC (link)
You're right; your footer should acting as the clearing div. Ugh. And I have no idea why the other containing div won't center. I'm just creating more problems for you, it seems!

Min-height's definitely not a good idea, though, because it's not supported by IE 7 and below (I'm not sure if it's supported by IE8).

(Reply to this)(Parent)(Thread)

[info]fiere
2008-05-14 09:13 pm UTC (link)
No worries, thanks for trying to help! I learned some things that fixed totally different problems I was having, at least, so it didn't go to waste. :)

(Reply to this)(Parent)

Create an Account
Forgot your login?
Login w/ OpenID
English • Español • Deutsch • Русский…