Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Registered User
    Join Date
    Sep 2010
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Wrapper div's left side disappears as length grows

    I've done a layout in which I'm going to have a right hand column full of stuff. Here is the basic layout -- 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 -- 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:

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

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Registered User
    Join Date
    Sep 2010
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    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:

    Code:
    #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).

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Registered User
    Join Date
    Sep 2010
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    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!)

  • #6
    Registered User
    Join Date
    Sep 2010
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    D'OH, I just figured out the problem....added "overflow:auto" to the "content" div, problem fixed!!!! and it only took 16 hours...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •