CSS Containers and Positioning

mtdon1

11-01-2010, 02:38 AM

Hi all,

I am very new to the web coding scene and am having a bit of trouble with my containers and positioning to have the site function as I would like.

I have the core background images spanning the length of the browser as I would like. However I would like my content to be centered on the page with the effect of when the browser window becomes too small the content is "fixed" and the shrinking window stops "swallowing" the content.

In essence I want my site to function like this: http://store.steampowered.com/

Notice that when you shrink the browser beyond the centered content, the content becomes "fixed" at the left hand side. I imagine I need another container somewhere, but after doing research, I am a bit lost.

Here is my code thus far:

body {
margin: 0;
background-color:#FFF
}
#container {
width: 100%;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
height: auto;
}
.top_nav {
background-image: url(../images/top_nav.jpg);
background-repeat: repeat-x;
margin: 0px;
padding: 0px;
height: 43px;
width: 100%;
clear: left;
}
.body_bg {
background-image: url(../images/body_bg.jpg);
background-repeat: repeat-x;
margin: 0px;
padding: 0px;
float: left;
height: auto;
width: 100%;
}.title_bg {
height: 179px;
background-color: #FFF;
background-image: url(../images/title_bg.jpg);
background-repeat: no-repeat;
background-position: center;
}
.nav_bg {
background-image: url(../images/nav_bg.jpg);
background-repeat: repeat-x;
height: 41px;
width: 100%;
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/top_nav.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div class="top_nav"></div>
<div class="title_bg"></div>
<div class="nav_bg"></div>
<div class="body_bg"></div>
</div>
</body>
</html>

Thank you for your time!

-Mike

DrDOS

11-01-2010, 03:01 AM

For starters try this:body {
margin: auto;
width: 960px;
background-color: #FFF
}That will set a fixed width for the body and the containing divs, and center the page.

mtdon1

11-01-2010, 03:28 AM

DrDOS

11-01-2010, 03:56 AM

DrDOS -

I took your suggestion and the concept works. However, if I set the body width to a fixed px, my background images stop spanning the entire browser window.

Therefore I set the body width to 100% and left the margin at auto. Although it gave me another idea which was to set a width of the title image.

I did try to set the title image to have a specific width (i.e. 1095px) but then the "centered" alignment stopped functioning...OK, in that case set the width of the container div to 960px and margin:auto, set the body to 100% again with margin: 0. I just gave 960px as a compromise for those people who are still using 1024x768 displays.

mtdon1

11-01-2010, 04:13 AM

This still limits the container - therefore the top_nav and nav_bg images do not span the length of the browser because the #container has been limited to a certain amount of pixels.

Do I need another div inside of my title_bg div? Then maybe I can constrain the pixels there without limiting the other divs to span the entire browser.

DrDOS

11-01-2010, 04:35 AM

The stuff you want to span the full width needs to be outside the fixed container. The can have their own divs if needed.

mtdon1

11-01-2010, 02:31 PM

So essentially it would be a "master" container with the spanning background images and then a "sub-master" container that will have a fixed width?

teedoff

11-01-2010, 04:02 PM

Anything you want to limit the width to, put into the container div. Any div outside the container you can give width 100% to. That will stretch them to 100% of the body or screen width.

DrDOS

11-01-2010, 05:46 PM

Actually there is a way to 'break out' a div that's in a container. You set

width:100%;left:0;position:absolute

on the div you want to break out. But is comes at the expense of using position:absolute, which may cause more problems than it cures.

mtdon1

11-02-2010, 02:38 AM

Thanks guys, this makes it a bit easier to grasp. Unfortunately I am still a bit confused.

I still don't necessarily understand how I am going to get the background images I want stretched "inline" or behind this new fixed container.

For instance if I create a new container above #container (which is now fixed width) should I absolute position #container on top of the stretched container? How do I build a stretched container outside of #container but also inline with the elements I want stretched?

mtdon1

11-02-2010, 03:03 AM

From Steampowered.com CSS:

div#global_header {
background-image: url( http://cdn.store.steampowered.com/public/images/v5/globalheader_bg.jpg);
background-color: #000000;
border-bottom: 1px solid #4D4B48;
background-position: center top;
}

/**/
div#global_header .content {
background-image: url( http://cdn.store.steampowered.com/public/images/v5/globalheader_bg.jpg);
background-position: center top;
position: relative;
width: 940px;
height: 104px;
margin: 0px auto;

z-index: 402;

Looks like I do have to do something with a relative position? Relatively position it on top of the container...

mtdon1

11-02-2010, 03:44 AM

I figured it out.

Basically like I originally figured. I need a master container and then specify another container inside the master with a fixed width.

Thanks for the fixed width idea DOS, definitely helped me along. Here is the code for just the header for others viewing and looking for the answer.

CSS:

body {
margin: 0;
background-color:#FFF
}

#top_nav {
background-image: url(../images/top_nav.jpg);
background-repeat: repeat-x;
height: 34px;
width: 100%;
}

#top_nav_content {
width: 1095px;
margin: 0px auto;
height: 100%;
min-height: 100%
}

HTML:

<body>
<div id="top_nav">
<div id="top_nav_content">Header goes here</div>
</div>
</body>
</html>

Resolved.

teedoff

11-02-2010, 03:52 AM

The body tag can act as a "master" container. But glad you got it figured out.