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

[sesquipedality.livejournal.com]

Use tables.

(Possibly not helpful, but it does work. I stopped understanding HTML about the time style sheets got really cool. There's probably some whizzo style sheet element that will do what you want, but I have no idea how to do it.)

[venta.livejournal.com]

Unfortunately, my stylesheet (written by someone cleverer than me) has various style elements for tables, and I don't want them to be present in this case. I do want them present in the other cases. And I don't know how to override them.

[triskellian]

Don't use tables :-)

Short answer: use float.

Long answer: if you want to do something more cunning (having both columns the same height regardless of their content, for example), you could do worse than look at these CSS layout templates.

[venta.livejournal.com]

Truly, you are a marvel among women! Your prize is knowledge that there is one very very slightly less painful website in the world :)

Thanks very much - it seems to be Just Working surprisingly nicely!

[feanelwa.livejournal.com]

Have you tried to make it work in IE yet?

[venta.livejournal.com]

It seems to work in IE.

It initially did not (I had totally forgotten to check until you reminded me, thank you) but that turned out to be valid behaviour on IE's part. FF was being a lot more tolerant of a missing > and doing what I meant; IE did what I said (unusually).

[qatsi.livejournal.com]

One standard div on the outside, two divs inside with style display: inline; width: 50%;, I think.

Don't use tables unless it's tabular data.

One day, maybe, I will understand how float works.

[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.

[venta.livejournal.com]

This isn't work stuff: I'm a volunteer, they can't fire me anyway :) You get rid of volunteers by finding someone else willing to do the job, in which case bring them on!

The thing I am floating is, as it happens, a box repeating the last n tweets from a particular twitter account. Accordingly it will change size depending on how verbose[*] I have been of late, so absolute positioning might well not help me here.

[*] In so far as one can do verbosity on twitter.

[chrisvenus]

One thing with floats is you can get unwanted behaviour sometimes when you shrink the screen width such that one float then goes below the other. Never that kind of problem with absolute positionings. :) It depends on exactly how you are playing with their widths and such like. :)

[onebyone.livejournal.com]

No one ever got fired for choosing floats!

Unless they should have used doubles.

Or a decimal type.

[undyingking.livejournal.com]

This tutorial is how I learned how to do floats, and I still refer back to it for complicated situations. Strongly recommended!

Position absolute would be great if all users' windows were the same size, but sadly they aren't -- even less so in this modern age of smartphones and the like. You can end up with a real mess of overlapping content. Sticking to floats means that you can always make sure container sizes fall back to percentages.