Forum Moderators: open
This may be a dumb question but, How do I do this with a DIV?
No matter the window size I want it centered!
Thanks in advance,
dhdweb
<div id="padded"> <-- this is your 'centering' padded div
<div id="content"> <-- this is your centered width: auto; div
insert page content here
</div>
</div>
<added>This means, of course, that the width of your centered div will be fluid also... If you want a fixed width centered layout, AFAIK, you're probably stuck with tables for now. :( </added>
Let me play with that idea and get back to ya.
IF anyone has a better way to do this please let me know.
dhdweb
<ponder>Even then, if you could set a maximum width, and someone had a larger monitor, the 'centered' div wouldn't be centered past a certain window width... it would start looking sorta crooked-left aligned.</ponder>
(Why they couldn't just put the equivalent of align="center" into CSS, I will never understand.)
There is a free extension for Dreamweaver that will centre divs using javascript (which I then bung in an external js file of course)
I guess I could use a shim image to set the fixed width.
Avoid the shim, if you start using those you may aswell go back to tables.
Percentage based margins would be what I'd be trying...
Can you post what you have? An example with explanation of what it should achieve?
Nick
Eww! hehe... If I want a fixed width layout centered on screen, I just use tables. It's a lot more foolproof than javascript. After all, people can turn javascript off in their browser... they can't turn off tables. ;)
But for a fluid-width centered layout, the nested divs with percentage padding on the outer div worked best for me. When I tried using a single div with percentage margins, it fell victim to browser inconsistencies in the way margins are rendered.
In fact:
[pre]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<?xml version="1.0" encoding="iso-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
body {
color: #000000;
background-color: #FFFFFF;
height: 100%;
}
#center {
margin: 20%;
padding: 1em;
font: 1em arial, verdana;
background-color: #F5F5F5;
border: thick solid #000000;
}
</style>
<title>Centered divs</title>
</head>
<body>
<div id="center">
<h1>Centered divs</h1>
<p>This works just fine in Opera and Moz, I'm not in Windows
so you'll have to tell me how it works out in IE.</p>
</div>
</body>
</html>
[/pre]
Nick
I don't recall exactly which browser had a problem with the margin percentages... but I think it was NN4.7 on either Mac or Windows. (I think NN is the one that has trouble understanding that margins apply to the outside of the div, and padding applies to the inside...)
I do know that the nested div solution was the only method I found that worked on all my test browsers: IE5, NN4.7 (mac & win), Opera 5 (mac) Opera 6 (win)
I may have also tested it on NN6/Mac, but I don't recall.
However, I think dhdweb is looking for a way to center a fixed-width layout in the browser window... which can't be done via CSS alone, AFAIK.
However, I think dhdweb is looking for a way to center a fixed-width layout in the browser window... which can't be done via CSS alone, AFAIK.
Not reliably, no.
I even try to do css for nn4 anymore, to much heartache and hair pulling ;)
Nick
Why not just use percentage based margins on the div?
I'm ignoring NS 4.x like Nick_W.
You can also use percentage based margins on the body:
body {
margin: 10px 10% 10px 10%;
padding: 0px;
}
</style>
Don't try this on Amazon.com. ...
I haven't tried that one though.
However, I think dhdweb is looking for a way to center a fixed-width layout in the browser window... which can't be done via CSS alone, AFAIK.
This is somthing like what I want centered:
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="Layer1" style="position:absolute; width:700; height:100%; z-index:1; background-color: #9999FF; layer-background-color: #9999FF; border: 1px none #000000"></div>
</body>dhdweb
Create nested divs, as I mentioned before... but make the inner div a fixed width, and give the outer div the "text-align: center;" property. I've successfully used text-align to control the alignment of images inside divs before... so it might work on a nested div.
<div id="center"> <-- (text-align: center;)
<div id="content"> <-- (fixed width)
insert page content here
</div>
</div>
(You could also try using a single fixed-width div, and assign "text-align: center;" to the <body>, but I've had spotty success assigning text attributes to the body, so I stick with nesting divs.)
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="text-align:center;">
<div id="Layer1" style="margin-left:auto;margin-right:auto;width:700px; height:100%; z-index:1; background-color: #9999FF; layer-background-color: #9999FF; border: 1px none #000000">hello</div>
Sticky mail me if you'd like the code, or else I can post pointers here - whichever people would prefer..
<div style="position:absolute; width:300px; left:50%; margin-left:-150px;">
(a negative margin of half the width, with 50% positioning. Works vertically too.)
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="text-align:center;">
<div id="Layer1" style="margin-left:auto;margin-right:auto;width:700px; height:100%; z-index:1; background-color: #9999FF; layer-background-color: #9999FF; border: 1px none #000000">hello</div>
This seems to be what I am looking for.
Tested fine in IE5sp2, Netscape7 and Opera6.02, even seems to work in NN4.7
Thanks MCookie
dhdweb
P.S. Does anyone know if this works in Netscape6?
I think I will either stick with tables for this or just give up on the fixed width centered box. :( God I hate sites that align left!
Oh well, thanks everyone for the help, I may use this code for a different project were I don't need the whole page to be fluid.
dhdweb
Now I can get this to work just fine but where ever the div tag is in the document creates a non-usable space.
I will post an example soon.
dhdweb
<added>Or try using a <span> set to "display: block;" instead of a <div>?</added>
Here is what I have:
<body bgcolor="#000000" style="text-align:center">
<div id="Layer1" style="margin-left:auto; margin-right:auto; width:640px; height:100%; z-index:1; background-color: #9999FF; layer-background-color: #9999FF; border: 1px none #000000">
<div id="Layer2" style="position:relative; width:194px; height:87px; z-index:2; border: 1px none #000000; top: -15; left: -290"><img src="test.gif" width="194" height="87" alt="Image Here"></div>
The problem is the un-usable space above this text!
<br>
And this only seems to work in IE.
</div><added>I would just put the div at the bottom but I also have dynamic content on the page so the height keeps changing.</added>
Boy did I pick the wrong day to quit useing tables.
<div id="Layer2" style="position:relative; width:194px; height:87px; z-index:2; border: 1px none #000000; top: -15; left: -290"><img src="test.gif" width="194" height="87" alt="Image Here"></div>
Instead of that, try putting the style inside the img tag itself, and do away with the outer <div>:
<img src="test.gif" width="194" height="87" alt="Image Here" style="position:relative; z-index:2; border: 1px none #000000; top: -15; left: -290">By assigning the style to the img tag itself, the extra space would disappear, if it is actually the <div> tag at fault.
<disclaimer>Once again, I have not tried this...</disclaimer>
But the same problem occurs, the space is still there. :(
Am I trying to do the impossable here?
You can see I have a very scientific and precise method for dealing with these things.
What's wrong in NN4, BTW?
(And yes, you may be attempting the impossible... but there's no harm in trying, right?)
What's wrong in NN4, BTW?
The image is centered and the page below is blank
I'm just brainstorming off the top of my head now, so take everything I say with a grain of salt... hehe. ;)
Time to give up for tonight! Maybe the answer will come to me in my sleep. :)
