CSS simple positioning

I am trying to do a simple layout.

http://page-test.co.uk/css.html

(1) I need the boxes to be positioned in the centre.

Notice how when you change the screen size / scroll the browser that it all wraps / flows.

(2) Why do I need to enter a height in the content div? Surely the content should define its height like text would?

Your Welcome, it looks like you may have it under control now. :slight_smile:

Sorry I could not be of more help with all the mobile app questions but it seems we have a new forum dedicated to the subject.

Developing For Mobile Devices

Maybe you can find some info there.

The problem with IE6/7 is that you did not re-target the hacks for the p tags in the new div #mainContent that you created.

You still had them as Content p

* html [COLOR=Red]#content p[/COLOR] {display:inline;}/* inline-block trip for IE6 */
* + html [COLOR=Red]#content p[/COLOR] {display:inline;}/* inline-block trip for IE7 */

Now that you have all the divs nested in #mainContent you need to move font-size:0 there. You don’t need it on Content anymore, it is causing you to have to reset font-sizes on all the header divs when it is not needed.

I am cleaning up your code some more, I’ll post it shortly. :wink:

That’s brilliant. Thanks again for your help, you certainly know about CSS!

You can clean those header divs up some, there’s no need to nest them that deep. What’s #headerContent doing that #header couldn’t do. And if your going to have three separate elements up top they don’t even need to nest at all since they are already nested in Content.

Here’s what you have -

<div id="header">
    <div id="headerContent">
    <div class="headerBox" style="height:50px">Top Nav Bar</div>
    <div class="headerBox" style="height:60px">Flash Banner Ad</div>
    <div class="headerBox" style="height:30px">Page Title</div>
    </div>
</div>

It could be cut down to this and styled via the CSS -

<div id="navbar">Top Nav Bar</div>
<div id="flash">Flash Banner Ad</div>
<h1>Page Title</h1>

Although one thing I am finding a problem with is on some mobile phones the nav bar is sliding around when you wouldn’t expect to, and one mobile browser all you can see is the nav bar as everything else just slides around underneath.
Yep, in post#7 (3,4) I mentioned that you would have problems with position:fixed in mobiles.

Which if I remember right, fixed position can be troublesome on mobiles too.

Thanks again.

I’ll bear those changes in mind. I think I have ideas for the mobile stuff also.

One final thing: My www.page-test.co.uk/finalfull.html doesn’t work very well in IE7 (all ‘boxes’ just run down the page, one box per line). I have tested your original and this is fine. Any ideas what I have done? I’ve left in all your special IE7 fixes.

It works on most other browsers as I would expect it to. I can’t test IE6 though although I am considering not bothering with IE6 but I suppose you’ll tell me that’s not a good idea.

That’s a brilliant layout, thanks.

(1) Although there are actually problems with the way Safari / Chrome displays it. Have a look (you’ll see the red background on the right and it will only display two divs wide). Others are perfect though.

(2) I see what you’re saying about the <p></p> tags instead of <div>.

Here is something that might be along the lines of what you are wanting to do now.

Before you even ask. No, there is nothing you can do about the content sliding under the fixed position menu when the page scrolls left.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Centered Inline-Block Divs</title>

<style type="text/css">
body {
    margin:0;
    padding:0;
    font:100&#37;/1.2 arial,helvetica,sans-serif;
}
#wrap {
    width:90%;
    min-width:620px;
    max-width:1240px;
    margin:0 auto;
    background:red;
}
#left {
    float:left;/*IE8 needs a float for fixed position child that is not fixed to viewport*/
    width:250px;
    height:250px;/*this is just a random height so #content can rest against it*/
}
    #nav {
        position:fixed;/* no top or left coordinates to keep it fixed in #left-col*/
        width:250px;
        margin:0;
        padding:0;
        list-style:none;
    }
    #nav li,
    #nav a {float:left;}/*kill IE whitespace bugs with floats*/
    
    #nav a {
        width:230px;
        padding:5px 10px;
        color:#00F;
        background:lime;
        text-decoration:none;
    }
    #nav a:hover {
        color:#000;
        background:cyan;
    }

#content {
    overflow:hidden;/*restrict from sliding under floated left column (IE7 haslayout also)*/
    margin-left:250px;/* The #left float height does the same thing as this margin*/
    text-align:center;/*center the inline-blocks*/
    word-spacing:-.5em; /*reduce whitespace nodes on inline-blocks*/
    padding-left:.25em;
    background:orange;
}
    * html #left {margin-right:-3px}/*IE6 3px jog*/
    * html #content { /*IE6 haslayout*/
        height:1%;
        overflow:visible;
    }
    #header {
        min-height:80px;
        margin:0 0 10px -.25em;
        padding-top:1px;
        text-align:center;
        background:#BBB;
        word-spacing:normal; /*reset from #content*/
    }    
    #content p {
        width:280px;
        min-height:140px;
        display:-moz-inline-box; /* for FF2 (inline-box must be used for shrink wrapping)*/
        display:inline-block; /* modern browsers */
        vertical-align:top;
        margin:0 5px 10px;/*optional*/
        padding:10px;
        word-spacing:normal; /*reset from #content*/
        text-align:left; /*reset from #content*/
        background:#FFF;
        border:1px solid #000;
    }
    * html #content p {display:inline;}/* inline-block trip for IE6 */
    * + html #content p {display:inline;}/* inline-block trip for IE7 */

</style>

</head>
<body>

<div id="wrap">
    <div id="left">
        <ul id="nav">
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </div>
    <div id="content">
        <div id="header">
            <h1>Header Stuff Here</h1>
        </div>
        <p>Lorem ipsum dolor sit amet consectetuer felis tortor Sed lacus et. Neque sit ut pede ac 
        euismod orci nunc Integer Proin tristique. Phasellus egestas porttitor natoque senectus 
        turpis condimentum et consectetuer auctor amet.
        </p>
        <p>Lorem ipsum dolor sit amet consectetuer felis tortor Sed lacus et. Neque sit ut pede ac 
        euismod orci nunc Integer Proin tristique.
        </p>
        <p>Lorem ipsum dolor sit amet consectetuer felis tortor Sed lacus et. Neque sit ut pede ac 
        euismod orci nunc Integer Proin tristique. Phasellus egestas porttitor natoque senectus 
        turpis condimentum et consectetuer auctor amet.
        </p>
        <p>Lorem ipsum dolor sit amet consectetuer felis tortor Sed lacus et. Neque sit ut pede ac 
        euismod orci nunc Integer Proin tristique.
        </p>
        <p>Lorem ipsum dolor sit amet consectetuer felis tortor Sed lacus et. Neque sit ut pede ac 
        euismod orci nunc Integer Proin tristique. Phasellus egestas porttitor natoque senectus 
        turpis condimentum et consectetuer auctor amet.
        </p>
        <p>Lorem ipsum dolor sit amet consectetuer felis tortor Sed lacus et. Neque sit ut pede ac 
        euismod orci nunc Integer Proin tristique. Phasellus egestas porttitor natoque senectus 
        turpis condimentum et consectetuer auctor amet.
        </p>
        <p>Lorem ipsum dolor sit amet consectetuer felis tortor Sed lacus et. Neque sit ut pede ac 
        euismod orci nunc Integer Proin tristique.
        </p>
        <p>Lorem ipsum dolor sit amet consectetuer felis tortor Sed lacus et. Neque sit ut pede ac 
        euismod orci nunc Integer Proin tristique. Phasellus egestas porttitor natoque senectus 
        turpis condimentum et consectetuer auctor amet.
        </p>
        <p>Lorem ipsum dolor sit amet consectetuer felis tortor Sed lacus et. Neque sit ut pede ac 
        euismod orci nunc Integer Proin tristique.
        </p>
        <p>Lorem ipsum dolor sit amet consectetuer felis tortor Sed lacus et. Neque sit ut pede ac 
        euismod orci nunc Integer Proin tristique. Phasellus egestas porttitor natoque senectus 
        turpis condimentum et consectetuer auctor amet.
        </p>
    </div>
</div>

</body>
</html>

This might help:
http://page-test.co.uk/css5.html

Rayzur, you are brilliant. You’ll never believe how many people I asked to try and get the answer.

However, brilliance is not always good as it has led me to ask more questions!

I have made an example including this and more closer to a real life web page at:
www.page-test.co.uk/css2.html

(1) Very easy I know but how would I prevent the content moving under the nav bar. If screen width was less than 1000 I would prefer it to stay and show a scrollbar. If over 1000 no scrollbar needed as should asjust in size automatically.

(2) In my example I have added a “Page Title” box. Is there any way to make this exactly the same width as the boxes beneath them (this will be hard as when scrolling and changing content the boxes can of course change).

(3) Is it possible for the 3rd line in my example to be aligned on the left of the block. So all centered but if there is an odd number to align left. So:
| X X X
| X X X
| X
(above may not be possible)

(4) Is there a way to force seperation sometimes? So if I had 16 divs which naturally displayed as 4 rows of 4, could I tell it to seperate after each second one? (I have tried adding clear:both but does nothing)

Thanks again Rayzur for the help and to anybody else who may be able to help with this.

Don’t worry I should be done if I can get help with these last questions. Thanks again.
It’s OK, I don’t mind helping and answering your questions.

I’ll just give my replies to your 1-5? above.

  1. Well I see you set the max-width to 1620px and I can’t test that on my screen. The best I can do is just set the width at 1620 and scroll right but I can’t reproduce the problem doing that. I see that you removed the margins I had on .box but that should not cause any problems.

  2. You never mentioned anything about coding for mobile until now, you shouldn’t be too surprised about it. :slight_smile:
    There are some threads around here somewhere about coding for mobile devices. Check the CSS FAQ or do a forum search. I have not got to involved with that as of yet.

3,4) If you want your nav fixed at the top left then we can do that with position:fixed;
You need to get that header cleaned up. You nested a div inside of the H1 I was using. Probably be best to nest the header inside Content now and just set the left margin on Content to make room for the fixed position nav. Which if I remember right, fixed position can be troublesome on mobiles too.

  1. As I understood your original request you was wanting the width to follow the amount of divs and set it’s width accordingly. That is what I said could not be done with CSS.

>>Surely there is a better way than this???
I would just set a left and right margin on it and let it follow the new parent (Content)

I’ll try to rework my example with these new specs if I get a chance. :wink:

BTW, What are you going to do with all those 16 divs or whatever the amount may be. If they do not contain multiple paragraphs then you can eliminate all those divs and just style the <p> tags as the divs are now. That code can be cut in half is what I am suggesting.

Hi,

  1. You will need to use inline-blocks if you need the inner divs to auto center in a fluid width wrapper.

In This Example the <li> would represent your .box divs and then you could set your 300px width on the inline-blocks while text-align center on the parent centers them.

  1. No, you don’t need to set a height. The problem was that your .box divs are currently floats and you must force the parent to contain the floats.

That is normally done by using overflow:hidden; on the parent to enclose it’s child floats. Floats are removed from the page flow so the parent does not know they are there unless it is forced to look for them.

See this tutorial for more info on Containing Floats.

Here you go, this cleans things up and gets IE7 working. The page does work in IE6 but it does not support position:fixed or min-max dimensions.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Centered Inline-Block Divs</title>
 
<meta name="viewport" content="width=1250, initial-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
 
<style type="text/css">
body {
    margin:0;
    padding:0;
    font:100&#37;/1.2 arial,helvetica,sans-serif;
}
#wrap {
    width:92%;
    min-width:980px;
    max-width:1650px;
    margin:0 auto;
    margin-top:15px;
}
#left {
    float:left;/*IE8 needs a float for fixed position child that is not fixed to viewport*/
    width:310px;
    min-height:250px;/*this is just a random height so #content can see the float*/
}
* html #left {
    margin-right:-3px;/*IE6 3px jog*/
    height:250px;/*IE6 min-height*/
}
#nav {
    position:fixed;/* no top or left coordinates to keep it fixed in #left-col*/
    width:300px;
    margin:0;
    padding:0;
    list-style:none;
}
    #nav li,
    #nav a {float:left;}/*kill IE whitespace bugs with floats*/
   
    #nav a {
        width:280px;
        padding:5px 10px;
        color:#00F;
        text-decoration:none;
        background:#CDF;
    }
    #nav a:hover {
        color:#000;
        background:#FF0;
    }

/*==== Begin Main Content ====*/ 
#main {
    overflow:hidden;/*restrict from sliding under floated left column (IE7 haslayout also)*/
    text-align:center;
}
* html #main { /*IE6 haslayout*/
    height:1%;
    overflow:visible;
}  
#topnav,
#flash {
    min-height:55px;
    border:1px solid #000;
    margin:0 0 4px;
}
#main h1 {
    margin:0 0 4px;
    padding:4px 0;
    font:20px/22px arial;
    border:1px solid #000;
}  
#content {
    border:1px solid #000;
    padding:5px 10px;
    text-align:center;/*center the inline-blocks*/
    font-size:0; /*kill whitespace nodes on inline-blocks (works with all browsers)*/
}
#content p {
    width:311px;
    min-height:140px;
    display:-moz-inline-box; /* for FF2 (inline-box must be used for shrink wrapping)*/
    display:inline-block; /* modern browsers */
    vertical-align:top;
    margin:5px;/*optional*/
    text-align:left; /*reset from #content*/
    background:#FFF;
    border:1px solid #000;
    /*word-spacing:normal; /*reset from #content*/
    font-size:16px;/*reset from #main*/
}
#content p.first {
    width:634px;
}
* html #content p {display:inline;}/* inline-block trip for IE6 */
* + html #content p {display:inline;}/* inline-block trip for IE7 */

#footer {
    min-height:40px;
    margin:10px 0;
    padding-top:3px;
    font-size:10px;
}

</style>
 
<script type="text/javascript">
if(screen.width<1000) {
    
    document.write('<link rel="stylesheet" type="text/css" href="csshack.css" />');
    
}
</script>
 
</head>
<body>
 
<div id="wrap">
    <div id="left">
        <ul id="nav">
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </div>   
    <div id="main">        
        <div id="topnav">Top Nav Bar</div>
        <div id="flash">Flash Banner Ad</div>
        <h1>Page Title</h1>            
        <div id="content">
            <p class="first">1Lorem ipsum dolor sit amet consectetuer felis tortor Sed lacus et. Neque sit ut pede ac
            euismod orci nunc Integer Proin tristique. Phasellus egestas porttitor natoque senectus
            turpis condimentum et consectetuer auctor amet.
            </p>
            <p>2Lorem ipsum dolor sit amet consectetuer felis tortor Sed lacus et. Neque sit ut pede ac
            euismod orci nunc Integer Proin tristique. Phasellus egestas porttitor natoque senectus
            turpis condimentum et consectetuer auctor amet.
            </p>
            <p>3Lorem ipsum dolor sit amet consectetuer felis tortor Sed lacus et. Neque sit ut pede ac
            euismod orci nunc Integer Proin tristique.
            </p>
            <p>Lorem ipsum dolor sit amet consectetuer felis tortor Sed lacus et. Neque sit ut pede ac
            euismod orci nunc Integer Proin tristique. Phasellus egestas porttitor natoque senectus
            turpis condimentum et consectetuer auctor amet.
            </p>
            <p>Lorem ipsum dolor sit amet consectetuer felis tortor Sed lacus et. Neque sit ut pede ac
            euismod orci nunc Integer Proin tristique.
            </p>
            <p>Lorem ipsum dolor sit amet consectetuer felis tortor Sed lacus et. Neque sit ut pede ac
            euismod orci nunc Integer Proin tristique. Phasellus egestas porttitor natoque senectus
            turpis condimentum et consectetuer auctor amet.
            </p>
            <p>Lorem ipsum dolor sit amet consectetuer felis tortor Sed lacus et. Neque sit ut pede ac
            euismod orci nunc Integer Proin tristique. Phasellus egestas porttitor natoque senectus
            turpis condimentum et consectetuer auctor amet.
            </p>
            <p>Lorem ipsum dolor sit amet consectetuer felis tortor Sed lacus et. Neque sit ut pede ac
            euismod orci nunc Integer Proin tristique. Phasellus egestas porttitor natoque senectus
            turpis condimentum et consectetuer auctor amet.
            </p>
            <p>Lorem ipsum dolor sit amet consectetuer felis tortor Sed lacus et. Neque sit ut pede ac
            euismod orci nunc Integer Proin tristique.
            </p>
            <p>Lorem ipsum dolor sit amet consectetuer felis tortor Sed lacus et. Neque sit ut pede ac
            euismod orci nunc Integer Proin tristique. Phasellus egestas porttitor natoque senectus
            turpis condimentum et consectetuer auctor amet.
            </p>
            <p>Lorem ipsum dolor sit amet consectetuer felis tortor Sed lacus et. Neque sit ut pede ac
            euismod orci nunc Integer Proin tristique.
            </p>
            <p>Lorem ipsum dolor sit amet consectetuer felis tortor Sed lacus et. Neque sit ut pede ac
            euismod orci nunc Integer Proin tristique. Phasellus egestas porttitor natoque senectus
            turpis condimentum et consectetuer auctor amet.
            </p>
            <p>Lorem ipsum dolor sit amet consectetuer felis tortor Sed lacus et. Neque sit ut pede ac
            euismod orci nunc Integer Proin tristique. Phasellus egestas porttitor natoque senectus
            turpis condimentum et consectetuer auctor amet.
            </p>
            <p>Lorem ipsum dolor sit amet consectetuer felis tortor Sed lacus et. Neque sit ut pede ac
            euismod orci nunc Integer Proin tristique. Phasellus egestas porttitor natoque senectus
            turpis condimentum et consectetuer auctor amet.
            </p>
            <p>Lorem ipsum dolor sit amet consectetuer felis tortor Sed lacus et. Neque sit ut pede ac
            euismod orci nunc Integer Proin tristique.
            </p>
            <p>Lorem ipsum dolor sit amet consectetuer felis tortor Sed lacus et. Neque sit ut pede ac
            euismod orci nunc Integer Proin tristique. Phasellus egestas porttitor natoque senectus
            turpis condimentum et consectetuer auctor amet.
            </p>
            <p>Lorem ipsum dolor sit amet consectetuer felis tortor Sed lacus et. Neque sit ut pede ac
            euismod orci nunc Integer Proin tristique.
            </p>
            <p>Lorem ipsum dolor sit amet consectetuer felis tortor Sed lacus et. Neque sit ut pede ac
            euismod orci nunc Integer Proin tristique. Phasellus egestas porttitor natoque senectus
            turpis condimentum et consectetuer auctor amet.
            </p>
        </div>
        <div id="footer">Company Name 2010 etc.</div>
    </div><!-- end main -->
</div><!-- end wrap -->
 
</body>
</html>

I really appreciate the help. I suppose it’s pretty easy when you know how but I still appreciate the effort to respond and you won’t believe how many people I asked who just couldn’t do it.

In fact the example you have provided is more or less the actual layout I am trying to build.

I have used that as a base and now created a layout I think I will use for the site I am creating.
www.page-test.co.uk/css4.html

It’s basically your layout with a few tweaks.

Don’t worry I should be done if I can get help with these last questions. Thanks again.

(1) In Safari and Chrome when the browser is open so there is little free space between edge of the browser and the content, it seems to get covered somehow. Example here: http://page-test.co.uk/safari.gif - I don’t see this happening on yours, must be something I have done.

(2) In Opera Mobile and Opera Mini neither mine nor your site displays correctly. http://www.opera.com/mobile/demo/ is the test site and I have uploaded an image here http://page-test.co.uk/opera.gif where you can see how it displays. Any ideas - even your example doesn’t display which shocks me a bit? I also find this problem on Windows Mobile browsers (which does the same but also aligns everything to the left regardless).

(3) nav bar in my example won’t position top left. I can set a margin-top minus value but if I put more height in the header it pushes the nav bar down. I know this is something I’m doing.

(4) I want the entire left panel (left nav bar) to stay where it is and only the right side to vertically scroll (if there is enough content to require it). Is this possible?

(5) I know you said I can’t set a % width div box the same as the other ones, but if you see my example I have just given a 90% width. Is there a better way than this (even if not perfect?) Surely there is a better way than this???

(1) Very easy I know but how would I prevent the content moving under the nav bar.

If screen width was less than 1000 I would prefer it to stay and show a scrollbar. If over 1000 no scrollbar needed as should asjust in size automatically.
Hi,
It’s time to set up a main wrapping div. Then float in a left column and nest a UL in it. We could just float a UL left but we might as well go ahead and set a left column so more content can go under the menu (ul).

With the new page wrapper in place we can just move the min-max widths there. It sounds like you want three inner divs to stretch across if the viewport is wide enough, and if not limit it to two of them.

Here is an example that does what I just explained.

(2) In my example I have added a “Page Title” box. Is there any way to make this exactly the same width as the boxes beneath them (this will be hard as when scrolling and changing content the boxes can of course change).
No, it will not be possible to keep it the same width as the inner divs. The side margins on the inside of Content are constantly changing. I just now noticed this ? but I did set up a main header in the lnk above.

