Welcome to WebmasterWorld Guest from 54.167.175.107

Forum Moderators: incrediBILL

Fluid centering with DIV's?

Trying to get out of the table habit

   
8:08 pm on Sep 5, 2002 (gmt 0)

10+ Year Member



You all know how easy it is to center a table and have it fluid with window size, right?

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

8:36 pm on Sep 5, 2002 (gmt 0)

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member



The only way I've found to do this (without having it blow up in one of my three testing browsers: IE 5, Opera 5 and NN4.7) is by nesting divs... The 'outer' div would be set to 100% width, with 5% left & right padding (for a total of 10% - or whatever equal percentages you choose). The inner div would be set to width: auto.

<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>

8:51 pm on Sep 5, 2002 (gmt 0)

10+ Year Member



I guess I could use a shim image to set the fixed width.

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

8:55 pm on Sep 5, 2002 (gmt 0)

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member



A shim image would set an effective minimum width, I think... but until there's good browser support for the max-width and min-width properties, I think you're SOL on a properly fixed-width centered div.

<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.)

9:00 pm on Sep 5, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I confess that I gave in on this one and took the easy/dirty route.

There is a free extension for Dreamweaver that will centre divs using javascript (which I then bung in an external js file of course)

9:01 pm on Sep 5, 2002 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

9:10 pm on Sep 5, 2002 (gmt 0)

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member



There is a free extension for Dreamweaver that will centre divs using javascript

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.

9:20 pm on Sep 5, 2002 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Why not just use percentage based margins on the div? Seems to me that that would works just fine...

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

9:41 pm on Sep 5, 2002 (gmt 0)

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Why not just use percentage based margins on the div? Seems to me that that would works just fine...

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.

9:46 pm on Sep 5, 2002 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

11:27 pm on Sep 5, 2002 (gmt 0)

10+ Year Member



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. ...

12:08 am on Sep 6, 2002 (gmt 0)

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member



On my site, I wanted the top logo and navigation elements left aligned, with the text content in a centered box below... so I couldn't have messed with the body tag. If you just wanted to center the whole page tho', I'd think padding the body might work better than using margins... (if you don't want to completely blow off NN4, anyhow. ;) )

I haven't tried that one though.

2:03 am on Sep 6, 2002 (gmt 0)

10+ Year Member



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.


YES, this is what I want!

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

3:14 am on Sep 6, 2002 (gmt 0)

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member



I have a wacky idea... which I haven't tested, but it might work.

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.)

6:16 am on Sep 6, 2002 (gmt 0)

10+ Year Member



The margins center the div for IE 6 and Gecko, the text-align:center centers the div for IE 5.

<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>

9:06 am on Sep 6, 2002 (gmt 0)

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



I've just finished a project doing this exact thing. The way I got around the various browser issues was to use javascript to dynamically write the left and top values of the div. I also used an onResize command to catch is the user resized the page manually.

Sticky mail me if you'd like the code, or else I can post pointers here - whichever people would prefer..

11:02 am on Sep 6, 2002 (gmt 0)

10+ Year Member



MCookie's way is probably the most foolproof, but here's another solution, which unfortunately doesn't work on IE5/mac or N4:

<div style="position:absolute; width:300px; left:50%; margin-left:-150px;">
(a negative margin of half the width, with 50% positioning. Works vertically too.)

8:18 pm on Sep 6, 2002 (gmt 0)

10+ Year Member



<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?

8:33 pm on Sep 6, 2002 (gmt 0)

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member



margin: auto... Why didn't I think of that? :) Will have to put that in my refernce snippets file...
10:12 pm on Sep 6, 2002 (gmt 0)

10+ Year Member



Well, this works great untill you want to add more layers that follow the same alignment.

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

10:14 pm on Sep 6, 2002 (gmt 0)

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member



What goes wrong then? The div in the example above is set to 100% height... could you perhaps get rid of the height declaration, or change it to auto to allow for more divs below it?
11:37 pm on Sep 6, 2002 (gmt 0)

10+ Year Member



What I am trying to do is add another div with an image that hangs over the edge of the first div and have it fluid with the center div.

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

11:42 pm on Sep 6, 2002 (gmt 0)

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member



If the other div is only going to contain the image, you might be able to assign a class to the image that specifies relative positioning... then place the <img> tag within the cetered div... allowing the positioning declarations to make it 'hang out' of the div boundaries.

<added>Or try using a <span> set to "display: block;" instead of a <div>?</added>

12:29 am on Sep 7, 2002 (gmt 0)

10+ Year Member



If I knew what you just said it may help .. :)

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.

12:41 am on Sep 7, 2002 (gmt 0)

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member



<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">

I think the extra spacing is being caused by the <div> itself, because it is a block-level element, and does not like to have anything snuggled up next to it. (How's that for a technical explanation? ;) )

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>

12:50 am on Sep 7, 2002 (gmt 0)

10+ Year Member



Well, now the page works in all but NN4 (suprised....NOT)

But the same problem occurs, the space is still there. :(

Am I trying to do the impossable here?

12:56 am on Sep 7, 2002 (gmt 0)

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Hmm... this is the point at which I would save one copy of the page, set it aside, and start testing different things at random... I'd try removing the z-index declaration... if that didn't work, I'd try removing the border declaration... if that didn't work, I'd try removing both... heheh.

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?)

1:02 am on Sep 7, 2002 (gmt 0)

10+ Year Member



What's wrong in NN4, BTW?

The image is centered and the page below is blank

1:02 am on Sep 7, 2002 (gmt 0)

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Ooh... random thought here... remove the z-index declaration from both objects (the img and the div) and see what happens. Perhaps the z-index positioning isn't allowing them to overlap like you want, because the image is positioned relatively... (z-index will allow prioritized overlapping of absolutely positioned elements, because absolute positioning takes an object out of page flow. But since you want the image to sort of "stick to" the page flow... maybe it's getting confused there?) If that doesn't work, try giving the div z-index: 2, and the img z-index: 1...

I'm just brainstorming off the top of my head now, so take everything I say with a grain of salt... hehe. ;)

1:15 am on Sep 7, 2002 (gmt 0)

10+ Year Member



No difference :(

Time to give up for tonight! Maybe the answer will come to me in my sleep. :)

This 34 message thread spans 2 pages: 34
 

Featured Threads

Hot Threads This Week

Hot Threads This Month