Design a page layout using CSS / Div as an HTML table

Question

Since I'm new to CSS, I'm not sure if the next page layout is possible using Div / CSS, or will I use an HTML table ?.

I want to create my page so that the left side (i.e. about 30%) is divided into 3 parts with a certain edge (i.e. one column and 3 rows) and the rest of the page in 2 rows (i.e. one column and two lines).

Not sure if I can explain this correctly. I have an image file, but Stackflow does not allow me to upload due to lesser reputation.

Answer 1

You do not need to use <table> for the layout you describe (and you will not need CSS3 or HTML5).

There are several options for implementing this layout. Here is a good CSS layout tutorial:

• CSS layouts

Here is an example of your layout:

• jsFiddle

HTML

 <div class="left-column"> <div>Left Side Row 1</div> <div>Left Side Row 2</div> <div>Left Side Row 3</div> </div> <div class="right-column"> <div>Right Side Row 1</div> <div>Right Side Row 2</div> </div> 

CSS

 .left-column, .right-column{ float:left; } .left-column{ width:30%; } .right-column{ width:60%; } div{ padding:10px; border:solid 1px black; } 

Results Screenshot

Answer 2

There is another way to make a div/css table

 - html <div id="container"> <div id="row"> <div id="left"> <h4>Left Col</h4> <p>...</p> </div> <div id="middle"> <h4>Middle Col</h4> <p>...</p> </div> <div id="right"> <h4>Right Col</h4> <p>...</p> </div> </div> </div> 

• CSS

#container {display: table; }

#row {display: table-row; }

#left, #right, #middle {display: table-cell; }

Answer 3

It looks like you need a two-column or three-column layout. Here are some links for understanding how to create:

2-column: http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

3-column: http://www.456bereastreet.com/archive/201012/how_to_create_a_3-column_layout_with_css/