How to make layout's structure by using DIV's and CSS?

**zombay** · Jul 21, 2009 11:07

Hello!
I have always used table's to make layout's structure and now I thought it was a time to use DIV's.
After I read couple CSS/DIV manuals, I understood that there is way too many ways to use CSS and DIV's and I just don't have time to learn everything.
I just couldn't find the right manual for me, where things like making layout structure is explained simply "step by step" -way, so then I decided to ask help from here.

Here is how I made layout structure using table's and hopefully someone can tell me how it's made using DIV's. Thanks!

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html> 
 <head>
  <title>Layout's structure made using table's</title>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

  <style type="text/css">
	<!-- 
	body	{
	margin:0px;
	padding:0px;
	background-color:#F9F9FF;
	}

	td {
	font-family:Verdana,Arial,Serif;
	font-size:12px;
	color:#203050;
	}
	--> 
   </style>

</head>
  <body>

<!-- Table id:table1 - Body-table begin -->
<TABLE id="table1" cellpadding="0" cellspacing="0" border="1" style="width:100%; height:100%">
 <TR>
  <TD id="td1" style="width:200px"><div style="width:200px"><!-- --></div>Left-side (td id=1)</TD>
   <TD id="td2" style="width:100%">

	<!-- Table id:table2 - Content-table begin -->
	<TABLE id="table2" cellpadding="0" cellspacing="0" border="1" style="width:100%; height:100%">
	 <TR>
	  <TD id="td4" colspan="3" style="width:100%; height:20px">Top-column (td id=4)</TD>
	 </TR>
	  <TR>
	   <TD id="td5" colspan="3" style="height:60px">Picture-column (td id=5)</TD>
	  </TR>
	   <TR>
	    <TD id="td6" colspan="3" style="height:40px">Menu-column (td id=6)</TD>
	   </TR>
	    <TR>
	     <TD id="td7" style="width:130px; height:100%"><div style="width:130px"><!-- --></div>Content-left-column (td id=7)</TD>
	      <TD id="td8" style="width:100%">Content-middle-column (td id=8)</TD>
	       <TD id="td9" style="width:130px; height:100%"><div style="width:130px"><!-- --></div>Content-right-column (td id=9)</TD>
	    </TR>
	     <TR>
	      <TD id="td10" colspan="3" style="height:30px">Bottom-column (td id=10)</TD>
	     </TR>
	</TABLE>
	<!-- Table id:2 - Content-table end -->

   </TD>
    <TD id="td3" style="width:200px"><div style="width:200px"><!-- --></div>Right-side (td id=3)</TD>
 </TR>
</TABLE>
<!-- Table id:1 - Body-table end -->
 
  </body>
</html>

**zombay** · Jul 21, 2009 11:30

The <div>'s are placed there inside <td> (id's 1, 3, 7 and 9) because without those <div>'s <td>'s width is not 200px and 130px (becouse table's next <td> width is set to 100%.
If there is a better way to set <td>'s width, I like to hear it.

I add '' inside <div>'s becouse without (some reason?) div's height is 10px.

**Black Max** · Jul 22, 2009 15:35

SitePoint's "Designing Without Tables" is a good place to start. I'm no table-structure guru, but your code looks like a fairly basic three-column structure. There are a tremendous amount of free layouts out there that are CSS-based and valid. Let Google be your guide.... You might start by finding A List Apart's "Holy Grail" layout and going from there.

Question: why the huge left-side and right-side defined areas outside of the column structure? Just curious.

**zombay** · Jul 23, 2009 06:57

Originally Posted by Black Max

Question: why the huge left-side and right-side defined areas outside of the column structure? Just curious.

Hey Black Max! Thank you for the tips! I'll check it out when I have some free time.
The idea for the left-right -side is to (HTML 4.0 Transitional) align content-table to left/center/right/top/middle/bottom in body-table td id:td2. I'm sure there is a better way to do this structure by DIV's.

**Black Max** · Jul 23, 2009 10:28

Zombay, there are threads galore throughout these forums about how to center content. You'd think CSS would include a quick and simple method of centering text, centering block items, etc but it didn't, at least not yet.

User Tag List

Thread: How to make layout's structure by using DIV's and CSS?

Thread Tools

Display

How to make layout's structure by using DIV's and CSS?

Bookmarks

Bookmarks

Posting Permissions