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

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>

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

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.

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

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}

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

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

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

Very kind of you macneato.

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

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.