help align side bar in IE 6

Discussion in 'HTML & Website Design' started by invisible2007, Apr 6, 2009.

  1. #1
    I have a basic layout at the moment.
    http://dampflame.com/Sd3/


    The problem is that little grey side bar on the left hand side. In IE 6 it freaks out, and only shows a height for the amount of text inside.

    I need it to stretch 100% at all times, it needs to be flush to the bottom, top, and side at all times.

    Please Help!
     
    invisible2007, Apr 6, 2009 IP
  2. ExtremeData

    ExtremeData Well-Known Member

    Messages:
    450
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    125
    #2
    Replace your css with this one :

    @charset "utf-8";
    /* CSS Document */
    
    body {
    	margin: 0;
    	font-family: "Helvetica Neue", Helvetica, Verdana, sans-seif;
    	font-size: 12px;
    	background-color: #eee ;
    	height:100%;
    } 
    
    /* Header Objects */
    
    .header {
    	background-color: #333;
    	height: 45px;
    	width: 100%;
    	padding-top: 0px;
    	padding-right: 0px;
    	padding-left: 0px;
    }
    
    .toolbar_container {
      height: 20px;
      position:relative;
      top: 12px;
      z-index:89;
    }
    
    .container_body {
    	position: absolute;
    	top: 47px;
    	left: 3px;
    	right: 0px;
    	bottom: 0px;
    	overflow: auto;
    	padding-left: 220px;
    	z-index:2;
    	padding-right: 20px;
    }
    
    .side_bar {
    	position: absolute;
    	top: 46px;
    	bottom: 0;
    	left: 0;
    	border-right: 1px solid #bcc2c7;
    	width: 209px;
    	background: #dfe1e3;
    	z-index:3;
    	height:100%;
    
    }
    
    Code (markup):
    Your css is pretty bad but I don't have too much time now to make a clean css for you.I've just modified your css and now works fine.
    I don't know why you use position absolute for all div's and why you use top, bottom etc when you have margin's and padding.
    Also to let you know when you want to set height 100% to a div the parrent div must have assigned a height value.
     
    ExtremeData, Apr 7, 2009 IP
  3. invisible2007

    invisible2007 Peon

    Messages:
    93
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Excellent, I am trying to make it so that it dosent create a scroll bar on the page. It should all be flush with no scrolling.
     
    invisible2007, Apr 7, 2009 IP
  4. ExtremeData

    ExtremeData Well-Known Member

    Messages:
    450
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    125
    #4
    This should do the trick body {overflow: hidden};
     
    ExtremeData, Apr 7, 2009 IP
  5. m.stevens

    m.stevens Peon

    Messages:
    79
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Hopefully your clients won't see that you are asking such simple questions about CSS.
     
    m.stevens, Apr 7, 2009 IP