SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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>

  2. #2
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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&#37;.
    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.

  3. #3
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Black Max View Post
    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.

  5. #5
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •