Twitter Bootstrap Question posted in

How can I vertically align two divs inside of another div? – Twitter bootstrap

I am trying to design my site header with html and css. My header is made up of one long banner at the top. This banner is divided up into two divs: #banner-left and #banner-right. #banner-right is divided up into two more divs: #banner-top and #banner-#bottom. The top div is my social links navigation and the bottom div is the main navigation.

I would like the social links to be aligned to the vertical middle of the top half of the right banner and the main navigation to be aligned to the vertical middle of the bottom half of the banner. The problem is that the social links are at the bottom of the top half and the main nav is at the top of the bottom half. Here is a jsFiddle

header {
  background: #D7DADB;
  margin: 0px;
  padding: 0px 15px;
  border-bottom: 15px solid #FC4349;
}
header #banner {
  padding: 15px;
  display: table;
  position: relative;
  width: 100%;
}
header #banner #banner-left {
  padding: 0px 25px 0px 0px;
  display: table-cell;
  vertical-align: middle;
}
header #banner #banner-left h1 {
  font-size: 3em;
  color: #FC4349;
  font-family: PowerChord;
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: #fff;
}
header #banner-left p {
  font-size: 2em;
  color: #2C3E50;
}
header #banner #banner-right {
  border-left: 1px solid #6DBCDB;
  padding: 15px;
  overflow: auto;
  display: table-cell;
  vertical-align: middle;
  text-align: right;
}
header #banner #banner-right #banner-top {
  border-bottom: 1px solid #6DBCDB;
}
header #banner #banner-right #banner-top ul {
  list-style: none;
  display: table-cell;
  vertical-align: middle;
}
header #banner #banner-right #banner-top ul > li {
  display: inline-block;
  margin-right: 15px;
}
header #banner #banner-right #banner-top ul > li a {
  font-size: 2em;
}
header #banner #banner-right #banner-bottom nav {
  display: table-cell;
  vertical-align: middle;
}
header #banner #banner-right #banner-bottom nav ul {
  list-style: none;
}
header #banner #banner-right #banner-bottom ul > li {
  display: inline-block;
}
<header>
  <div id="banner">
    <div class="container">
      <!--Bootstrap container -->
      <div id="banner-left">
        <h1>Site Name</h1>
        <p>Some catchy slogan...</p>
      </div>
      <div id="banner-right">
        <div id="banner-top">
          <ul>
            <li><a href="#"><i class="fa fa-facebook"></i></a>
            </li>
            <li><a href="#"><i class="fa fa-twitter"></i></a>
            </li>
            <li><a href="#"><i class="fa fa-instagram"></i></a>
            </li>
            <li><a href="#"><i class="fa fa-linkedin"></i></a>
            </li>
          </ul>
        </div>
        <div id="banner-bottom">
          <nav>
            <ul>
              <li><a href="#">Home</a>
              </li>
              <li><a href="#">About</a>
              </li>
              <li><a href="#">Contact</a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </div>
</header>
Tags:

2

Answers


  1. 0

    you can use margins and padding to adjust where they are in relation to vertical space, for example:

    header #banner #banner-right #banner-top {
    border-bottom: 1px solid #6DBCDB;
  margin-bottom:15%;
  padding-bottom:15%;
}
    Login or Signup to reply.
  2. 0 
    #banner-top 
{
height:50%;
width:100%;
float:left;
}
#banner-bottom
{
height:50%;
width:100%;
float:left;
}

    Adjust the height and width accordingly but with the float function it’ll mean that #banner-bottom will attempt to float to the left of #banner-top however because it can’t do that within the #banner-right it’ll automatically drop down underneath #banner-top, this means it’ll be responsive no matter the size of the device and is cross-platform compatible.#
    Ideally your entire page should be using percentages as it’ll scale to the device.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search