943,546 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > 3 column layout with multiple divs
Ad:
You are currently viewing page 1 of this multi-page discussion thread
Permalink
Feb 12th, 2009
0

3 column layout with multiple divs

Expand 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
Reputation Points: 10
Solved Threads: 0
Light Poster
arvindikchari is offline Offline
41 posts
since Jan 2009
Permalink
Feb 12th, 2009
0

Re: 3 column layout with multiple divs

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>
Reputation Points: 46
Solved Threads: 48
Posting Pro in Training
macneato is offline Offline
410 posts
since Jun 2007
Permalink
Feb 12th, 2009
0

Re: 3 column layout with multiple divs

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
Reputation Points: 10
Solved Threads: 0
Light Poster
arvindikchari is offline Offline
41 posts
since Jan 2009
Permalink
Feb 12th, 2009
0

Re: 3 column layout with multiple divs

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.
Reputation Points: 46
Solved Threads: 48
Posting Pro in Training
macneato is offline Offline
410 posts
since Jun 2007
Permalink
Feb 12th, 2009
0

Re: 3 column layout with multiple divs

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
Reputation Points: 10
Solved Threads: 0
Light Poster
arvindikchari is offline Offline
41 posts
since Jan 2009
Permalink
Feb 12th, 2009
0

Re: 3 column layout with multiple divs

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}
Reputation Points: 46
Solved Threads: 48
Posting Pro in Training
macneato is offline Offline
410 posts
since Jun 2007
Permalink
Feb 12th, 2009
0

Re: 3 column layout with multiple divs

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
Reputation Points: 46
Solved Threads: 48
Posting Pro in Training
macneato is offline Offline
410 posts
since Jun 2007
Permalink
Feb 12th, 2009
0

Re: 3 column layout with multiple divs

Click to Expand / Collapse  Quote originally posted by arvindikchari ...
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
Reputation Points: 37
Solved Threads: 1
Posting Whiz in Training
cmills83 is offline Offline
249 posts
since Jun 2004
Permalink
Feb 16th, 2009
0

Re: 3 column layout with multiple divs

I believe this thread has been solved, please mark it accordingly
Reputation Points: 46
Solved Threads: 48
Posting Pro in Training
macneato is offline Offline
410 posts
since Jun 2007
Permalink
Feb 16th, 2009
0

Re: 3 column layout with multiple divs

Very kind of you macneato.
Reputation Points: 10
Solved Threads: 1
Newbie Poster
danix is offline Offline
1 posts
since Nov 2008

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: Simple Calculator. . Evaluate Please
Next Thread in HTML and CSS Forum Timeline: <h> tag problem





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC