Text columns, table or css?

Get Started
1

Hi everyone, so i got a pretty good one here, luckily I was having trouble creating two text columns with CSS but it worked out with a table, take a look.

If I wanted to create this from pure css, how would i do it? what one is better in the endgame for this, table or css??

2

Table layouts are ten years obsolete. If you Google for two-column CSS layouts, you’ll find a blue million of them, templates, tutorials, the works. Pick one that suits you and deconstruct it to see how it works. Here’s a good place to start.

3

Definitely don’t use tables.

You’s have to start with something like this in html
<body>
<div id=“header”>
<h1> Text Indenting </h1>
</div>
<div id=“leftSide”></div>
<div id=“rightSide”></div>
</body>

And of course Add your content.

CSS:
To make the content reach the edges of the browser window, set the margin and padding of the body and html elements to zero.

Two make the two columns display side by side, float them, and specify widths.

#leftSide {
float:left;
width:500px;
background:#fff;
}
#rightSide {
float:right;
width:250px;
background:#fff;
}

Vague example.

4

I saw this new CSS3 feature in the book HTML5 and CSS3 for the real world…should work for you.

Link

~TehYoyo

5

Unfortunately, CSS3 is still a work in progress, and support for its features is patchy in newer browsers and non-existent in older browsers. Those browsers that do support multi-column layouts mostly require vendor pre-fixes to make it work.

6

Well, of course, as are all-most css3 properties. I was just suggesting an alternate strategy.

~TehYoyo

7

Neat neat neat, CCS3 looks very cool, and thanks everyone I see how i can utilize the float property for columns.

8

If you think that’s cool, you should take a look at this article and [url=http://www.hongkiat.com/blog/coding-graphics-with-css3/]this crazy thing.

CSS3 is amazing :smiley:

~TehYoyo

9

You want cool CSS3? Look at this page I made (not my website, just coded hte page on it) for a content.

[URL=“http://egproductions.net/Files/HTML/sitepoint.html”]http://egproductions.net/Files/HTML/sitepoint.html

The Code is <3.