CODEWITHSUNDEEP
htmlcsscenter
Marcel Hoffmann
Marcel Hoffmann

Reputation: 1001

Centering a div container which is next to a second div container?

I've a div container which is named headline. In this div there are two elements, a menu bar of type unordered list and a div container. I'll centering horizontally the menu bar, the other div container should dock on the right display side with a margin of 5%. How I can do this, has someone an idea?

Okay here is my litte example from jsfiddle: http://jsfiddle.net/nchm3gyj/

HTML

<div class="headline">
        <ul class="navbar">
            <li><a href="#">Home</a></li>
            <li><a href="#">Team</a></li>
            <li><a href="#">Info</a></li>
            <li><a href="#">Downloads</a></li>
        </ul>

        <img class="facebook" src="" />
</div>

CSS

* {
  margin: 0px;
  padding: 0px;
}

.headline {
  height: 60px;
  width: 100%;
  background-color: black;
  margin-top: 10px;
}

.headline .navbar{
  margin: 0px;
  padding: 0px;

  padding-left: 10px;
  padding-right: 10px;

  float: left;
  height: 60px;
  width: auto;
  background-color: yellow;
  list-style: none;
}

.headline .navbar li{
  display: inline;
} 

.headline .navbar li a {
  text-decoration: none;
  line-height: 60px;
  padding-left: 10px;
  padding-right: 10px;
}

.headline .facebook {
  width: 60px;
  height: 60px;
  margin-right: 5%;
  float: right;
}


#clear {
  clear: both;
}

Upvotes: 2

Views: 216

Answers (3)

user2279302
user2279302

Reputation:

I'm a bit unsure of what you're trying to do, is this it? Applied text-align: center to .headline and display: inline-block to .navbar then position: absolute to .facebook?

http://jsfiddle.net/nchm3gyj/42/

Upvotes: 0

wheelmaker24
wheelmaker24

Reputation: 196

I think you might need to position: absolute the facebook image and display: inline-block your menu bar (being centered by the .headline):

http://jsfiddle.net/nchm3gyj/32/

Upvotes: 0

Marc Audet
Marc Audet

Reputation: 46785

If you want your navigation bar centered in the parent block, here is one way of doing it.

Apply display: inline-block to the .navbar and text-align: center to .headline.

Assuming that you want the navigation bar centered with respect to the full width of the parent block, you need to take the image out of the content flow. You can do this by applying position: absolute to the .facebook element.

.headline {
  height: 60px;
  width: 100%;
  background-color: black;
  margin-top: 10px;
  text-align: center;
  position: relative;
}

.headline .navbar{
  margin: 0px;
  padding: 0px;

  padding-left: 10px;
  padding-right: 10px;

  height: 60px;
  width: auto;
  display: inline-block;
  background-color: yellow;
  list-style: none;
}

.headline .navbar li{
  display: inline;
} 

.headline .navbar li a {
  text-decoration: none;
  line-height: 60px;
  padding-left: 10px;
  padding-right: 10px;
}

.headline .facebook {
  position: absolute;
  top: 0;
  right: 5%;
  width: 60px;
  height: 60px;
}
<div class="headline">
        <ul class="navbar">
            <li><a href="#">Home</a></li>
            <li><a href="#">Team</a></li>
            <li><a href="#">Info</a></li>
            <li><a href="#">Downloads</a></li>
        </ul>

        <img class="facebook" src="http://placehold.it/60x60" />
</div>

Upvotes: 2

Related Questions