CSS Forum

**lynxus** · 09-23-2009, 08:45 AM

Hi Guys.

How can i do this:

I have a div that starts 300px in from the left.

I then want the div to be 100% wide ( to the right ) then -2px in from the right.

Does this make sense?

How can i achieve this.
If i make the div 100% it makes it 100% of the page size, so it goes off the page to the right by 300px.

Any thoughts?

Thanks
G

**lynxus** · 09:10 AM

OK ive figured the above out, However.
if i set bottom:2px ( so the div goes down to 2px from the bottom ) it works in FF but doesnt in IE.

IE doesnt seem to understand the bottom att.

TY yall

**racer x** · 09-23-2009, 10:03 AM

Quote:

bottom:2px

Is this a margin or padding? Are you using absolute positioning?

We need to see some CSS and see if you are enclosing this div in a parent div, etc.

**lynxus** · 09-23-2009, 11:00 AM

THis is what its configured as:

Its not inside any other divs.
<div id="sessions" style="position:absolute; top:85px; left:300px; right:2px; bottom:3px; border:1px solid #666;"></div>

If i use height of 100% it overflows the page by 85px ( from the top attribute )

What im trying to do is have a div thats 300px in 85px down and then the left and bottom of the div need to be 2px from the left and 2px from the bottom.

if that makes sense?

**chrishirst** · 09-23-2009, 02:10 PM

Use a floated "filler" element and padding.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Offset</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html, body {
	height:100%;
}
body {
	padding:0 2px 2px 0;
}
#left_fill {
	width:300px;
	height:100%;
	float:left;
}
#content {
	height:100%;
	position:relative;
	margin: 85px 0 0 0;
}
</style>
</head>

<body>
<div id="left_fill"></div>
<div id="content">Content goes here </div>
</body>
</html>

**LadynRed** · 09-23-2009, 03:54 PM

Quote:

IE doesnt seem to understand the bottom att.

It most certainly does. However, IE6 & 7 have issues with positioning, so it depends on what the rest of your code is.