CSS Positioning Help

nero120

nero120

nero120

Soldato
Joined
12 Jan 2004
Posts
6,824
Location
Londinium
Hi guys,

I would like to make a coloured div area extend to the bottom of the screen. Note that this div does not start at the top of the page. What is the best approach to do this?
 
Okay, now ive run into another problem. Setting the div to absolute to allow for the height 100% hack to work has meant that the div no longer fills out across the whole page (width ways). I can correct this in firefox by setting the div'd "right" property to 30px (which leaves a coloured column on the right side), but in IE it does not fill across the page as in firefox. I have to set the width property to make it fill across in IE which I dont want to do, as it displays differently in firefox and screws up the page. so, is there any way to get the div to fill across to 30px of the right edge of the screen as it does in firefox?

God, why is this so difficult! Im spending more time on the fricking css tan on the c#!! :eek:
 
Okay, here it is in Firefox looking correct with columns filling to the bottom of the screen and the white "page" bit going across the screen to 30px of the edge, showing a nice blue column on the right:



But in IE the white "page" bit only goes as far as the content in the green "help" bar underneath the grey title bar:



Here is my css file:

Code: 
body 
{
  background:  #CBE1DF;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  padding-right: 30px;
  height: 100%;
}

#page 
{
  border: 0px solid #ffffff;
  border-width:0px 5px;
  background:  #FFFFFF url(../images/leftnavstrip.gif) repeat-y 0 0;
  top: 0;
  left: 0;
  right: 30px;
  height: 100%;
  min-height: 100%;
  position: absolute;
}

#banner
{
  background: url("../Images/Banner.gif") 0 0 no-repeat;
  position: relative;
  border: solid 1px #FFFFFF;
  border-width: 1px 0 0 0;
  top: 0;
  left: 0;
  width: 562px;
  height: 62px;
}

#app-title
{
  background: #666666;
  font-size: 22px;
  color: #FFFFFF;
  padding: 5px 0 5px 140px;
}

#help-bar
{
  background: #BABA9E;
  color: #000000;
	font-size: 12px;
  margin-left: 125px;
  padding: 3px 0 3px 15px;
}

#help-bar a
{
  color: #000000;
	font-weight: bold;
}

#help-bar .title
{
	color: #990033;
	font-weight: bold;
}

#useful-links
{
  background: #FFFFFF;
  width: 125px;
  position: relative;
  float: left;
  text-align: right;
  font-size: 11px;
}

#useful-links a
{
  color: #000000;
  text-decoration: none;
}

#useful-links a:hover
{
  text-decoration: underline;
}

#useful-links .content
{
  padding: 10px 10px 10px 0;
}

#useful-links .content .title
{
  color: #000000;
  font-weight: bold;
  border: solid 1px #000000;
  padding-bottom: 5px;
  border-width: 0 0 1px 0;
}

#useful-links .content .option
{
  padding-top: 15px;
}

#main-content
{
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  margin: 20px 20px 0 140px;
}

#footer-list
{
  font-size: 9px;
  color: #7a7a7a;
  padding: 30px 0 20px 0;
}

#footer-list a
{
  color: #7a7a7a;
  text-decoration: none;
}

#footer-list a:hover
{
  text-decoration: underline;
}

The important bit is the #page style, as this is the white part of the page (the actualy body background colour is turquoise). The "right: 30px;" statement pulls it across the page properly in firefox, but does not do the same in IE, hence my problem.

Any help would be appreciated.

Oh by the way, I didnt choose and have no control over the colour scheme so no comments! Im just the punk that gets to clean up the awful css that is being used! ;)
 
try giving the help-bar a fixed width to make it stretch out the page as it looks like that is as far as it has stretched in IE, see if that works? or alternatively you could create a custom hack here says how to ensure they look the same in both but this may not be the ideal long term solution.

nin9a
 
Hmm your code looks rather confusing, but then again i have never really used the positioning elements of CSS.

So let me get this right, it views how you want in firefox but not in IE.

Have you tried using a float?

Ill just have a quick read on W3C
 
nin9abadga said:
try giving the help-bar a fixed width to make it stretch out the page as it looks like that is as far as it has stretched in IE, see if that works?
Click to expand...

See thats what i thought, but he may want the blue bar to be seen on the page even if the browser is resized.

EDIT: try setting a width to the blue bar?
 
Thanks guys, I think ive sorted it thanks to a css hack.

Basically, I just added this to the stylesheet:

Code: 
#page {width:100%}
html>body #page {width:auto;}

Seems to have sorted it! Bloody browsers!
 
You must log in or register to reply here.
Back
Top Bottom