Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Design page layout using CSS/Div like HTML table

Design page layout using CSS/Div like HTML table

Problem

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 side (i.e around 30%) divide into 3 parts with some margin (i.e one Column and 3 rows) and rest of the page in 2 rows (i.e one Column and 2 rows).

Not sure if i could explained it properly. I have the image file but Stackflow does not allow me to upload because of less reputation.

Problem courtesy of: JDev

Solution

You don't need to use

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

Left Side Row 1
Left Side Row 2
Left Side Row 3
Right Side Row 1
Right Side Row 2

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

Solution courtesy of: JohnB

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Design page layout using CSS/Div like HTML table

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×