...

View Full Version : Wrapper div's left side disappears as length grows



ladydi1984
11-06-2010, 04:22 AM
I've done a layout in which I'm going to have a right hand column full of stuff. Here is the basic layout (http://www.sparklements.com/fixed.html) -- note the gray background in the wrapper div (resulting in what looks like a gray border on the left).

The problem occurs when that right column gets filled vertically beyond the main content, like here (http://www.sparklements.com/problem1.html) -- note that now the gray "border" area on the left disappears for some reason.

Any ideas on why this is happening and if it can be fixed?

Thanks in advance.

Here is the code from the style sheet:


body {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}

#wrapper {
padding:5px;
background-color:#f0f0f0;
margin-left:auto;
margin-right:auto;
}

#header {
height:56px;
background-color:#093;
}

#rightcolumn {
float:right;
width:220px;
overflow:auto;
margin-left:10px;
margin-bottom:10px;
padding-left:5px;
border-left-color:#EAEAEA;
border-left-style:solid;
border-left-width:2px;}

#clear {clear:both;}

.clear {clear:both;}

#content {
background-color:#FFF;
padding:10px 10px 15px 10px;
}

.sidebox {
margin-left:auto;
margin-right:auto;
margin-top:20px;
margin-bottom:20px;
padding:10px;
width:190px;
border-color:#C0C0C0;
border-style:solid;
border-width:1px;
}

.title {
font-size:18px;
margin-top:10px;
padding-top:0;
color:#339900;
font-weight:bold;
}

.logobox {
background-color:#06C;
width:100px;
height:30px;
padding:4px;
float:left;
}

.logobox p {margin:0;}

.footer {
font-size:12px;
margin-top:0;
margin-bottom:0;
margin-left:300px;
}

abduraooft
11-06-2010, 10:08 AM
Wrap all the paragraphs on the left side by a div and set margin-right:200px; to it, like http://bonrouge.com/2c-hf-fluid%28r%29.php

ladydi1984
11-06-2010, 02:14 PM
Wrap all the paragraphs on the left side by a div and set margin-right:200px; to it, like http://bonrouge.com/2c-hf-fluid%28r%29.php

I just tried that, added this to the style sheet and put the lefthand paras into the div:


#leftcontent {
background-color:#FFF;
margin-right:235px;
}

I've updated the link above with the new code, but problem persists -- however, I've discovered it's only persisting in IE7 and IE8 (looks fine in Firefox). :confused:

abduraooft
11-06-2010, 02:51 PM
I've updated the link above with the new code, but problem persists Sorry, I can't see any change in that online version in your first post.

ladydi1984
11-06-2010, 03:34 PM
Sorry, I can't see any change in that online version in your first post.

Right, because changing the code didn't result in any change in the problem...again, IE only (Firefox works fine, as usual *sigh* wish my company would switch to FF!)

ladydi1984
11-06-2010, 04:01 PM
D'OH, I just figured out the problem....added "overflow:auto" to the "content" div, problem fixed!!!! and it only took 16 hours...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum