centered div

Forum Moderators: open

Message Too Old, No Replies

centered div

jackvull

4:48 pm on Jan 3, 2006 (gmt 0)

Hi
I have centred my website using
<center>
<div>
...all the other HTML...
</div>
</center>

This means that whatever resolution the user views the page in, it always appears in the centre of the screen, rather than all the way on the left hand side with a massive white space on the right.

My problem is that I am trying to generate ...all the other HTML... dynamically (server side scripting PHP).
I'd like to use some absolute positiong to place the <div> element at a certain point on the page but because of the different resolutions that can be used, wouldn't this appear in a different place each time?

Is there a better way of going about this? Many thanks.

tedster

5:01 pm on Jan 3, 2006 (gmt 0)

One method uses absolute position to place the content at exactly the 50% point. But then you use a negative left margin that is HALF of the main content's width.

This is like telling the browser "find the middle of the window available - now back off to the left by exactly half the width of the div". This approach centers the page every time.

So assume you have a fixed width page of 760px. Half that is 380px.

div#container {
width:760px;
position:absolute;
top:0;
left:50%;
margin-left:-380px;
}

jackvull

11:27 am on Jan 4, 2006 (gmt 0)

Thanks.
This works perfectly apart from other thing that I need a a workaround for.

When viewed on a full page, this works great. However, when I reduce the size of the browser, because of the way the text is positioned to x pixels left, the text moves off the viewable area.

Is there a way round this?!

limbo

1:22 pm on Jan 4, 2006 (gmt 0)

An alternative that resizes the margin:

body {
text-align: center;
}
#your-div {
width: 600px; /* or whatever */
margin: 0 auto;
text-align: left;
}

jackvull

3:16 pm on Jan 4, 2006 (gmt 0)

Sorry could you expand on that a bit more please?

At the moment I have:
body { background-color: #039;
text-align: center;
margin: 0;
padding: 0;
}

#main {
position:absolute;
width:600px;
top:0;
left:50%;
margin-left:-380px;
margin-top:165px;
background-color: white;
text-align: left;
}

Now, when viewed on full screen on any resolution, the div and text appear in the right place.
When I drag the browser and create a smaller window out of it, the text is off to the left somewhere because of -380px.

The problem is being caused because I have a standard menu.html page, which I include on every single one of my site's pages. All the other pages are generated by PHP and I'm simply generating a div with code and trying to place that with the CSS in the right place on the screen.

tedster

3:21 pm on Jan 4, 2006 (gmt 0)

If the div is 600px wide, then the margin-left should be -300px

jackvull

3:34 pm on Jan 4, 2006 (gmt 0)

Yeah, sorry I have it as 755px and 378px but it doesn't make a difference when the screen is resized. For some reason, the CSS is calculating the 50% point differently.

When the window is made smaller, the margins disappear, as you'd expect them to on a smaller resolution, but the CSS is still calculating the 50% based on a full browser size...I think

tedster

3:37 pm on Jan 4, 2006 (gmt 0)

I've used this approach pretty often and haven't seen that behavior. Is #main nested in some other containing element in your layout?

jackvull

3:39 pm on Jan 4, 2006 (gmt 0)

Try this in IE and resize the window:

<html>
<body style='background-color: #039;
text-align: center;
margin: 0;
padding: 0; '>
<div style='position:absolute;
width:755px;
top:0;
left:50%;
margin-left:-378px;
margin-top:165px;
background-color: white;
text-align: left;'>
TesterTester
</div>
</body>
</html>

jackvull

4:09 pm on Jan 4, 2006 (gmt 0)

In fact, copy and paste this, it might give you a better idea:

TesterTester

</div>

<tr>
<td colspan="2">
<img src="a.gif" width="775" height="127" alt="">
</td>
</tr>
<tr align='center'>
<td colspan="2" bgcolor="CCCCCC" >

<a href="index.php" class="b"><font size="4">Home</font></a>   ¦   
<a href="about.php" class="b"><font size="4">About us</font></a>   ¦   
<a href="contact.php" class="b"><font size="4">Contact</font></a>
<br />

