3 column layout with multiple divs

[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

[macneato]

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>

[arvindikchari]

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

[macneato]

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.

[arvindikchari]

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]

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}

[macneato]

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]

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>
<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]

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

[danix]

Very kind of you macneato.

[macneato]

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