homepage Welcome to WebmasterWorld Guest from 54.204.58.87
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

This 34 message thread spans 2 pages: 34 ( [1] 2 > >     
Fluid centering with DIV's?
Trying to get out of the table habit
dhdweb




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

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

 

mivox




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

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>

dhdweb




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

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

mivox




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

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

4eyes




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

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)

Nick_W




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

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

mivox




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

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.

Nick_W




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

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

mivox




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

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.

Nick_W




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

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

moonbiter




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

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

mivox




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

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.

dhdweb




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

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

mivox




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

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

MCookie




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

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>

BlobFisk




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

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

c3oc3o




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

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

dhdweb




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

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

mivox




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

margin: auto... Why didn't I think of that? :) Will have to put that in my refernce snippets file...

dhdweb




msg:560616
 10:12 pm on Sep 6, 2002 (gmt 0)

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

mivox




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

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?

dhdweb




msg:560618
 11:37 pm on Sep 6, 2002 (gmt 0)

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

mivox




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

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>

dhdweb




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

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.

mivox




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

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

dhdweb




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

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?

mivox




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

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

dhdweb




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

What's wrong in NN4, BTW?

The image is centered and the page below is blank

mivox




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

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

dhdweb




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

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 ( [1] 2 > >
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved