Problems with a horizontally centred layout in CSS

HTML & CSS
1

Hi,
I am having a lot of trouble with getting a horizontally centred layout to work. I am using the following code file I found on the internet as a starting point:

<html>
<head>
<title></title>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1” />
<style type=“text/css” media=“screen”><!–
body {
background-color: #e1ddd9;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
color:#564b47;
padding:20px;
margin:0px;
text-align: center;
}
Content {
text-align: left;
vertical-align: middle;
margin: 0px auto;
padding: 0px;
width: 550px;
background-color: #ffffff;
border: 1px dashed #564b47;
}
p, h1, pre {
margin: 0px;
padding: 5px 10px;
}
h1 {
font-size: 11px;
text-transform:uppercase;
text-align: right;
color: #564b47;
background-color: #90897a;
}
a {
color: #ff66cc;
font-size: 11px;
background-color:transparent;
text-decoration: none;
}
–></style></head>
<body>
<div id=“content”>
<p><b>center a FIXED BOX</b><br /><br />
This BOX has a fixed width.<br />
It is centered and adjusts to the browser window.<br />
The height adjusts to the content.<br />
<a href=“/”>more nice and free css templates</a><br />
</p>

<p>
<img src=“xhtml10.gif” alt=“” width=“80” height=“15” border=“0”/> <img src=“css.gif” alt=“” width=“80” height=“15” border=“0”/>
</p>
</div>
</body>
</html>

this code works fine but the problem I have is when I add in more divs to the content div for segmenting my page content (for example to add in a header or an image gallery) essentially I am trying to position these new divs using absolute positioning but what seems to be happening is they are positioning from the body rather than the content div. This means I am unable to control where I want the elements on the page. I have also tried relative positioning but this doesnt help either!
I am very new to CSS but from the research I have done on the web the important line in the CSS above is:

margin: 0px auto; on the Content div to control the horizontal positioning

Any help that anyone could give me would be much appreciated as I am going crazy trying to work out where I am going wrong!! If you require any other information to help me please let me know and I will see what I can add.

many thanks in advance
Hayden

2

Can you post a link to the site? You can’t post live links yet (you need to have 5 posts to post links), but you can write it like this:

www dot example dot com slash mysite dot html

and we can go from there.

3

Hi there, I havent got the site up and running yet, am still just building on my home computer. I have copied the code that I am trying to get to work below. The result I want is that the header and ImgGall divs are positioned within the container div. (along with any other divs that I may need!) hope this makes sense!

Thanks
Hayden

<html>
<head>
<title>Floren and Gilder</title>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1” />
<style type=“text/css” media=“screen”><!–

body {
background-color: #AAB29C;
/padding:20px;
margin:0px;/
text-align: center;
}
#container {
margin: 0px auto;
width: 750px;
text-align: left;
background-color: #ffffff;
border: 1px solid #564b47;
padding: 0px;
}

#ImgGall {
position: absolute;
left: 100px;
top: 125px;
}

#header {
position: absolute;
width: 100%;
left: 0px;
top: 0px;
height: 125px;
}
–></style></head>
<body>
<div id=“container”>

		&lt;div id="header"&gt;	
			&lt;img src="images/Horse2.png" class ="feature" width="123" height ="125"/&gt;
		&lt;/div&gt;	&lt;!-- end of header div --&gt;
			
&lt;div id="ImgGall"&gt;
&lt;img src="images/bag3.jpg" width="600" height="415" /&gt;
&lt;/div&gt; &lt;!-- end of ImgGall div --&gt;

</div> <!-- end of container div –>
</body>
</html>

4

Hi, if you want the absolute positioned item to be relative to that div give the content div a position:relative to establisih a new stacking context for the absolutely positioned element

I assume you know you don’t have a doctype :wink:

5

thanks mate that has worked a treat and saved my sanity!!

6

You’re welcome :).