PDA

View Full Version : Float:right behaviour (Mozilla/IE)



pakmannen
Jan 11th, 2007, 01:05 PM
Hi!

I'm trying to create a so called "liquid" layout (for the first time I might add) and it's been going surprisingly well so far. However, there is one thing I'm trying to do which is probably not possible. Figured I'd ask anyhow.

I've uploaded an example here (http://www.tjoff.com/test)

Now, pay attention to the two big white boxes with two forms each. Things work well in 1024x768 and above (in both Mozilla and IE, which is surprising in its own..) When we drop to 800x600 things start to change.

The way Mozilla handles it is what I want (text placed top left, forms stack to the right) I don't know if this is the correct behaviour (but I'm guessing it is since IE usually does things wrong when it comes to floats) but is there a way to get IE to behave similarly?

If that is possible I'd be happy, but there is one more thing which would be great if it could be done: Screen sizes between 1024 and 800 puts the text below the two forms. If possible, I'd like the text to always stay top left and the forms to the right (side by side if there's space, otherwise stacked on top of each other)

Cheers :D

koyama
Jan 11th, 2007, 03:07 PM
Floated layout is complicated by the fact that standards don't give a complete recipe for user agents how to lay out the elements. There is some degree of freedom for browsers. And the differences in rendering are not necessarily related to bugs. Especially mixing left and right floats is tricky.

I believe it is possible to do what you want.

Try to group your two right 'columns' in a float. You may try this example:
Background colors are added so you can see what is going on.


#group {
float: right;
background: red;
}
#one{
float: left;
width: 100px;
background: green;
}
#two{
float: left;
width: 100px;
background: yellow;
}
#left {
background: blue;
}



<div id="group">
<div id="one">form 1</div>
<div id="two">form 2</div>
</div>

<div id="left">
liquid left column
liquid left column
liquid left column
liquid left column
liquid left column
</div>

pakmannen
Jan 11th, 2007, 10:28 PM
Tackar så mycket! :)

The example works like a charm. There's still the question of implementing it in my layout, which has proven a little tricky, but now I know it is possible.

Again, thank you.