View Full Version : floats

01-19-2004, 12:17 AM
I got a minor problem with floats.

While i like to sue floats to set out some aspects of my pages (forms for example) i'm unable to due to the layout of my design on my current site. I have two nav bars, both floated to the left and cleared left so that one sits above the other and content wraps around them.

The problem with this is that i cant use any floats inside the content area or they just flick down to level with the 2nd sidebar and onwards.

Any ideas how i can use floats from within the content div. I'd prefer not to have to add any uneccesary markup.


01-19-2004, 12:29 AM
Excuse me if this is offensively obvious, but have you tried float:right;

*Untested theory:o

01-19-2004, 03:04 AM
What about wrapping both sidebars with one div, absolutely positioning that div to the far left edge of the body, and then giving the content div a left margin equal to that of the sidebar's width?

I hope that wasn't too confusing... I don't think it will add any extraneous code due to the fact that it should allow you to eliminate some of your already existing divs.

Also, I think it would probably work to just float your new div left instead of using absolute positioning, though floats confuse me a little too much to be able to be sure on this.

01-23-2004, 02:42 PM
I could do it that way, but due to the elastic nature of the design (all sizes in EMs) i cant use abs pos.

Also that would reqiure me to group both menu bars together, which they are not really. They are separate entities and i want to leave them that way so alternate stylesheets can move them about to different places, in fact the members box probably wont even be a sidebar in the next sheet i do.

In the Source order the boxes are arranged as follows:

<div id="menu">
<div id="members">
<div id="content">

and sicne the first two are floated, any floated elements form then on begin in line with the top of the last floated element - which is halfway down the page.

Can anyone come up with a way of doing this design without floats or abs pos maybe? i dont need the course for it, just gimme an explanation of how you'd approach it and i'll give it a go.

01-23-2004, 03:56 PM
While i like to sue floats
Obviously, when you start to sue floats, you can't expect them to cooperate... :D

No, seriously: I tried a crude example with two left-floated divs, the second one cleared left, two right-floated divs, the second cleared right and a non-floated content div, with inside the last a left- and right-floated p and a normal non-floated p.
All sort of ended up in the places I figured.

01-23-2004, 10:35 PM
but did you have to add any additonal wrappers to make it work?

And what order did you have them in in the source.

cos to have

Box1 Box3

Box2 Box4

you have ato do:
box1 float: left;
box3 float: right;
box2 float: left;
box4 float: right;

Not that i cant change the order of the bits, but the way they are now makes sense if you kill the stylesheet.