Side bars

Aagame · 05-09-2009, 04:41 PM

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!

emopoops · 05-24-2009, 10:43 AM

maybe a drawing of what the heck u are talkiing about would make it MUCH easier.

Susan-Reed · 05-29-2009, 06:00 AM

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 · 05-29-2009, 01:08 PM

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 Code:

<body>
     <div id="wrap">
          <div id="body"></div>
     </div>
</body>

05-09-2009, 04:41 PM	#1
Aagame New Member Join Date: May 2009 Posts: 1	Side bars 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!

05-29-2009, 06:00 AM	#3
Susan-Reed New Member Join Date: May 2009 Posts: 6	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. __________________ - Susan

05-29-2009, 01:08 PM	#4
AusQB Silver Member Join Date: Jul 2008 Location: Perth, Australia Posts: 167	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 Code: <body> <div id="wrap"> <div id="body"></div> </div> </body> __________________ RGG Web Designs Last edited by AusQB; 05-29-2009 at 01:14 PM.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

05-24-2009, 10:43 AM	#2
emopoops Banned Join Date: May 2009 Posts: 66	maybe a drawing of what the heck u are talkiing about would make it MUCH easier.