3 column layout with multiple divs

Question

arvindikchari 0 Light Poster

17 Years Ago

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

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 ?
Also, I want that each 'box'(in left and right columns of the site) should be a separate div

Thanks and regards,
Arvind

html-css:bootstrap web-design

4 Contributors
10 Replies
733 Views
5 Days Discussion Span
Latest Post 17 Years Ago Latest Post by macneato

Dani AI

Generated 10 Months Ago

A compact, maintainable way to get a Cubecart-style 3-column layout with independent "boxes" in each sidebar is to use semantic HTML plus CSS Grid (or Flexbox). already demonstrated the nested-box idea and showed the value of a centered wrapper — this sample keeps those ideas but uses a modern layout that is easier to maintain, responsive, and keeps each box as a separate element with a distinct title and content.

HTML (each sidebar box uses one element for the title and one for the content):

<div class="layout">
  <header class="layout__header">Store header</header>

  <aside class="layout__left" aria-label="Left sidebar">
    <div class="box">
      <h3 class="box__title">Title 1</h3>
      <div class="box__body">Content for box 1</div>
    </div>
    <div class="box">
      <h3 class="box__title">Title 2</h3>
      <div class="box__body">Content for box 2</div>
    </div>
  </aside>

  <main class="layout__main">Main product/listing column</main>

  <aside class="layout__right" aria-label="Right sidebar">
    <div class="box">
      <h3 class="box__title">Right box</h3>
      <div class="box__body">Right content</div>
    </div>
  </aside>

  <footer class="layout__footer">Footer</footer>
</div>

CSS (Grid + responsive collapse):

