CODEWITHSUNDEEP
htmlcss
mackeemackee
mackeemackee

Reputation: 171

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>

Upvotes: 1

Views: 1786

Answers (3)

Mridul Kashyap
Mridul Kashyap

Reputation: 700

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?

Upvotes: 1

Santosh Khalse
Santosh Khalse

Reputation: 12710

You can do problem solve using this code

.inner{
width:100%
margin:0 auto;
display: block;
height: 100px;
}

.logo{
display:inline-block;
width:auto;
}

.contact_info{
display:inline-block;
width:auto;
}

Upvotes: 0

Atoom
Atoom

Reputation: 111

Just remove the inline-block property on your "inner" div :

.inner {
width: 80%;
margin: auto;
padding-top: 0;
padding-bottom: 40px;
background: blue;
}

.logo {
float: left;
  background: red;
}

.contact_info {
float: right;
  background: green;
}
<div class="container">
  <div class="logo">logo</div>
  <div class="contact_info">contact_info</div>
  <div class="inner">inner</div>
</div>

Upvotes: 0

Related Questions