Thursday, April 23, 2009

[CSS] DIVs next to each other (and DIVs VS Tables all over again)

Let me guess - you need a page header/footer and you wanna use DIVs 'cause your buddy on digg or reddit says tables are soooooooo uncool? 

Here's a few CSS classes that will get you were you want to be:

.left {
width: 80%;
heigth: 10%;
position: relative;
float: left;
}

.right {
width: 20%;
heigth: 10%;
position: relative;
float: right;
}

.wrapper {
width: 100%;
position: relative;
clear: both;
}

And here's an example of the markup you might be looking for:

<div class="wrapper">
<div class="left">
<!-- Whatever - maybe a lame logo -->
</div>
<div class="right">
<!-- Whatever - maybe login stuff -->
</div>
</div>
<div class="wrapper">
<!-- Content -->
</div>

You can repeat this basic Header structure as much as you want if you need nested divs to resemble (here I say it) tables.

But - on a side note - using a table would be much more intuitive 'cause you know what a table is and how it looks like. You certainly don't need to remember loads of crazy CSS properties semantically and visually unrelated to what your trying to do.

Ok, if we're really doing this ... truth is everyone started using DIVs because the word has been spread that using nested tables is unprofessional. This is not totally untrue, but guess what - nesting hundreds of DIVs will bring you nowhere good in terms of maintainability at much lower speed.

My personal choice is a moderate one, try to stay in control finding the balance using a bit of both, DIVs within tables or tables within DIVs, to keep the built-in simplicity of tables and the advantages of DIVs.

Look at this:
If Amazon uses that many nested tables (that's 35 results for the table opening tag in the home page) no-one's gonna bug you for using a few (except those W3C pansies).

8 comments:

swalkner said...

good post - only a little correction: it's "only" 31 tables on amazon-homepage... you are looking for the word 'table', but there are also css-classes containing that word...

when i'm looking for '<table' (that's only the opening tag), i find 31 results.

haemi said...

good post - only a little correction: it's "only" 31 tables on amazon-homepage... you are looking for the word 'table', but there are also css-classes containing that word...

when i'm looking for '<table' (that's only the opening tag), i find 31 results.

Johnny Idol said...

You're damn right - I meant to divide that 96 at the very least but in the end I didn't bother :)

sunwukung said...

I know what you're saying, but that's just bad use of divs. You could have one div for the whole header, a regular H1 or IMG tag for the logo, and another regular semantic tag, a P, UL or whatever for the other. You can then style those by using their parent element i.e: #header h1 etc. Your code is a classic example of 'divitis', and has nothing to do with standards.

Johnny Idol said...

@sunwukung

No need to get confrontational - I agree with you.

I am just showing how to put two divs next to each other. I am then using that example to show what you call 'divitis' - I am not saying it's a standard (am I?) or anything - I am also saying that using tons of divs is no good either.

Anonymous said...

Using tables _is_ unprofessionally since it shows someone does not understand or does not care about what it is all about: cleaner, lesser and hence faster code, accessibility, maintainability, semantics, separation of structure and design and so on.

"DIV-hells" are constructed by table-lovers forced to use DIVs or very untalented HTML-designers.

Just because amazon and many other big ones use tables does not justify its use.

Johnny Idol said...

@Anonymous

The point is that learning CSS positioning is like learning chinese if you speak english - it's doable but for most people it just ain't gonna happen. Just give up and let tables be.

Are you one of those W3C pansies? :)

Term Papers said...

I have been visiting various blogs for my term papers writing research. I have found your blog to be quite useful. Keep updating your blog with valuable information... Regards