3 column layout with multiple divs

Thread Solved
1 2

•
•
Join Date: Jan 2009
Posts: 33
Reputation: arvindikchari is an unknown quantity at this point 
Solved Threads: 0
arvindikchari arvindikchari is offline Offline
Light Poster

3 column layout with multiple divs

 
0
  #1
Feb 12th, 2009
Hello

I am new to CSS so what I am asking is probably very simple to experienced coders, I am trying to create a CSS Layout that closely mimics the look of a Cubecart 3 Store.

The site whose design I want to recreate (esp the layout) is at http://cubecart3.http.mn/

I have tried coding it but always get stuck and the result looks very horrible, can someone help me out and code the basic layout of the site at cubecart3.http.mn?
Also, I want that each 'box'(in left and right columns of the site) should be a separate div

Thanks and regards,
Arvind
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2007
Posts: 232
Reputation: macneato is an unknown quantity at this point 
Solved Threads: 19
macneato's Avatar
macneato macneato is offline Offline
Posting Whiz in Training

Re: 3 column layout with multiple divs

 
0
  #2
Feb 12th, 2009
Hi,

Very simple, I'm using inline styling, feel free to create it in a seperate stylesheet.

HTML and CSS Syntax (Toggle Plain Text) 
  1. <div id="container" style="width:100%">
  2.   <div class="header" style="width:100%; height:100px; background:purple">
  3.     <p>Header </p>
  4.   </div>
  5.   <div class="leftCol" style="width:20%; background:red; float:left">
  6.     <p> Left Col </p>
  7.   </div>
  8.   <div class="centerCol" style="width:60%; background:blue; float:left">
  9.     <p> Center Col </p>
  10.   </div>
  11.   <div class="rightCol" style="width:20%; background:yellow; float:right">
  12.     <p> Right Col </p>
  13.   </div>
  14.   <div class="footer" style="width:100%; clear:both; background:pink; height:29px">
  15.     <p> Footer </p>
  16.   </div>
  17. </div>
If this reply solved your problem, please add to my reputation and don't forget to mark this thread as solved.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2009
Posts: 33
Reputation: arvindikchari is an unknown quantity at this point 
Solved Threads: 0
arvindikchari arvindikchari is offline Offline
Light Poster

Re: 3 column layout with multiple divs

 
0
  #3
Feb 12th, 2009
Hello,

I want there to be multiple 'boxes' within the left and the right columns, as is shown at http://cubecart3.http.mn/. And each box consisting of one div for title (of that box) and content (of that box)
Please code this and show me how to do it

Thanks,
Arvind
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2007
Posts: 232
Reputation: macneato is an unknown quantity at this point 
Solved Threads: 19
macneato's Avatar
macneato macneato is offline Offline
Posting Whiz in Training

Re: 3 column layout with multiple divs

 
0
  #4
Feb 12th, 2009
Easy... Nest your divs. Ill do one, then you should be able to take it from there.

HTML and CSS Syntax (Toggle Plain Text) 
  1. <div id="container" style="width:100%">
  2. <div class="header" style="width:100%; height:100px; background:purple;overflow:hidden">
  3.   <p>Header </p>
  4. </div>
  5. <div class="leftCol" style="width:20%; background:#fff; float:left; overflow:hidden">
  6.   <!-- nested div -->
  7.   <div class="content_box" style="width:98%; margin: 0 auto; padding:2%;overflow:hidden">
  8.     <!-- header -->
  9.     <div class="header" style="width:100%; background:orange;overflow:hidden">
  10.       <h2> heading 1 </h2>
  11.     </div>
  12.     <!-- content -->
  13.     <div class="content" style="width:100%; background:red;overflow:hidden">
  14.       <p> content content content content content content </p>
  15.     </div>
  16.   </div>
  17.   <!-- nested div -->
  18.   <div class="content_box" style="width:98%; padding:2%;overflow:hidden">
  19.     <!-- header -->
  20.     <div class="header" style="width:100%; background:orange;overflow:hidden">
  21.       <h2> heading 2 </h2>
  22.     </div>
  23.     <!-- content -->
  24.     <div class="content" style="width:100%; background:red;overflow:hidden">
  25.       <p> content content content content content content </p>
  26.     </div>
  27.   </div>
  28. </div>
  29. <div class="centerCol" style="width:60%; background:blue; float:left;overflow:hidden">
  30.   <p> Center Col </p>
  31. </div>
  32. <div class="rightCol" style="width:20%; background:yellow; float:right;overflow:hidden">
  33.   <p> Right Col </p>
  34. </div>
  35. <div class="footer" style="width:100%; clear:both; background:pink; height:29px;overflow:hidden; float:left">
  36.   <p> Footer </p>
  37. </div>
  38. </div>

Just style it properly according to what you want.
If this reply solved your problem, please add to my reputation and don't forget to mark this thread as solved.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2009
Posts: 33
Reputation: arvindikchari is an unknown quantity at this point 
Solved Threads: 0
arvindikchari arvindikchari is offline Offline
Light Poster

Re: 3 column layout with multiple divs

 
0
  #5
Feb 12th, 2009
I have just one more request for you, I want the CSS and HTML to be separated from the above, can you code that too, thanks for your help

Regards
Arvind
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2007
Posts: 232
Reputation: macneato is an unknown quantity at this point 
Solved Threads: 19
macneato's Avatar
macneato macneato is offline Offline
Posting Whiz in Training

Re: 3 column layout with multiple divs

 
0
  #6
Feb 12th, 2009
Ok dude, but you really should be tryin to do this yourself, how else you gonna learn? Anyway, here is the code seperated. Just add the css part to a .css file, and link to it from your html.

