Make a DIV stretch to the right side of screen in IE, unknown width

I have a page with two columns (two DIVs), and the left column is floated to achieve the two-column effect (the right column uses margin-left to be placed properly).

The left column has a known width (for this example, we'll say 500px). I want to get the right column to stretch indefinately to the right hand side of the screen (for the purpose of a background effect), but no further (assume that content will not spill over off the screen).

I have been able to achieve this result in Firefox, by setting the right DIV's width to 100%. Unfortunately, in IE, this causes the right DIV to have a width of 100% of the screen width, and because of the margin / float technique, the DIV stretches off the right side of the screen and a float drop occurs (because the right DIV is thus too wide).

What CSS can I use, or what technique can I use to stretch the DIV to the right side of the screen? I am not interested in using Javascript to determine screen width, I am looking for an XHTML 1.0 Transitional / CSS based solution.

Perhaps, instead of using a margin to place the right DIV correctly, I could use padding instead such that the DIV would be 100% screen width, but the content of the DIV would only display in the appropriate area, just as if I were using a margin instead?
LVL 6
TheAnarchistAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

VirusMinusCommented:
if the right column is just for a background effect you could just apply a background to the body.

if you must have two div's then you could do it like this;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
.main
{
float:right;
width:100%;
background-color:blue;
}
.left
{
position:relative;
float:left;
width:200px;
background-color:pink;
}
-->
</style>
</head>
<body>

<div class="main">

<div class="left">
    <span>span x</span>
    <span>span y</span>
    <div>div x</div>
    <div>div y</div>
</div>

<span>
    <div>div x</div>
    <div>div y</div>
    <span>span x</span>
    <span>span y</span>
</span>

</div>
</body>
</html>
TheAnarchistAuthor Commented:
Hmm...I see what you're doing here...

I'll give it a try when I get to work tomorrow. If all goes well, the points are yours.
DaydreamsCommented:
Just a note: you won't get the page to validate by putting block level elements (like "div") within inline ones (like "span"):

<span>
    <div>div x</div>
    <div>div y</div>
    <span>span x</span>
    <span>span y</span>
</span>

Take a look: http://jigsaw.w3.org/css-validator/
CompTIA Network+

Prepare for the CompTIA Network+ exam by learning how to troubleshoot, configure, and manage both wired and wireless networks.

DaydreamsCommented:
Just change the outer <span> tags to <div>, and apparently no need for the position-relative.
TheAnarchistAuthor Commented:
Unfortunately, the suggestion put forward by VirusMinus does not help solve my problem. I aplogise, I should have gone into greater detail with my question.

The content area of the page consists of a container-style DIV (width: 100%) and two smaller DIVs inside (left DIV floated, width: 500px ... right DIV, width: 100%), in a similar fashion as to the below (simplified) code:

<div id="content-container" style="width: 100%;">
    <div id="content-left" style="float: left; width: 500px;">
        <p>This is content.</p>
    </div>
    <div id="content-right" style="width: 100%;">
        <p style="margin-left: 500px;">This is content.</p>
    </div>
</div>


A screenshot of the ideal situation (which uses tables instead of DIVs and CSS positioning) can be found at this link: http://www.box.net/public/yydimo4a30

The left column has a specific width, while the right column does not. The right column contains some content, but the intention is to have the background of the right column bleed off indefinately, to the right hand side of the user's screen (whatever distance that may be). Setting the right hand DIV's width to 100% does not work for both Firefox and IE, as IE interprets this as 100% of the screen's width, and not 100% of the available width (Firefox seemed to change its mind this morning too, following IE's interpretation).

I altered the code I had yesterday, so that the right hand column now extends the full width of the screen in Firefox, underneath the left column, with the content starting in the appropriate position via margins and padding.

The problem I have with this approach, is that IE will not allow the right hand DIV to flow underneath the left DIV, even when correct z-index values are set.
VirusMinusCommented:
TheAnarchist,

correct me if I'm wrong but based on your image it appears the right column with the quick links also has a fixed width.

 i.e the text does not stretch all the way to the right edge of the browser. only the background behind the quick links and the gray color goes all the way to the right edge.

if this is the case, treat your layout as left aligned div, which has two main columns. the left one for the website, and the right one for the quick ilnks. apply a background to the body using css.

that'll get you the layout like you have in the image
TheAnarchistAuthor Commented:
The right hand column has a non-fixed width, however the text does have a fixed width.

I also cannot apply that background to the body, as these columns are just one part of the page (there are areas above and below these columns), and the background is set to repeat-x and is specifically placed as it is.

What I need to work out, is how to keep everything inside that DIV, and to stretch the DIV. I'm thinking that perhaps I could set the right DIV background to be the background of the container DIV, and then force backgrounds to override this where necessary...so I'll give that a go.
TheAnarchistAuthor Commented:
No luck with that idea. Still looking for a way to extend the right DIV indefinately to the edge of the screen...
VirusMinusCommented:
Hmm.. what DOCTYPE are you using?

this seems to work ->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<style>

#container {
  width: 100%;
  background-color: lightblue;
  text-align: center;
}

#boxleft {
  float: left;
  width: 500px;
  background-color: lightblue;
}

#boxright {
  margin-left: 500px;
  background-color: orange;
}

#container div.paragraph {
  padding: 1em;
}

</style>
</head>
<body>

<div id=container>
  <div id="boxleft">
    <div class="paragraph">Div Left Text</div>
  </div>

  <div id="boxright">
    <div class="paragraph">Div Right Text</div>
  </div>
</div>

</body>
</html>

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
VirusMinusCommented:
Tested on IE6, IE7, FF 1.5.x, FF Beta 2
TheAnarchistAuthor Commented:
I'm using this doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

I tinkered with the CSS in your latest contribution, to suit the specifics of my problem, and it seems that text-align: center; does the job perfectly for both browsers.

Thank you for your help.

Now, just a damn box model thing to find in IE... :S
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.