One div

[mkiler]

Hi
How to put left column, center and right into one div? I want change backgrond color for this, and setup up another color for site background.

Michal

[hieloiceberg]

this are the sections you need to edit:

search for:

* {
   padding:0;
   margin:0;
}

body {
   background-color: white;
   font-size: 11px;
   font-family: Verdana, Arial, Helvetica, Sans-Serif;
   color: #5d717e;
   text-align:center;
}

and this section will be you left column, center column and right column:

/* global layout */
#page {
   width: 980px;
   margin: 0 auto 2px auto;
   text-align:left;
}

[mkiler]

OK I found it. Thanks

But now I try to add custom div to this - I need to have:
#one_column, #left_column, #center_column, #right_column, #two_column

I change something:

/* global layout */
#page {
   width: 1100px;
   margin: 5px auto 20px auto;
   text-align:left;
   background-color: white;

}
h1#logo {
   float: left;
   width: 29%;
   margin-top:0.5em;
}
#header {
   float: left;
   height:100px;
   width: 71%;
   text-align: right;

}
#one_column, #left_column, #center_column, #right_column, #two_column {
   float:left;
}

#one_column {
   clear:left;
   width:50px;
   padding-right: 15px;

#left_column {
   clear:left;
   width:190px;
   padding-right: 15px;
}
#center_column {
   width: 556px;
   margin: 0 0 30px 0;
}
#right_column {
   width: 190px;
   padding-left: 15px;
}
#two_column {
   background-color: red;
   width: 100px;
   padding-left: 15px;
}

and

/* Default block style */
div.block {
   margin-bottom: 1em;
   width: 191px;
}
#one_column div.block, #left_column div.block, #right_column div.block #two_column div.block {
   padding-bottom: 6px;
   background: transparent url('../img/block_footer.gif') no-repeat bottom left;

div.block h4 a { color: #ffffff; }
div.block ul { list-style: none; }
div.block ul.tree li { padding-left:1.2em; }
div.block a:hover { text-decoration: underline; }
#one_column div.block .block_content a.button_large
#left_column div.block .block_content a.button_large, #right_column div.block .block_content a.button_large { margin:0 0 0 -3px; }
#two_column div.block .block_content a.button_large
div.block .block_content {
   border-left: 1px #d0d3d8;
   border-right: 1px #d0d3d8;
   padding:0.5em 0.7em 0pt;
   background: #ffffff url('../img/block_bg.jpg') repeat-x bottom left;
   min-height:20px;
}

After this change I don't see anything else in my site. Maybe I need change and add somewhere else but where?

[hieloiceberg]

mmm.. Your main page content is only 1100px and you have exided that maybe that’s why all goes away and disapear can you make a picture (with diferent colors in the colums that you want) so more or less we know what you want :-)

[hieloiceberg]

One more question are you going to use the one column and two column to add data in it or is just to make some decoration?

[mkiler]

I try to take effect in picture

[hieloiceberg]

ok it I see the one and two columns are decoration only so this can be just your main background what you can do is just expand your footer and header the way you have it n the picture

[mkiler]

Site background is black, foother, header, column one and two have background from picture. Of course I change width so that theme will be little different. I think good look will be when column one,left, center, right, two = 90% or 95% site width. For me important is - every column must have the same height as center when I display 10 or 50 products in one page.