All the best.

HTML Syntax (Toggle Plain Text) 
  1. <div id="container">
  2. <div class="header">
  3.   <p>Header </p>
  4. </div>
  5. <div class="leftCol">
  6.   <!-- nested div -->
  7.   <div class="content_box">
  8.     <!-- header -->
  9.     <div class="header">
  10.       <h2> heading 1 </h2>
  11.     </div>
  12.     <!-- content -->
  13.     <div class="content" style="">
  14.       <p> content content content content content content </p>
  15.     </div>
  16.   </div>
  17.   <!-- nested div -->
  18.   <div class="content_box">
  19.     <!-- header -->
  20.     <div class="header">
  21.       <h2> heading 2 </h2>
  22.     </div>
  23.     <!-- content -->
  24.     <div class="content">
  25.       <p> content content content content content content </p>
  26.     </div>
  27.   </div>
  28. </div>
  29. <div class="centerCol">
  30.   <p> Center Col </p>
  31. </div>
  32. <div class="rightCol">
  33.   <p> Right Col </p>
  34. </div>
  35. <div class="footer">
  36.   <p> Footer </p>
  37. </div>
  38. </div>

CSS Syntax (Toggle Plain Text) 
  1. #container {width:100%;}
  2. .header {width:100%; height:100px; background:purple;overflow:hidden;}
  3. .leftCol {width:20%; background:#fff; float:left; overflow:hidden;}
  4. .content_box {width:98%; margin: 0 auto; padding:2%;overflow:hidden;}
  5. .header {width:100%; background:orange;overflow:hidden;}
  6. .content_box {width:100%; background:red;overflow:hidden;}
  7. .centerCol {width:60%; background:blue; float:left;overflow:hidden}
  8. .rightCol {width:20%; background:yellow; float:right;overflow:hidden}
  9. .footer {width:100%; clear:both; background:pink; height:29px;overflow:hidden; float:left}
If this reply solved your problem, please add to my reputation and don't forget to mark this thread as solved.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2007
Posts: 232
Reputation: macneato is an unknown quantity at this point 
Solved Threads: 19
macneato's Avatar
macneato macneato is offline Offline
Posting Whiz in Training

Re: 3 column layout with multiple divs

 
0
  #7
Feb 12th, 2009
noticed i used the same class twice. Just swap the second .header for "content_title" or whatever. Then change your div classes to match it
If this reply solved your problem, please add to my reputation and don't forget to mark this thread as solved.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2004
Posts: 247
Reputation: cmills83 is an unknown quantity at this point 
Solved Threads: 1
cmills83 cmills83 is offline Offline
Posting Whiz in Training

Re: 3 column layout with multiple divs

 
0
  #8
Feb 12th, 2009
•
•
•
•
Originally Posted by arvindikchari View Post
Hello

I am new to CSS so what I am asking is probably very simple to experienced coders, I am trying to create a CSS Layout that closely mimics the look of a Cubecart 3 Store.

The site whose design I want to recreate (esp the layout) is at http://cubecart3.http.mn/

I have tried coding it but always get stuck and the result looks very horrible, can someone help me out and code the basic layout of the site at cubecart3.http.mn?
Also, I want that each 'box'(in left and right columns of the site) should be a separate div

Thanks and regards,
Arvind
HTML and CSS Syntax (Toggle Plain Text) 
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. body {
  5. margin:0;
  6. padding:0;
  7. background:#cecece;
  8. }
  9. #wrap {
  10. width:960px;
  11. margin:0 auto;
  12. background:#fff;
  13. }
  14. #header {
  15. width:960px;
  16. height:200px;
  17. }
  18. #left {
  19. width:200px;
  20. float:left;
  21. }
  22. #middle {
  23. width:500px;
  24. float:left;
  25. }
  26. #right {
  27. width:260px;
  28. float:left;
  29. }
  30. #footer {
  31. width:960px;
  32. height:30px;
  33. }
  34. .clear {
  35. clear:both;
  36. }
  37. </style>
  38. </head>
  39. <body>
  40. <div id="wrap">
  41. <div id="header">header logo and content</div>
  42. <div id="left">left content and divs</div>
  43. <div id="middle">middle content and divs</div>
  44. <div id="right">right content and divs</div>
  45. <div class="clear"></div>
  46. <div id="footer">copyright</div>
  47. </div>
  48. </body>
  49. </html>
obviously add a doctype, move the css to an external file, etc but that should get you started. try to avoid inline styles (ie <div style="">) and conditional css stylesheets. that should be a good framework to use just adjust the widths of the columns and make sure they = less than 960px
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2007
Posts: 232
Reputation: macneato is an unknown quantity at this point 
Solved Threads: 19
macneato's Avatar
macneato macneato is offline Offline
Posting Whiz in Training

Re: 3 column layout with multiple divs

 
0
  #9
Feb 16th, 2009
I believe this thread has been solved, please mark it accordingly
If this reply solved your problem, please add to my reputation and don't forget to mark this thread as solved.
Reply With Quote Quick reply to this message  
•
•
Join Date: Nov 2008
Posts: 1
Reputation: danix is an unknown quantity at this point 
Solved Threads: 1
danix danix is offline Offline
Newbie Poster

Re: 3 column layout with multiple divs

 
0
  #10
Feb 16th, 2009
Very kind of you macneato.
Reply With Quote Quick reply to this message  
Reply
1 2

Quick Reply to Thread
This thread has been marked solved.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



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

©2003 - 2009 DaniWeb® LLC