CODEWITHSUNDEEP
htmlcsslayoutcentering
FabyKennedy
FabyKennedy

Reputation: 11

CSS centering issue

i'm creating a responsive layout but i'm noticing a centering problem. I have three div (three boxes, each one next to the other) and i put them into a parent div to make the alignment. The strange thing is that on dreamweaver all works perfectly, but when i open the HTML file to test the page locally the centering is not correct. Here's the images so that you can understand better.

On Dreamweaver click

When i open the HTML page locally click

In the first screen as you can see, right and left spaces are perfectly equal, in the second screen left space is more narrow. I'd love to know why on dreamweaver is ok. Here's the code i used.

    #infoInner {
    margin-left: 0.5%;
    margin-right: -0.5%;
  }

  .boxInfo {
    padding: 2% 2%;
    margin: 0 1.5%;
    width: 26%;
    border: 1px dashed white;
    float: left;
  }

Upvotes: 0

Views: 92

Answers (2)

ham-sandwich
ham-sandwich

Reputation: 4052

Browsers by default tend to add styles to the document. This is why projects such as normalize.css exist to remove them, however, this is not the solution to your problem.

When a web browser displays code, it's the rendering engine that interprets the code to then lays it out to the screen. Chrome uses Blink, Safari uses Webkit, Internet Explorer uses Trident, and so on. After a bit of research, I see that Dreamweaver used the Presto rendering engine until version 3, and then moved to Webkit on version 4 / 5. I am not sure about the version DW6, I am also going to assume it is Webkit (EDIT WELCOMED). You should receive a similar result if you open your code up in Safari.

I recommend you open a new question with your code represented in a jsfiddle for members of SO to help you out and get it the way you want to look. However, from the description and the code posted it seems to be a rendering issue.

Further Reading:

Upvotes: 1

Matej Đaković
Matej Đaković

Reputation: 880

Can you do that on this way:

<div class="wrapper">
    <div class="item"></div>
    <div class="item center"></div>
    <div class="item"></div>
</div>

.wrapper {
    text-align: center;
    width: 100%;
}

.wrapper .item {
    float: none;
    display: inline;
    width: 32%;
    margin: 0px;
}

.wrapper .item.center{
    margin-left: 1%;
    margin-right: 1%;
}

I hope this help! :)

Upvotes: 0

Related Questions