Creating 2 blocks side by side
I'm tryin gto go table-less on my next project and find myself wanting to use tables again (especially when it makes it so easy) when I know I shouldn't be!
So I have a standard page and in the lower half, I'd like to have two columns, each starting with a graphic, followed by some text, like in a comparison. Anything I tried didn't work.
I guess what I need would be something like a class that puts the container on the right half of the screen.
Thanks for any help,
I'm always up for networking with fellow web professionals. Connect with me on LinkedIn
if you like!
The CSS way to table obsolence
Originally Posted by stefangs
I take it you're seeking to use CSS for the layout, replacing tables. So I assume you know at least the basics of how CSS works (if not, please let me know).
The CSS (tableless) way to achieve what you want is as follows. Create a div with "overflow: hidden" and "height: 100%" as CSS parameters. This one will replace the <tr> field, AKA, it'll "contain" the two columns. Inside it, create two similar divs, one with "float: left" and the other with "float: right" as CSS parameters. These will act as <td>s, AKA, they will be the columns. It would end up something like this.
This text will go to the left.
This text will go to the right.
Feel free to test the code I sent you, and work from there, as its presentation can be easily modified (the magic of CSS).
Please let me know if it was useful, and whether you need further help.
That's great, thanks! I'll be sure to keep the background color in the 'cells' the same as the body, so I can save the famous CSS uniform column length problem for another time :-)
Originally Posted by cbVision
Thanks Ken for the detailed explanation - very useful indeed. I'm still new to this type of advanced CSS (for me anyway), so examples like this are really helping me out!
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)