Forum Moderators: not2easy
Is it possible to have a container div with two divs in it, one floating to the left and one floating to the right, and for the div floated right to not move when you resize the browser window? Whenever I resize the window, the right float stays on the right side of the browser window and then when it intersects w/ the left float it goes down a new line.
I'm a n00b w/ CSS and I can't find out how to do this.
I've been reading about the theory and I think the reason it does this is because when you float right, it puts the div on the right side of the browser window which is ok, but I just don't want it to move when I resize the window.
Thanks
What happens when you resize (I assume you're resizing down in this case) is that the size of the container <div> shrinks, moving the right edge of that container in and taking the float with it.
Solution? Make it so that the container <div> does not shrink when you resize the browser by giving it an explicit width in pixels (not percentages or EMs). This way, when you resize the browser, it has no effect on the width of the container, and therefore creates no need for the float the move.
If you don't like explicit widths, or for some reason can't use them, read on...
The reason the right float is moving beneath the left float on resize, is again due to default float behavior. Whenever two floats are required to occupy the same horizontal space, and that space is not large enough for both floats, the one that comes second in the code moves down until it reaches a space wide enough for it to float. Since floats require widths, the only way to avoid this stacking is to (a) make sure the summed width of your floats (plus any margins, padding and borders) does not exceed the width of the container, or (b) use only one float.
I suggest (b) -- actually, I suggest giving the container a width, first, then (b). Anytime you put two floats side-by-side you're bound to run into trouble. Floats are finiky(sp?) things, especially in IE browsers, and in almost all cases less=best.
Instead of two floats, one left one right, try one float: left and a second <div> with a margin-left equal to the width of the float. This removes the potential problems and, if the second <div> doesn't have an explicit width, removes the stacking problem as well.
an explicit width in pixels (not percentages or EMs)
Nothing wrong with declaring the width in ems. Only difference to declaring it in pixels is that the size of the container will grow or shrink if the user changes the text size in their browser. "em" is the width of the letter "m".
And if the first element in a container is the one you want postioned on the left, you don't have to float it. Default in this case is to appear on the left.
Nothing wrong with declaring the width in ems
I disagree. If I resize the text in my browser, any element with a width set in EMs will resize it's width as well, resulting in the situation above breaking since one of the elements is now wider than it was before. To use EMs, you would have to set ALL widths in EMs. Even then, stuff is going to move when text is resized, and the original post asked about making things not move on resize.
if the first element in a container is the one you want postioned on the left, you don't have to float it
If you want it on the left and also BESIDE another element, you do have to float it. If you want the element on the right first in the code, you float that. but the float is necessary to get them side by side.
If I resize the text in my browser, any element with a width set in EMs will resize it's width as well, resulting in the situation above breaking since one of the elements is now wider than it was before. To use EMs, you would have to set ALL widths in EMs.
Okay. If I said "nothing wrong with declaring width in ems, but be consistent" would you agree? Widths declared in ems behave differently to widths declared in pixels, and you have to check your own design to see which it is that you want. I agree that, usually, you shouldn't mix the two.
As far as your second point is concerned, I don't fully understand it. but, in any case, what I said was wrong. It's the case that if the right-hand element is declared first, you don't have to float the left-hand element. Eg, if you have
<div class="container">
<p class="right">Right</p>
<p class="left">Left</p>
</div>
with a style sheet declaring
.left { float:left; }
.right { float:right; }
you can safely delete the float rule for ".left" and still get the same results.
If "left" is declared before "right" in the HTML, then you have to include the rule. It makes a difference in this second case.
Sorry for any confusion caused. I had the feeling something was wrong when I typed my original message, but got it into my head that there was a typo I couldn't make out :) This reinforces the first rule of programming: always get someone else to check your code!
As far as your second point is concerned, I don't fully understand it. but, in any case, what I said was wrong. It's the case that if the right-hand element is declared first, you don't have to float the left-hand element
That's what I was trying to get across, that in a situation with one float and one non-float, you have to float whichever one is first in the code.
Maybe we were both up too late last night or something.
Anyway, I would absolutely agree that you should either use all EMs or all PX, depending on the needs of the layout, or at least be prepared for the resizing of EM sized objects to break the layout when mixed with PX sized objects.
