[IrishCereal]

I'm working on this layout, and I want it to look (more or less) like this:


I've been working on the code, and have got most of it done. But I run into a little problem. The outer glow divs are trying to follow the content modules. Instead of morphing to the outside of the sidebar and main content bar, they close around the modules. Here is the code I've got.

The CSS:

#main {
	float: right;
	width: 500px;
	background-image: url(../images/innershadows/mbblackmiddle.png);
	background-repeat: repeat-y;
}

.mainbgtop {
	background-image: url(../images/innershadows/mbblacktop.png);
	background-repeat: no-repeat;
	background-position: top;
}

.mainbgbottom{
	background-image: url(../images/innershadows/mbblackbottom.png);
	background-repeat: no-repeat;
	background-position: bottom;
}
.mainmodule {
	width: 450px;
	background-color: #FFFFFF;
	background-image: url(../images/innershadows/mbmiddle.png);
	background-repeat: repeat-y;
	margin-top: auto;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: auto;
}

.mainbartop {
	background-image: url(../images/innershadows/mbtop.png);
	background-repeat: no-repeat;
	background-position: top;
}

.mainbarbottom {
	background-image: url(../images/innershadows/mbbottom.png);
	background-repeat: no-repeat;
	background-position: bottom;
}

.maincontent {
	padding: 10px;
}

#sidebar {
	float: left;
	width: 299px;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #FFFFFF;
	background-image: url(../images/innershadows/sbblackmiddle.png);
	background-repeat: repeat-y;
}

.sbbgtop {
	background-image: url(../images/innershadows/sbblacktop.png);
	background-repeat: no-repeat;
	background-position: top;
}

.sbbottom {
	background-image: url(../images/innershadows/sbblackbottom.png);
	background-repeat: no-repeat;
	background-position: bottom;
}
.sidebarmodule {
	width: 250px;
	background-color: #FFFFFF;
	margin-top: 20px;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
	border: 1px solid #FFFFFF;
	background-image: url(../images/innershadows/sbmiddle.png);
	background-repeat: repeat-y;
}

.sidebarcontent {
	padding: 10px;
}

.sidebartop {
	background-image: url(../images/innershadows/sbtop.png);
	background-repeat: no-repeat;
	background-position: top;
}

.sidebarbottom {
	background-image: url(../images/innershadows/sbbottom.png);
	background-repeat: no-repeat;
	background-position: bottom;
}

And the HTML:

<div id="sidebar"><div class="sbbgtop"><div class="sbbottom">
	<div class="sidebarmodule"><div class="sidebarbottom"><div class="sidebartop">
	  <div class="sidebarcontent">
		<p>Blah</p>
		<p>Blah</p>
		<p>Blah</p>
	  </div>
	</div></div></div>
  </div></div></div>
  <div id="main"><div class="mainbgtop"><div class="mainbgbottom">
  <div class="mainmodule"><div class="mainbartop"><div class="mainbarbottom">
	  <div class="maincontent">
		<p>Blah</p>
		<p>Blah</p>
		<p>Blah</p>
	  </div>
	</div></div></div>
  </div></div></div>

This is what it looks like:


Note from the design and final product I did some changing of they layout. For example I decided to only go with two columns.

Anyway, what am I doing wrong?? Thanks for the help in advance!

[Arenlor]

Can you drop a link to it please?

[IrishCereal]

-snip-

Not uploaded yet. I'll do it when I get home from school.

This post has been edited by IrishCereal: 28 January 2009 - 07:26 AM

[IrishCereal]

Ok here's the link.
http://www.theinterwebz.co.cc/main.php
Thanks!

[BetaWar]

In your CSS you have:

.sidebarmodule {
	width: 250px;
	background-color: #FFFFFF;
	margin-top: 20px;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
	border: 1px solid #FFFFFF;
	background-image: url(../images/innershadows/sbmiddle.png);
	background-repeat: repeat-y;
}

Try changing it to this:

.sidebarmodule {
	width: 250px;
	background-color: #FFFFFF;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
	border: 1px solid #FFFFFF;
	background-image: url(../images/innershadows/sbmiddle.png);
	background-repeat: repeat-y;
}

Change the margin-top to 0px.

Hope that works

[IrishCereal]

It worked but I need the sidebar module to be down from the sidebar itself. Like in the photoshopped prototype that I posted at the top.

[fuzzylunkinz]

Try changing padding. I don't understand exactly what you want, but you can easily experiment.

If you break something, just undo it .

[IrishCereal]

fuzzylunkinz, on 29 Jan, 2009 - 03:45 PM, said:

Try changing padding. I don't understand exactly what you want, but you can easily experiment.

If you break something, just undo it .

You're my hero. I didn't even think of using padding. It worked. Thanks!