Design page layout using CSS/Div like HTML table

Question

Since i am new to CSS, i am not sure if the following page layout is possible using Div/CSS or shall i use HTML table?.

i want to design my page such that, Left sid

Answer 1

You don't need to use <table> for the layout you described (and you won't need anything CSS3 or HTML5 specific).

There are a few options for implementing this layout. Here's a good tutorial on CSS layout:

• CSS Layouts

Here is one 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;
}

Screenshot of results

Answer 2

Sounds like you either want a two-column or three-column layout. Here's a few links for understanding how to create either:

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/

Answer 3

There is another way to make table by div/css

- 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; }