PDA

View Full Version : Nested div positioning

pathogen
01-21-2003, 08:09 PM
I leave you guru's with the following code sample.

The problem... how do I center the 4 "item" div's within the "frame" div?


<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>

<style type="text/css">

div#frame {
width: 800px;
border: 1px;
border-style: solid;
border-color: #000000;
padding: 10px;
float: left;
}

div#item {
border: 1px;
border-style: dashed;
border-color: #000000;
background-color: #339999;
float: left;
margin: 2px;
}

</style>

<title>test</title>
</head>

<body>

<div id="frame">
<div id="item">ITEM #1</div>
<div id="item">ITEM #1</div>
<div id="item">ITEM #1</div>
<div id="item">ITEM #1</div>
</div>


</body>
</html>
meow
01-22-2003, 01:38 AM
With no consideration for what you already have in the rules.

div#frame { text-align: center } /*this is for dumb IEWin*/
div#item { margin-right: auto; margin-left: auto;
text-align: left }
pathogen
01-22-2003, 01:28 PM
Thanks, that didn't do the trick though :(
ronaldb66
01-22-2003, 04:18 PM
What effect are you looking for then? I guess since the #frame divs don't have a width set they will just fill the whole available width, so if that's not what you want, assign them a specific width and see how that turns out.
pathogen
01-22-2003, 08:51 PM
This is what the output is now:
http://www.digital-daze.net/ss/what_it_is.gif

This is what I want the output to be:
http://www.digital-daze.net/ss/what_i_want.gif

The normal methods don't seem to be working, unless I am completely missing the boat.

Any and all help is greatly appreciated.
redhead
01-22-2003, 09:07 PM
the css should have done it, but you could try putting align="center" in the tag for the frame div, although, as ive said, the text-align: center should have done that... :confused: :thumbsup:
Catman
01-22-2003, 09:57 PM
It's the float : left that's the problem, I think. Try removing that and changing those item divs to spans.
meow
01-23-2003, 02:42 AM
Crap! I didn't even see they were floated. :(

Floats require an explicit width anyway, so you could center them by using padding-left and padding-right in the #frame rule but then you are up against hacking everything for IEs broken box model.

If you use a wrapper div and center that one instead you can have it look almost the same in IE5 and good browsers. Dunno if my math is on the spot here, you'll have to check that.

The CSS:

div#frame {
width: 800px;
border: 1px solid #000;
padding: 10px;
float: left;
text-align: center;
}

#wrapper {
margin-right: auto;
margin-left: auto;
text-align: left;
width: 400px
}

div.item {
border: 1px;
border-style: dashed;
border-color: #000000;
background-color: #339999;
float: left;
margin: 2px;
width: 94px;
}


The HTML:

<div id="frame">

<div id="wrapper">
<div class="item>ITEM #1</div>
<div class="item">ITEM #1</div>
<div class="item">ITEM #1</div>
<div class="item">ITEM #1</div>
</div>

<div style="clear:both"></div>
</div>


An id is unique so you have to use a class for "item". Also, depending on what those items really are you may be able to do this much easier. For instance by using 'display: inline' and just center them.

Hope I didn't screw up again. :rolleyes:
pathogen
01-23-2003, 03:03 AM
Thanks so much guys! Its working now.

I got rid of the float: left stuff and replaced it with display: inline;

Its centering nicely now. Thanks again for the help and patience :)
meow
01-23-2003, 03:08 AM
And now you tell us. :rolleyes:

:D
pathogen
01-23-2003, 02:18 PM
Hey now :)

I posted back as soon as I saw your advice and tried it! Thanks again meow and others.
meow
01-24-2003, 01:42 AM
I was joking. :p :thumbsup: