CODEWITHSUNDEEP
htmlcss
Michele
Michele

Reputation: 8753

Aligning horizontally multiple div inside another without margins

I have 4 divs inside another in this fiddle. I can't manage to remove the space between the divs of class toolbarItem,

html

  <div id="topPanelContainer">
    <div id="toolbar">
      <div id="toolbarItem1" class="toolbarItem"></div>
      <div id="toolbarItem2" class="toolbarItem"></div>
      <div id="toolbarItem3" class="toolbarItem"></div>
      <div id="toolbarItem4" class="toolbarItem"></div>
    </div>
  </div>

CSS

#topPanelContainer {
    height: 30px;
    background: lightgrey;
    text-align: center;
}
#toolbar{
    height:30px;
    width:800px;
    background:grey;
    margin: 0 auto;
}

.toolbarItem {
    height: 30px; width: 100px;
    background: blue;
    display: inline-block;
    position:relative;
    margin: 0;
}

I would expect the four div to stay one just after the other in place of:

enter image description here

Upvotes: 2

Views: 6561

Answers (1)

Vikas Ghodke
Vikas Ghodke

Reputation: 6665

By Default inline-block adds some margin around the element.

You can remove this extra gap by replacing your html by the below code

<div id="topPanelContainer">
    <div id="toolbar">
        <div id="toolbarItem1" class="toolbarItem"></div><div id="toolbarItem2" class="toolbarItem"></div><div id="toolbarItem3" class="toolbarItem"></div>
        <div id="toolbarItem4" class="toolbarItem"></div>
    </div>
</div>

And to get all of them in to one line you need to add float:left; to .toolbarItem

.toolbarItem {
    height: 30px;
    width: 100px;
    background: blue;
    display: inline-block;
    position:relative;
    margin: 0 auto;
    padding: 0px;
    border: 0px;
    float:left;
}

See Them Demo Here

Check out this article for more info about this -- >> http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Upvotes: 3

Related Questions