Working with Layout In percentage

Hello everyone!

I am creating a page with a percentage container.
Meaning I have a container(wrapper) that holds all the page content and the width is set to 100 percent.

The problem is I have an internal div that has a fixed width. Eg: 960pixels.
So when the window is minimized, the internal div leaves the container exposing the background.

I soon realized that using this method requires that I also make the internal div percentage based.

When I make the internal div percentage, I cannot get the div to really sit in the middle as a fixed with would.

If this idea does not work, I’ll move on to doing something else.

Here is the code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Layout</title>

<style type="text/css">

body{
margin: 0;
padding: 0;
background-color: #f88888;
}

#container{
width: 100%;
margin: 0 auto;
Height: 800px;
background-color: #999999;
}

#stage{
width: 60em;
height: 200px;
margin: 0 auto;
background-color: #000;
}

</style>

</head>
<body>
<div id="container">

<div id="stage">
</div>

</div>
</body>
</html>

Thanks everyone!

Not sure how your div isn’t centered.


#container{
width: 100%; <-- not needed, this would be default
margin: 0 auto; <--can't automargin 100% widths
Height: 800px; <-- lower case or bust; also try min-height
background-color: #999999; <-- go ahead and #999
}

#stage{
width: 60em; <-- you can make this 960px, why not?
height: 200px;
margin: 0 auto;
background-color: #000;
}

When minimised, the browser should be forcing a scrollbar to accommodate a 960px box inside a browser that’s smaller than that.

Well I did make it 960pixels but it was spilling out of the container when the browser is re-sized. This is why I tried em. Still does not work.

IC

What about if #container gets a min-width of 960px? By default (if it’s not floated or anything) it should still always go for 100% whenever it can… but won’t go under the 960 (or maybe a hair bigger: 962?).

The MIN width is not supported in versions of IE RIGHT? is there a fix for that?

Great idea.

IC

When you have a 100% fluid container that contains fixed width elements then you should always set a min-width equal to the largest fixed width element in that page . Otherwise the background keeps shrinking while the fixed width element does not and will poke out when scrolled to horizontally.

Only IE6 doesn’t support min and max width. All other browsers are fine (ie7+). There are hacks for ie6 (see css faq) but with its low usage these days its not worth the effort for something as unimportant as this.

Thanks for the valuable input.

IC