HTML and CSS RSS HTML and CSS RSS

Two column CSS layout

cscgal cscgal is offline Offline Apr 13th, 2007, 8:14 pm |
0
I am often asked how to create a tableless two column CSS layout so I thought I would just post it here for once and for all.
Show Printable Version Show Printable Version
Quick reply to this message  
Code Snippet
•
•
•
•
HTML and CSS Syntax
Toggle Plain Text
  1. <div style="width:900px">
  2.  
  3. <div id="leftColumn" style="float:left; width:200px;">
  4.           Left sidebar with a width of 200 pixels
  5. </div>
  6.  
  7. <div id="rightColumn" style="float:right; width:650px;">
  8.           Body content
  9. </div>
  10.  
  11. <div style="clear:both"></div> <!-- Catches the shorter column up -->
  12.  
  13. </div>
Code Snippet Comments
0
gach94 gach94 is offline Offline | Dec 2nd, 2007
•
•
•
•
Nice and neat job there!
 
0
ODCHOI ODCHOI is offline Offline | Apr 3rd, 2008
•
•
•
•
Hi, do you know how to change blogger.com blog layout with the ones like friendster or myspace? Thank you.
 
0
holmes008 holmes008 is offline Offline | Apr 11th, 2008
•
•
•
•
Cool !
 
0
monem monem is offline Offline | Dec 21st, 2008
•
•
•
•
Hi'' i divided my page into tow parts(left and right) with div tag,so i want to load right part content into right part without loading all the page.
 
0
sunil8986 sunil8986 is offline Offline | Jul 1st, 2009
•
•
•
•
You can easily create two column table less by using <div> tag with "float" attribute (mentioning float value "left")
 
 

Quick Comment
•
•
•
•
•
•
•
•
Message:
•
•
•
•


Similar Threads
Thread Tools Search this Thread



appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC