Numpty CSS question

[venta]

Apologies for any stupidity of question... me and CSS still don't get on.

I have defined myself two nice <div> elephants elements, each of which will take up about half the screen.

Now I just need to persuade my stylesheet to help me put them next to each other rather than one below the other.

The ideal answer will not involve tables :) Does anyone know what I should be looking at doing?

Comments

[ewx.livejournal.com]

I know of two ways to use float, based on having had to re-learn it (or more accurately at first re-cargo-cult it) about once every 2-3 years.

In the first you only float a single div; everything else "flows" past, on the right if you used float:left and on the left if you used float:right. Once the everything-else has got past the float it'll use the full width. To guarantee an element sits below the float make it clear:left (or clear:right).

In the second, you make div.left be float:left and div.right be float:right. Provided their combined width does not exceed the width of their container they will sit next to other (otherwise they will sit on top of one another).

You need to set clear:both on the element after them to ensure it stays below them both rather than trying to fit between them.

In both cases, if a floated element can take up the full width of the parent it will do so, voiding your attempts at formatting. So you need to set width explicitly. This is a nasty trap which has caught me more than once: if you take what you see in a tutorial and try and isolate down to the bits that look important - float and clear - it all stops working.

http://www.greenend.org.uk/rjk/2011/float.html what I did while confirming my understanding, in reverse order of the above.

[venta.livejournal.com]

All useful stuff, thank you. My earlier claim that it All Just Worked has now been shown up for the hubris it clearly was, and I have bounding boxes all over the show.

Having solved my original problem, I've now moved onto something where I suspect I actually genuinely do want a damn table :)

[hjalfi.livejournal.com]

I suspect you just want to Give Up And Use Tables (http://giveupandusetables.com).

I spent several days trying to achieve an incredibly simple effect on my web site (text vertically centred in a box). Once I had reached a page and a half of complicated CSS and it still didn't work on some browsers, I Gave Up And Used Tables, and then it actually worked.