Am I using table-cell and table-row too much?

Hey,

I'm just making the switch to doing my layouts in CSS, yet I feel I'm just using display: table-cell and table-row all over the place to compensate.

Is there a different prefered method of making DIVs loose thier line breaking habbits?

Cheers.

Yes, you should never use those properties. Most browsers don't support them anyway. Use display: inline; as it has a similar effect. If you have any CSS (preferably with a website), post it and I'll go through it explaining some better methods to acheive the same effects.

I don't have my site online just yet, though I've written a little test page for my most common layouts.

Code: Select all

Test 1
<br />
<div style="display: inline; border: 1px solid #f00;">DIV1</div><div style="display: inline; height: 500px; border: 1px solid #f00;">DIV2</div>
<br /><br />
Test 2
<br />
<div style="display: inline; height: 100px; border: 1px solid #f00;">DIV4</div>
<div style="display: inline; height: 100px; border: 1px solid #f00;">
  <div style="height: 100px; border: 1px solid #f00">DIV5</div>
  <div style="height: 100px; border: 1px solid #f00">DIV6</div>
</div>

Test 1 is fine, but Test 2 fails horribly. I want two inline divs, but with one containing two normal divs. What should I do in this sittuation?

Also, I can't set the width or height on the inline divs

I really do wonder why so many people rant about doing layouts in CSS, tables are so much quicker.. and actually work in all browsers,

Thanks for your help.

It would help to know what you're doing. When you get the gist of CSS, you'll understand that tables just don't compare. From positioning, layering, aligning and organizing to management, editing and loading time, CSS is better than tables in almost every aspect of web design.

I'm just writting a few layout tests, so that I know how to go from the table-cell/table-row combination to its inline equivalent.

Any help getting Test 2 in the code I posted working is greatly appreciated.

Well the same rules apply. You need to specify widths for the divs so they fit in the allocated space.

OK, so inline obviously what I want as it always takes the minimum height and width possible.

I've managed to create what I wanted using a left floating div with the one to right having a left margin of the same width. Apparently in CSS this isn't a hack but it sure feels like it. I still don't see why people like CSS.. the number of sites you find on goolge with people having problems is staggering. I'm not saying tables should be used for layouts, I just think CSS is a little esoteric. I certainly wouldn't call its layout capabilities elegant.

I really want someone to point something out to me that just makes it all click in my head

I find application based GUI layouts easier to create than CSS (GTK+ especially, though maybe not swing). I just don't see why whoever designed CSS didn't make it a tad easier?

Ahhh, if only it were that simple. CSS is only as complicated as it needs to be.

Tell you what. THis is how I first got to grips with CSS layout.

Build a page with a container div containing 3 other divs. Put a couple of paragraphs in each of the 3 inside divs. THen go to this site and download SimpleCSS.

You say that graphical editors are easier for you... this is a GUI CSS editor. What you need to do is make styes for all of the divs on your test page (#container, #one, #two and #three) change properties and see how the changes you make affect the divs on the page. You'll soon get to grips with what properties change what on the layout.

I mean't that I find writting desktop applications layout easier than CSS (MFC, Qt, GTK+ etc), not that I use a GUI for creating my interfaces I like to use a text editor to design my sites.

I'm getting the hang of floating DIVs now, so I shouldn't ever need table-cell again

Thanks everyone for your help.

P.S Notts here too (during term time anyway)

You may prefer a plain text editor, but jumping straight into the deep end with hundreds of CSS properties and even more variables means, like you've already discovered, that you're going to go about things the wrong way. CSS is such an ambiguous language, you could make some sites look the same with 15 entirely different stylesheets. The real problem is finding out which methods are best and whether or not their outcomes work in all browsers.

Fair enough, I guess I got the wrong end of the stick... but still I found that piece of software really helpfull when I first picked up CSS. Give it a go..

Sweet that ur in Notts too, You go to Trent or NU?

I've been using CSS for quite a while, jut never for layouts, so I'm not that overwhelmed. But of course layouts are the biggest obstacle so still lots to learn.

I go to Trent, didn't work hard enough at my A levels for NU