CSS - Alignment wrong with Chrome

Question

Following my code:

<div style="width: 100%; height: 400px; border-bottom: 1px; text-align: center">
    <div style="float: left; width: 33%;">test</div>
    <div style="display: inline-block; width: 33%;">test</div>
    <div style="float: right; width: 33%;">test</div>
</div>

This is a screen in a normal resolution:

This is a screen in a very small resolution:

Why in the resolution very small divs are not all at 33%? How to solve?

Answer 1

You want something like this - right? It works at any resolution..

jsFiddle demo here - using the same markup.

Note: inline-block elements generated 2px margins, therefore the width cannot be 33% for each element. Either remove the white space, or just use something like 30% for the widths..

In the example above, I simply removed the white space. Alternatively, you can set margin:-2px; .

Answer 2

Either give all three of the width: 33% divs float: left (you could leave the last one as float: right if desired but the middle one needs a float as well) or remove the floats altogether and give them all display: inline-block; .

Answer 3

not sure why you have middle div set to display: inline-block; . div's are inheritantly display: block; . try the following css/html. works on my local machine.

<style type="text/css">

.wrap {
    width: 100%; 
    height: 400px; 
    border-bottom: 1px; 
    text-align: center;
}

.wrap div {
    float: left;
    width: 33%;
    margin: 0 auto;
    padding: 0;
}

.left {
    background-color: red;
}

.middle {
    background-color: blue;
}

.right {
    background-color: green;
}

.clearThis {
    width: 100%;
    height: 0;
    float: none;
    margin: 0 auto;
    padding: 0;
    clear:both;
}

</style>


<div class="wrap">
    <div class="left">test</div>
    <div class="middle">test</div>
    <div class="right">test</div>
    <div class="clearThis"></div>
</div>