mackeemackee mackeemackee - 4 months ago 6
HTML Question

Inline-block vs margin: 0 auto

Im trying to use

margin: auto;
at the same time as i'm using the
display: inline-block;
css. Before i'm putting in the
inline-block
code it worked fine and the
div
was centered using margin auto. But now its not working anymore.

I want the Divs logo and contact_info to be inline and the div
.inner
to be centered.

.inner {
width: 80%;
display: inline-block;
margin: auto;
padding-top: 40px;
padding-bottom: 40px;
}

.logo {
float: left;
}

.contact_info {
float: right;
}


HTML CODE

<div class="inner"> <!-- Top header -->
<div class="logo">
Logga här
</div>

<div class="contact_info">

<h4> Vikbo Bil & Motor AB </h4>
<p> Ekkällavägen 6 </p>
<p> 610 24 Vikbolandet </p>
<p> 0125 500 71 </p>

</div>
</div>

Answer

Remove inline-block from .inner class.

display: inline-block;

makes an element well..inline. meaning it only takes as much space as it's width, and allows other inline elements to take the remaining space in the page if they can fit in.

what you want, is to create the .inner div a block element, which, even though there might be extra space after the div has taken the space for it's own width, won't let any other element take up that space. meaning, it'll be the only element in that row.

so you can use margin: auto to make it center.

I see you've used float placement on logo and contact_info meaning they'll not be fitting in the div.inner. you should use display: inline-block on these divs, so they inline and inside the div.inner.

see if this fiddle satisfies all your needs?

Comments