Side bars

A

Aagame

New Member
Hey guys, first post here :)

I'm having a little trouble figuring this out. I'm making a website designed out of div boxes. There is one central column (900px in width) internally split with other div classes. Anyway, I need to place a 10px box that automatically adjusts to the height of the central column (and is 10px in width) on BOTH the left and right sides of the central column. Here I'll place an image (it's like that shadow that is seen on many websites to give it some depth).

I'm having a hard time figuring out how to place those boxes. I understand how to do this with tables, but surely it's possible with CSS too? If anyone can help me out I'd be very happy.

Here is a copy of some of my code:
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
/*background-color:#F3F3F3;*/
background-image: url(images/background_image.jpg);
background-repeat: repeat-x;
}

#maincol {
margin: 0px auto;
padding: 0px 0px 0px 0px;
width: 900px;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
background-color:#ffffff;
}

There are other ID boxes that are inside of the maincol ID. I'll post them if necessary. Thanks so much!
 
S

Susan-Reed

New Member
I don't understand your problem either, but it's likely that you're trying to do something unnecessarily complicated. If you provide more info, we can dig into your actual problem though.
 
AusQB

AusQB

New Member
The simplest method is to just make a 920px wide image which you can set as the background for your main div.

Within that div you can create 900px wide divs which go on top of it.


So you would have the following code:

Code: 
div#wrap {
     background: url(images/bg_main.gif) repeat-y center top;
     height: auto;
     margin: 10px auto;
     width: 920px;
}

div#body {
     height: auto;
     margin: 0 auto;
     width: 900px;
}

HTML: 
<body>
     <div id="wrap">
          <div id="body"></div>
     </div>
</body>
 
Last edited:
You must log in or register to reply here.
Top