</td>
</tr>
<tr>
<td colspan="2">
<table border = "0">
<tr>
<td width = '775' height = '360' style='background-color:white;'>
 
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" align="center" valign="top" bgcolor="CCCCCC" class="text3">
<br />

<a href="index.php" class="b">Home</a> ¦
<a href="about.php" class="b">About us</a> ¦
<a href="contact.php" class="b">Contact</a>
<br />
<font size='1'>Copyright </font>
<br /><br />
</td>
</tr>
</table>
</div>
</center>

limbo

4:30 pm on Jan 4, 2006 (gmt 0)

Hi jack

the center tags are depricated - so if you can avoid using them I would.

the method I descibed with sample HTML too:

<html>
<head>
<style type="text/css">
body {
text-align: center;
}
.box {
width: 600px; /* or whatever */
margin: 0 auto;
text-align: left;
background: #eee;
}
</style>
</head>
<body>
<div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi in ligula ut urna interdum fermentum. Fusce at odio. Ut enim felis, pellentesque vitae, dictum sed, tempus a, purus. Cras mattis, nisi sit amet congue aliquet, risus augue sodales ante, quis sagittis nunc magna sed nisl. Donec porttitor turpis at ligula. Nam tempor ornare sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer nec est eget magna ornare dignissim. Aenean imperdiet consequat eros. Nulla diam.

Suspendisse velit dui, ullamcorper quis, commodo a, viverra nec, nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla venenatis accumsan sem. Nunc rutrum ornare justo. Sed quis justo eget nunc tincidunt iaculis. Phasellus erat. Vivamus pretium magna quis risus. Etiam aliquet. Duis dapibus. Aenean sed erat. Integer congue eleifend lectus. Sed pulvinar arcu sed pede. Suspendisse potenti. Etiam laoreet ligula at metus. Nam ultricies ante sit amet felis tristique feugiat. Praesent posuere dui eget mauris.</div>
</body>
</html>

jackvull

5:16 pm on Jan 4, 2006 (gmt 0)

Right, so I've got to the stage where the margins are resized and everything fits in around the size of the window/resolution but now my div appears at the bottom of the page because it isn't absolutely positioned anymore.

When I try to absolutely position it, I get the same problem. Totally lost.

.main {
width:755px;
margin: 0 auto;
background-color: white;
text-align: left;
}

</style>

</head>
<body>

<body bgcolor="#ffffff" leftmargin="0" topmargin="0"

marginwidth="0" marginheight="0">
<table width="775" border="1" cellpadding="0"

cellspacing="0" style="border-style: sold; border-color:black;">

<tr>
<td colspan="2">
<img src="a.gif" width="775"

height="127" alt="">
</td>
</tr>
<tr align='center'>
<td colspan="2" bgcolor="CCCCCC" >
<!--<img src="images/main2.gif"

width="100%" height="5" alt="">-->
<a href="index.php"

class="b"><font size="4">Home</font></a>   ¦   
<a href="about.php"

class="b"><font size="4">About us</font></a>   ¦   
<a href="contact.php"

class="b"><font size="4">Contact</font></a>
<br />
<!--<img src="images/main2.gif"

width="100%" height="5" alt="">-->
</td>
</tr>
<tr>
<td colspan="2">
<table border = "0">
<tr>
<td width =

'775' height = '360' style='background-color:white;'>
<!-- replace

this with some JavaScript to find the bottom of the page-->

 
</td>
</tr>
</table>

</td>
</tr>
<tr>
<td colspan="2" align="center"

valign="top" bgcolor="CCCCCC" class="text3">
<br />

<a href="index.php"

class="b">Home</a> ¦
<a href="about.php"

class="b">About us</a> ¦
<a href="contact.php"

class="b">Contact</a>
<br />
<font size='1'>Copyright

</font>
<br /><br />
</td>
</tr>
</table>
<div class='main'>
HELLO WORLD!
</div>

</body>
</html>

centered div

jackvull

tedster

jackvull

limbo

jackvull

tedster

jackvull

tedster

jackvull

jackvull

limbo

jackvull

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week