CODEWITHSUNDEEP
htmlcss
Harpreet Singh
Harpreet Singh

Reputation: 31

inline-block elements not aligning horizontally

I am unable to align inline-block elements horizontally. From what I've found, there is some baseline alignment in inline-block elements but I couldn't get how. It is working if I use 'vertical-align : top'. I have the following doubts :

  1. How is the baseline positioned in this sample code.
  2. On removing the 'display : inline-block' from the .icon-bar class, the first three elements align properly. How?
  3. On marking the ul as 'display : inline' after the previous step, it gets aligned. But not with 'display : inline-block'
  4. How to align the elements horizontally. Can it be done without the 'vertical-align' property?
  5. Can elements marked as display:inline be parents of elements display:block. Similarly, does 'display : inline-block' parent and 'display:block' child cause any problems? Also, does a 'display:block' child in a 'display: inline-block' parent extend to full page width or the parents width?

body {
  margin: 0;
}
div.header {
  background-color: #f5df5f;
  height: 50px;
}
.drawer_section,
.logo_section,
.search_section,
.header_links_section {
  //vertical-align: top;
  height: 50px;
  //border: 2px thick black;
  display: inline-block;
  background: green;
  opacity: 0.5;
}
.drawer_section {
  width: 100px;
  text-align: center;
}
.logo_section,
.search_section {
  width: 200px;
  text-align: center;
}
.drawer_icon {
  display: inline-block;
  width: 30px;
  text-align: center;
  //line-height: 3px;

}
.icon-bar {
  display: inline-block;
  margin: 0;
  padding: 0;
  width: 20px;
  height: 5px;
  border-bottom: 2px solid red;
}
.header_links_section > ul {
  list-style: none;
  background-color: red;
  //display: inline;
  display: inline-block;
}
.header_links_section > ul > li {
  text-align: center;
  display: inline-block;
  background: yellow;
  width: 35px;
  //height: 15px;
  //margin: 0 5px;

}
<div class="header">
  <div class="drawer_section">
    <!-- <div class="drawer_icon">----</div> -->
    <div class="drawer_icon">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </div>
  </div>

  <div class="info_section">Hi There</div>

  <div class="search_section">
    <span class="search_bar">
				<input type="text" name="search"
					placeholder="Search" />
      </span>
  </div>
  <div class="links_section">
    <ul>
      <li><a href="#">Link1</a>
      </li>
      <li><a href="#">Link2</a>
      </li>
      <li><a href="#">Link3</a>
      </li>
    </ul>
  </div>

</div>

Please Check out here : http://codepen.io/anon/pen/ggByVv

Upvotes: 3

Views: 3760

Answers (2)

SFM
SFM

Reputation: 31

I saw your code, the elements can not be aligned as inline-block unless the container of elements has enough width to hold them inline. In your css, you have set 'width: 30px;' for '.drawer_icon' without considering each '.icon bar' width is 20px, so they won't stand inline unless you increase the width of container. if you insist to keep that width for your container and the same width for inside elements you may have to make your container horizontally scroll able.

Upvotes: 0

muratkh
muratkh

Reputation: 123

put all sections under one class name so you don't have to keep adding classes like below. vertical alignment is not set they size according to content inside divs

.drawer_icon,.logo_section,.search_section,.header_links_section {
  vertical-align: top;
  position: relative;
  display: inline-block;
}

Upvotes: 1

Related Questions