1,105,386 Community Members

Two column CSS layout

Member Avatar
Reputation Points: 1,356 [?]
Q&As Helped to Solve: 931 [?]
Skill Endorsements: 204 [?]
 
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.

<div style="width:900px">

<div id="leftColumn" style="float:left; width:200px;">
          Left sidebar with a width of 200 pixels
</div>

<div id="rightColumn" style="float:right; width:650px;">
          Body content
</div>

<div style="clear:both"></div> <!-- Catches the shorter column up -->

</div>
Member Avatar
Dani Horowitz

I run DaniWeb. I coded (and currently maintain) the site from scratch using PHP/MySQL/jQuery and grew it into a thriving community of over 1 million IT professionals and 10 million visitors a month, making it not only one of the largest social media websites in its niche, but one of the largest publications on the web to date. I sell advertising. I host annual events throughout Manhattan during Internet Week, Advertising Week and Social Media Week which each see an average of over 1000 attendees. I host a bimonthly meetup group for techies on Long Island and eastern Queens. I speak on panels at search engine conferences. I run a brick-and-mortar coworking community for the tech industry in Queens, NY. I multitask. I consider myself a platform creator and a community builder. I'm a super-geeky programmer with a passion for Internet marketing. I am not for hire.

Member Avatar
gach94
Newbie Poster
2 posts since Dec 2007
Reputation Points: 0 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 0 [?]
 
0
 

Nice and neat job there!

Member Avatar
ODCHOI
Newbie Poster
7 posts since Oct 2007
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Hi, do you know how to change blogger.com blog layout with the ones like friendster or myspace? Thank you.

Member Avatar
holmes008
Light Poster
28 posts since Mar 2008
Reputation Points: 0 [?]
Q&As Helped to Solve: 2 [?]
Skill Endorsements: 0 [?]
 
0
 

Cool !

Member Avatar
monem
Newbie Poster
10 posts since Apr 2008
Reputation Points: 0 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 0 [?]
 
0
 

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.

Member Avatar
sunil8986
Newbie Poster
6 posts since Jul 2009
Reputation Points: -7 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

You can easily create two column table less by using <div> tag with "float" attribute (mentioning float value "left")

Member Avatar
silveraden
Junior Poster in Training
56 posts since Nov 2007
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Wow, this is very helpful. Should I delete the numbers? Thanks

You
Post:
Start New Discussion
Tags Related to this Article