You are invited to Log in or Register a free Frihost Account!

CSS Help needed : Table emulation with divs

I have tried messing around a lot but just cant figure it out, also search on the net didn't truly give an answer. The following image kinda shows the basics of how I wish to have it:

As you can see I want the left column to basically span the two right cells. Now to do this with tables that's basically a piece of cake, but how would you do this in CSS with the help of divs?
You're going to have to do alot of negative margins. It's not really worth the hastle - you may as well do it with tables, and save yourself the headache of making the css like a table.
What do you mean negative margins? that looks like a pretty basic 3 div design.
But why emulate tables, when you can just use tables? Unless you're trying to teach yourself, in which case I think the best course of action is to buy a book. Like:

PHP for Dummies was mighty useful, and I'm sure CSS for Dummies is gold. Not that you're a dummy.
Nvm, I've fixed it, turned out to be pretty easy in the end. Made the left div a left float, created a div next to it which would act as a container for the other 2 divs. Then just placed 2 nested divs in that one, works like a charm Smile.

I'm emulating tables since I'm going for a CSS only design, want to get rid of tables in my work so Smile. And besides that it's a nice training in CSS as well.

As for the book, I dun like the dummies series, have read both PHP and HTML for dummies, didn't truly find them educational. Also I've read a part of C++ for dummies, but that was more of a joke than anything else Razz.
i was gunna say...thats really easy if we're just talkin about those 3 blocks.

just float them...

and you dont need c++ for dummies. if you know php you kno c++ and nearly any other programming language out there. php is soo closely resembled to c++ its not even funny. only difference is some syntax and built in functions.
I didn't even read the book to learn C++ since I already knew it, but what was being tought in that book was just so hilarious. It was like 200 pages or so of how to get up to the usage of classes, at that point you still know next to nothing Razz. Waste of money to use that book to seriously learn the language.

In my case I did the PHP/C++ thing the other way around though, learned PHP afterwards Razz.

But well yeh, have been messing around a bit more, can now easily make multi column tables with the help of floats. Even easier though with table-row and table-cell, but IE doesnt support that yet :p.
yea that was the same for me, learned c++ then went to php.

hopefully i can finish up my site soon and see what you guys think of it. since two versions of my website ago i started using CSS and div's exclusively to format everything and never looked back. there are some really nifty tricks you can do once you really get into it.
you can do those with CSS?
zjosie729 wrote:
you can do those with CSS?

Yep Smile, check out this page:

For me it was a great help on getting me going with the emulation of tables, have been messing around with it a lot and it's working out pretty nicely now Smile.
Texas Al
Yes, multi-column floats are nice, until you have a page where there is very little content in each column, so when someone is looking at it on a big browser window, the columns end halfway down the page and it looks wierd.

Or you have one column that's shorter than the others, so it ends where it ends, and the rest just keep going. Sure, you can leave it like that and it will look fine... but it bugs me that anybody who knows CSS will look at it and go "aha, the old three-column float trick, I know how he did that".

Also, watch out for IE. There's a million features of CSS that it implements differently from all the standards compliant browsers. So you could make something that looks great in IE and then look at it in FF and "OMG, why are these blocks of text on top of each other". And vice versa.

There are lots of zealots out there who will pretend that CSS-only layouts can do everything, but pretending that they are will not make them that way. In fact, refusing to pretend that CSS is adequate for all layout needs is how we'll get the W3C people to get off their asses and do whatever it is that needs to be done to get all the browser developers on the same page.

Until then, the fact that CSS is unnecesserily cumbersome for layout is not my problem. I don't care if the 0.001% of the population who use screen readers has trouble with my site. So when something doesn't work with CSS, rather than spending sleepless nights figuring out CSS hacks (which defeat the whole purpose of CSS in the first place) I just shrug and go back to tables. Nobody will ever stop supporting tables, and even IE implements them correctly by now.
3 column hacks are only needed if you create your layout to that, not truly needed in my case.

Also, CSS3 stops the requirement for this as well by supporting a multi column property. That will prevent the usage of CSS hacks being required in order to achieve the same result. It's just a shame that IE doesn't support this yet.
Texas Al
If IE was a person, I'd want to hunt IE down and smack them with a lead-filled clue stick. I mean, I'd smack IE hard, not some kind of pussy love-tap. I'm talking about the kind of smacking that's accompanied by satisfying crunching and squishing sounds.
its easy to make pages cross compatible with CSS. i've just found that if you don't float everything, specify the height/width properly, or not using the correct tags that things get a lil out of hand and end up looking different.

i always check everything i make in both browsers to make sure that it all syncs up.

here's my site. its quite barren since i've only started it mebbe 3 days ago and have had most of my time occupied with drinking for the holidays... i've alot to add and to change.

take a look at the source and thats what css can do for you. cleans everything up. i love it.
Related topics
Help needed from Noobie and other graphic artists.
Validation help needed
CSS Help...
Help needed :P
Help needed with Javascript and overflow
Basic CSS help needed regarding IE vs FF
Joomla CSS Help Just like any CSS Help
CSS help with existing "roll overs"
Help with my layout
Big Help needed .
CSS help needed with list style menubar
help needed with css & javascript
CSS Help
Help Needed with phpBB overall_header.tpl
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

© 2005-2011 Frihost, forums powered by phpBB.