CSS align center & elastic layouts

HTML & CSS
1

Okay I have been trying to figure out elastic layouts and aligning the main container to the center of the page for the past couple of weeks and need help figuring these out.

So, here is one site (Bambl Law, Visalia, California) that I’ve aligned center, but it really only stays aligned center on my main monitor and I had to align it using

#Wrapper {
width:1024px;
height:1078px;
position:absolute;
margin-top:-.57%;
margin-left:13%;
margin-right:auto;
z-index:-15;
background-color:#FFF;
}

However, I’d like to know how to make it align to the center of monitors automatically.

Also, I’d like to learn how to make the site resize.

So, I’ve been trying to work on these principles with less code and so I put this site up. (Untitled Document)

I’ve looked into using em’s and percentage’s for width’s but just know that I’m missing something.

Can someone please help me understand these better.

thanks, Brian

2

The first law or layout (my newly made up term :slight_smile: ) is not to use positioning for page layout. It’s a nightmare to work with.

Better, first, to set a width on the wrapper and give it the following:

#Wrapper {
width:1024px;
margin: 0 auto;
background-color:#FFF;
}

Don’t set a height on it, but let the content determine its height.

margin: 0 auto centers an element within its container (when there’s a width set) and in the case of the wrapper, that’s in the browser window.

At the moment, those styles will break your site, but still, that’s really where you need to start.

For a more elastic site, you can set the wrapper width in ems or in % … but really, there are some more basic issues to address first.

3

[COLOR=Navy]Okay so I’m starting all over, but I still can’t get the header to align properly.

Bambl Law, Visalia, California

This is my css
[/COLOR]


#language {
    font-family:Georgia, "Times New Roman", Times, serif;
    font-style:normal;
    color:#FFF;
    float:right;
    margin-bottom:.5%;
}


#Wrapper {
width: 64em;
margin: 0 auto;
background-color:#FFF;
}


body {
    margin: 0;
    background-image:url(images/background.png);
    
    background-color:#03F;
    
    
}

#HeaderBackground {
    margin:0 auto;
    background-repeat:repeat-x;
}


a img {
 border: none;
 }


#footer {
    margin:0 auto;
}

[COLOR=Navy]As you can see I set the background header img in em’s, but it still doesn’t resize on my smaller monitor. I’ve also set the wrapper to 64 ems and for some reason the background image header isn’t aligning center in it.

Shouldn’t the header be centering in its container, which I believe is the #Wrapper?[/COLOR]


<body>

<div id="Wrapper">


<div id="HeaderBackground"><img src="http://www.sitepoint.com/forums/images/DARKBLUEHeader background.png" />
</div>



<div id="WelcometoBambl">
 <h2>Welcome to Bambl Law,</h2> 
</div>

<div id="AtBamblLaw">
<p>At Bambl law it is our goal to provide you with personalized, affordable service. <br />
We specialize in Bankruptcy, Immigration, and taxes. If you&#8217;re looking to free <br />
yourself from debt, establish yourself as a U.S. citizen, or get minimize the taxes <br>
that you must pay then we can help you.  Feel free to give us a call <em>(559)-303-3278. </em><br/>
We are located in Visalia, California. </p> 
</div>



<div id="footer">
<img src="http://www.sitepoint.com/forums/images/Footer.png" width="1024" height="54" alt="footer" /></div>

</div>
 <!--This is the end for the Wrapper-->
4

Hi,

The header is bigger than the wrapper which means it doesn’t fit and sticks out. You can’t center an element in something that isn’t as big as itself.

I’m guessing you meant to drag the header image outside of the main wrapper and to do that you would need a negative margin a no with as follows.


#HeaderBackground {
 width:auto;
  margin: 0 -1.24em;
position:relative;/* Ie fix or element won't show outside */
zoom:1.0;/* ie haslayout fix*/
}

Although you set the page in ems the image is still at its default size in pixels so you will need to force it to adjust:


#HeaderBackground img{width:100%; height:auto}

That image is a quite a big file size but I guess it would be awkward to slice smaller although you shuld be able to optimise it a bit more. I assume your logo is also part of that image and therefore I would use an h1 as the elements container instead of a div. Also remember to add an alt" attribute to that image so that screen readers know what it is.

You may also want to supply some text for screen readers and hide it under the image using absolute positioning (similar to this image replacement technique). Or instead use actual browser text for your consulatation text and place it into position.

5

So, first of all I changed the design so that you guys aren’t surprised when you see a different looking site. I started over on everything and this is what I have up so far. Bambl Law, Visalia, California

I am off to a better start now, but I tried using the code

“#HeaderBackground img{width:100%; height:auto}” and it pushed my header to the left of the screen, but when I used “width: 64em;” it aligned just fine so can someone explain to me why these give different results.

thx, Brian

6

You need the width on the container so that it can center itself on the screen. If you tell it to stretch to width: 100%, it obviously can’t center on screen. The 100% was meant for the image itself, rather than the container. But f the image is that width anyway, that’s not needed.