(3) Is it possible for the 3rd line in my example to be aligned on the left of the block. So all centered but if there is an odd number to align left.
That ain’t going to happen either. You can’t center them all with text-align center and then tell the last div to ignore or change it’s parent’s text-align value to left. Even if you floated the last one it would go all the way to the left and you could not set a margin either since the outside margins are changing constantly.

You can’t have your cake and eat it too :slight_smile:

(4) Is there a way to force seperation sometimes? So if I had 16 divs which naturally displayed as 4 rows of 4, could I tell it to seperate after each second one? (I have tried adding clear:both but does nothing)
clear:both does nothing because we are not dealing with floats.

You could nest a series of four divs in subwrapping divs that are nested in Content. Then you could set a bottom margin on it if that is what you are saying.

Although one thing I am finding a problem with is on some mobile phones the nav bar is sliding around when you wouldn’t expect to, and one mobile browser all you can see is the nav bar as everything else just slides around underneath.

My idea is some javascript (that detects screen width < 1024) that flattens everything down so this can’t happen (when scrolling horizontal, everything would scroll at the cost of any vertical right panel scrolling) - what do you think? which CSS would I change?

BTW, What are you going to do with all those 16 divs or whatever the amount may be. If they do not contain multiple paragraphs then you can eliminate all those divs and just style the <p> tags as the divs are now. That code can be cut in half is what I am suggesting.
Tell me what the purpose of those divs are before I start reworking the code.

Thanks again. Here is my final layout based on all your help:
http://page-test.co.uk/finalfull.html

(1) Any chance of looking at it and seeing if there are any obvious CSS mistakes? I’ve basically messed around with your orginal one so no doubt something isn’t standards compliant now that I have changed it all. As far as I am aware it is basically all done and works on nearly all desktop browsers.

(2) I think I have found what the problem is with the layouts on mobiles. Remember, even your layout didn’t display correctly on some mobiles - even modern ones on touch screen phones which are supposed to be full web browsing. It doesn’t seem to be anything with the CSS code actually but something the browser does to apparently help the user. The browser will wrap everything to fit the screen width. The problem is that as I have a nav bar which doesn’t move this is pretty worthless really. Any idea what to do about this or even what it is called so I can search in Google? I can’t even think what to search for.

Hi,
Yeah they both use the Webkit engine. The problem was the 250px left margin I had on Content. I had that in there before I set a placeholding height on the #left float.

The reason the fixed position nav is nested in the #left float is to fix an IE8 bug. Fixed position elements position themselves from the viewport. However, if they are nested in another element and there are no offset values then they will fix themselves according to the parent’s coordinates (the float).

Updated Page working in Webkit now.

It seems I discovered something else about Webkit too. :rolleyes:
Webkit will not allow [FONT=Courier New]word-spacing[/FONT]: to have an effect on inline-blocks.

I was using that as an alternative to font-size:0; to kill the whitespace between the inline-blocks. The advantage of using word-spacing is that you are free to use ems and % for your font-sizes as long as you reset the children to word-spacing:normal;

When using font-size:0; on the parent all child font-sizes must be reset in pixels which is really not desirable.

Even when using font-size:0; it appears that Webkit still insists on giving 1px between the inline-blocks. That’s close but it is still not correct, seems to be something that Webkit needs to get straightened out.

Welcome to X-Browser inconsistencies :slight_smile:

Working from the code in your link it would look something like this when using inline-block.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Centered Inline-Block Divs</title>

<style type="text/css">

#content { 
    width:92%;
    min-width:700px;
    max-width:1350px;
    margin:0 auto;
    padding-top:6px;
    text-align:center;/*center the list items*/
    word-spacing:-.5em; /*kill whitespace nodes on inline-blocks*/
    border:2px solid #0000CC;
}    
.box {
    width:300px;
    display:-moz-inline-box; /* for FF2 (inline-box must be used for shrink wrapping)*/
    display:inline-block; /* modern browsers */
    margin:0 3px 6px;/*optional*/
    word-spacing:normal; /*reset from #content*/
    text-align:left; /*reset from #content*/
    border: 1px solid #000;
}
* html .box {display:inline;}/* inline-block trip for IE6 */
* + html .box {display:inline;}/* inline-block trip for IE7 */

</style>

</head>
<body>

<div id="content">
    <div class="box">box</div>
    <div class="box">box</div>
    <div class="box">box</div>
    <div class="box">box</div>
    <div class="box">box</div>
</div>

</body>
</html>