.layout { 
  display: grid;
  grid-template-columns: 220px 1fr 220px;
  gap: 18px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
  box-sizing: border-box;
}
.layout__header, .layout__footer { grid-column: 1 / -1; }
.box { background:#fff; border:1px solid #ddd; padding:12px; margin-bottom:12px; }
@media (max-width:820px) {
  .layout { grid-template-columns: 1fr; }
}

Troubleshooting / practical notes:

Add a global *, *::before, *::after { box-sizing: border-box; } to avoid width surprises.
Use semantic tags (aside, main, header) and proper heading levels inside .box__title for accessibility.
Avoid duplicate class names (as warned); prefer component-style names like box__title.
For older browsers that need support, provide a simple float-based fallback or build with a preprocessor/autoprefixer.
Keep CSS in an external file and tune spacing/col widths to match the Cubecart look.

This pattern keeps each sidebar "box" as a separate div with its own title and content, is simple to style, and adapts cleanly to mobile.

All 10 Replies

macneato 29 Posting Pro in Training

17 Years Ago

Hi,

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

<div id="container" style="width:100%">
  <div class="header" style="width:100%; height:100px; background:purple">
    <p>Header </p>
  </div>
  <div class="leftCol" style="width:20%; background:red; float:left">
    <p> Left Col </p>
  </div>
  <div class="centerCol" style="width:60%; background:blue; float:left">
    <p> Center Col </p>
  </div>
  <div class="rightCol" style="width:20%; background:yellow; float:right">
    <p> Right Col </p>
  </div>
  <div class="footer" style="width:100%; clear:both; background:pink; height:29px">
    <p> Footer </p>
  </div>
</div>

macneato 29 Posting Pro in Training

17 Years Ago

Easy... Nest your divs. Ill do one, then you should be able to take it from there.

<div id="container" style="width:100%">
<div class="header" style="width:100%; height:100px; background:purple;overflow:hidden">
  <p>Header </p>
</div>
<div class="leftCol" style="width:20%; background:#fff; float:left; overflow:hidden">
  <!-- nested div -->
  <div class="content_box" style="width:98%; margin: 0 auto; padding:2%;overflow:hidden">
    <!-- header -->
    <div class="header" style="width:100%; background:orange;overflow:hidden">
      <h2> heading 1 </h2>
    </div>
    <!-- content -->
    <div class="content" style="width:100%; background:red;overflow:hidden">
      <p> content content content content content content </p>
    </div>
  </div>
  <!-- nested div -->
  <div class="content_box" style="width:98%; padding:2%;overflow:hidden">
    <!-- header -->
    <div class="header" style="width:100%; background:orange;overflow:hidden">
      <h2> heading 2 </h2>
    </div>
    <!-- content -->
    <div class="content" style="width:100%; background:red;overflow:hidden">
      <p> content content content content content content </p>
    </div>
  </div>
</div>
<div class="centerCol" style="width:60%; background:blue; float:left;overflow:hidden">
  <p> Center Col </p>
</div>
<div class="rightCol" style="width:20%; background:yellow; float:right;overflow:hidden">
  <p> Right Col </p>
</div>
<div class="footer" style="width:100%; clear:both; background:pink; height:29px;overflow:hidden; float:left">
  <p> Footer </p>
</div>
</div>

Just style it properly according to what you want.

macneato 29 Posting Pro in Training

17 Years Ago

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.

<div id="container">
<div class="header">
  <p>Header </p>
</div>
<div class="leftCol">
  <!-- nested div -->
  <div class="content_box">
    <!-- header -->
    <div class="header">
      <h2> heading 1 </h2>
    </div>
    <!-- content -->
    <div class="content" style="">
      <p> content content content content content content </p>
    </div>
  </div>
  <!-- nested div -->
  <div class="content_box">
    <!-- header -->
    <div class="header">
      <h2> heading 2 </h2>
    </div>
    <!-- content -->
    <div class="content">
      <p> content content content content content content </p>
    </div>
  </div>
</div>
<div class="centerCol">
  <p> Center Col </p>
</div>
<div class="rightCol">
  <p> Right Col </p>
</div>
<div class="footer">
  <p> Footer </p>
</div>
</div>

#container {width:100%;}
.header {width:100%; height:100px; background:purple;overflow:hidden;}
.leftCol {width:20%; background:#fff; float:left; overflow:hidden;}
.content_box {width:98%; margin: 0 auto; padding:2%;overflow:hidden;}
.header {width:100%; background:orange;overflow:hidden;}
.content_box {width:100%; background:red;overflow:hidden;}
.centerCol {width:60%; background:blue; float:left;overflow:hidden}
.rightCol {width:20%; background:yellow; float:right;overflow:hidden}
.footer {width:100%; clear:both; background:pink; height:29px;overflow:hidden; float:left}

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

arvindikchari 0 Light Poster · Answer 1 · 2009-02-12T17:04:24+00:00

Hello,

I want there to be multiple 'boxes' within the left and the right columns, as is shown at . 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

arvindikchari 0 Light Poster · Answer 2 · 2009-02-12T17:32:45+00:00

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

macneato 29 Posting Pro in Training · Answer 3 · 2009-02-12T18:45:09+00:00

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

cmills83 8 Posting Whiz in Training · Answer 4 · 2009-02-13T00:47:20+00:00

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
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 ?
Also, I want that each 'box'(in left and right columns of the site) should be a separate div
Thanks and regards,
Arvind

<html>
<head>
<style type="text/css">
body {
margin:0;
padding:0;
background:#cecece;
}
#wrap {
width:960px;
margin:0 auto;
background:#fff;
}
#header {
width:960px;
height:200px;
}
#left {
width:200px;
float:left;
}
#middle {
width:500px;
float:left;
}
#right {
width:260px;
float:left;
}
#footer {
width:960px;
height:30px;
}
.clear {
clear:both;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">header logo and content</div>
<div id="left">left content and divs</div>
<div id="middle">middle content and divs</div>
<div id="right">right content and divs</div>
<div class="clear"></div>
<div id="footer">copyright</div>
</div>
</body>
</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

macneato 29 Posting Pro in Training · Answer 5 · 2009-02-16T15:42:42+00:00

I believe this thread has been solved, please mark it accordingly

danix 0 Newbie Poster · Answer 6 · 2009-02-17T00:53:19+00:00

danix 0 Newbie Poster

17 Years Ago

Very kind of you macneato.

macneato 29 Posting Pro in Training · Answer 7 · 2009-02-17T15:48:14+00:00

macneato 29 Posting Pro in Training

17 Years Ago

Not a problem... We all got to start somewhere :)

3 column layout with multiple divs

Dani AI

Recommended Answers Collapse Answers

All 10 Replies

Recommended Answers