incorrect css layout in div within a div

Question

enter image description here

I want to produce a simple header with an orange background and a small div inside of it (centered) and have a "sign in" with social links floated to the right within the div.

But with the code below, seems like division header-top-bar doesn't expand accordingly with container in it. (I set the container to blue for testing). Also there is no margin setting so why does it still have a bit of white space around the header?

 <div id="main-wrapper">
    <header id="header">
        <div class="header-top-bar">
            <div class="container">
                <div class="header-login">
                            <a href="#">Sign In / Register</a>  
                        </div>
                        <!-- end .header-login -->
                        <!-- Header Social -->
                        <ul class="header-social">
                            <li><a href="#"><i class="fa fa-facebook-square"></i></a>
                            </li>
                            <li><a href="#"><i class="fa fa-twitter-square"></i></a>
                            </li>
                            <li><a href="#"><i class="fa fa-google-plus-square"></i></a>
                            </li>
                            <li><a href="#"><i class="fa fa-linkedin-square"></i></a>
                            </li>
                            <li><a href="#"><i class="fa fa-pinterest-square"></i></a>
                            </li>
                        </ul>

            </div> <!-- end .container -->
        </div>

#main-wrapper { overflow: hidden; }

#header { position: relative; }

#header a { text-decoration: none; }

.header-top-bar {
  padding: 0px 0 0px 0;
  background: #FF7F00;
  color: #FF7F00;
  }

.header-top-bar p { 
 position: relative;
 float: right;
 } 

.header-top-bar{
  padding-right: 0px;
  padding-left: 0px;
  margin-right: auto;
  margin-left: auto;
  border: 1px solid black;
  }

.container 
{
  position: relative;
 float: right;
 margin-top: 0px;
 border: 1px solid black;
 background-color: blue;
 }

.header-login a {
 color: #fefefe;
font-size: 13px;
}

 .header-login a:hover { color: #080000; }

.header-login a:last-child { margin: 0 0x 0 0px; }

.header-social {
  position: relative;
  margin: 0 auto;
  padding-top: 0px;
  float: left;
 }

.header-social > li {
  display: inline;
  margin: 0 2px;
 }

.header-social > li > a {
 color: #ffffff;
  font-size: 18px;
  line-height: 30px;
  }

.header-social > li > a:hover {
  color: #080000;
}

Sorry for the messy code.

I added overflow:auto; to header-top-bar seems fixed a bit but still lots of problems — user2381130
– user2381130, Commented May 12, 2015 at 13:14
do you get the gap because of the user-agent css ? If not done in your css, add * { margin: 0; padding: 0; } to your css (at one of the first lines) to reset the margin and padding from user agent stylesheet(s) — bart s
– bart s, Commented May 12, 2015 at 13:18

Dmitriy · Accepted Answer · 2015-05-12 13:05:06Z

add overflow: hidden; .header-top-bar

#main-wrapper { overflow: hidden; }

#header { position: relative; }

#header a { text-decoration: none; }

.header-top-bar {
  padding: 0px 0 0px 0;
  background: #FF7F00;
  color: #FF7F00;
    overflow: hidden;
  }

/*.header-top-bar p { 
 position: relative;
 float: right;
 } */

.header-top-bar{
  padding-right: 0px;
  padding-left: 0px;
  margin-right: auto;
  margin-left: auto;
  border: 1px solid black;
  }

.container 
{
  position: relative;
 float: right;
 margin-top: 0px;
 border: 1px solid black;
 background-color: blue;
 }

.header-login a {
 color: #fefefe;
font-size: 13px;
}

 .header-login a:hover { color: #080000; }

.header-login a:last-child { margin: 0 0x 0 0px; }

.header-social {
  position: relative;
  margin: 0 auto;
  padding-top: 0px;
  float: left;
 }

<div id="main-wrapper">
    <header id="header">
        <div class="header-top-bar">
            <div class="container">
                <div class="header-login">
                            <a href="#">Sign In / Register</a>  
                        </div>
                        <!-- end .header-login -->
                        <!-- Header Social -->
                        <ul class="header-social">
                            <li><a href="#"><i class="fa fa-facebook-square"></i></a>
                            </li>
                            <li><a href="#"><i class="fa fa-twitter-square"></i></a>
                            </li>
                            <li><a href="#"><i class="fa fa-google-plus-square"></i></a>
                            </li>
                            <li><a href="#"><i class="fa fa-linkedin-square"></i></a>
                            </li>
                            <li><a href="#"><i class="fa fa-pinterest-square"></i></a>
                            </li>
                        </ul>

            </div> <!-- end .container -->
        </div>

user4563161 · Accepted Answer · 2015-05-12 13:08:38Z

is this what your trying to achieve.

#main-wrapper {
  overflow: hidden;
}
#header {
  position: relative;
}
#header a {
  text-decoration: none;
}
.header-top-bar {
  padding: 0px 0 0px 0;
  background: #FF7F00;
  color: #FF7F00;
}
.header-top-bar p {
  position: relative;
  float: right;
}
.header-top-bar {
  padding-right: 0px;
  padding-left: 0px;
  margin-right: auto;
  margin-left: auto;
  border: 1px solid black;
  display: table;
  width: 100%;
  table-layout: fixed;
}
.left-container {
  display: table-cell;
  vertical-align: top;
  width: 100%;
}
.container {
  display: table-cell;
  vertical-align: top;
  width: 100%;
  position: relative;
  text-align: left;
  margin-top: 0px;
  border: 1px solid black;
  background-color: blue;
}
.header-login a {
  color: #fefefe;
  font-size: 13px;
}
.header-login a:hover {
  color: #080000;
}
.header-login a:last-child {
  margin: 0 0x 0 0px;
}
.header-social {
  position: relative;
  margin: 0 auto;
  padding-top: 0px;
}
.header-social > li {
  display: inline;
  margin: 0 2px;
}
.header-social > li > a {
  color: #ffffff;
  font-size: 18px;
  line-height: 30px;
}
.header-social > li > a:hover {
  color: #080000;
}

<div id="main-wrapper">
  <header id="header">
    <div class="header-top-bar">
      <div class="left-container"></div>
      <div class="container">
        <div class="header-login">
          <a href="#">Sign In / Register</a> 
        </div>
        <!-- end .header-login -->
        <!-- Header Social -->
        <ul class="header-social">
          <li><a href="#"><i class="fa fa-facebook-square"></i></a>
          </li>
          <li><a href="#"><i class="fa fa-twitter-square"></i></a>
          </li>
          <li><a href="#"><i class="fa fa-google-plus-square"></i></a>
          </li>
          <li><a href="#"><i class="fa fa-linkedin-square"></i></a>
          </li>
          <li><a href="#"><i class="fa fa-pinterest-square"></i></a>
          </li>
        </ul>

      </div>
      <!-- end .container -->
    </div>

vinothavn · Accepted Answer · 2015-05-12 13:21:28Z

1

Have a look at this.

 <head>
	<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">
 </head>
 <div id="main-wrapper">
    <header id="header">
        <div class="header-top-bar">
            <div class="container">
                        <!-- Header Social -->
                        <ul class="header-social">
                            <li><a href="#"><i class="fa fa-facebook-square"></i></a>
                            </li>
                            <li><a href="#"><i class="fa fa-twitter-square"></i></a>
                            </li>
                            <li><a href="#"><i class="fa fa-google-plus-square"></i></a>
                            </li>
                            <li><a href="#"><i class="fa fa-linkedin-square"></i></a>
                            </li>
                            <li><a href="#"><i class="fa fa-pinterest-square"></i></a>
                            </li>
                        </ul>
					<div class="header-login">
                            <a href="#">Sign In / Register</a>  
                     </div>

            </div> <!-- end .container -->
        </div>
<style>
#main-wrapper { overflow: hidden;background: #ff7f00; }

#header { position: relative; }

#header a { text-decoration: none; }

.header-top-bar {
  padding: 0px 0 0px 0;
  background: #FF7F00;
  color: #FF7F00;
  }

.header-top-bar p { 
 position: relative;
 float: right;
 } 

.header-top-bar{
  padding-right: 0px;
  padding-left: 0px;
  margin-right: auto;
  margin-left: auto;
  border: 1px solid black;
  height:11%;
  }

.container 
{
  float: right;
    margin-top: 4px;
    position: relative;
    width: 52%;
 }

.header-login a {
 color: #fefefe;
font-size: 13px;
}

 .header-login a:hover { color: #080000; }

.header-login a:last-child { margin: 0 0x 0 0px; }

.header-social {
  position: relative;
  margin: 0 auto;
  padding-top: 0px;
  float: left;
 }

.header-social > li {
  display: inline;
  margin: 0 2px;
 }

.header-social > li > a {
 color: #ffffff;
  font-size: 18px;
  line-height: 30px;
  }

.header-social > li > a:hover {
  color: #080000;
}
</style>

answered May 12, 2015 at 13:21

vinothavn

5471 gold badge5 silver badges19 bronze badges

3 Comments

user2381130 Over a year ago

How can I make the container automatically center itself within mother div(the orange top bar), cuz I think once its centered then I can float everything to the right. make it look symmetric

user2381130 Over a year ago

.container { position: relative; margin-top: 4px; border: 1px solid black; overflow:auto; width: 50%; margin: 0 auto; }

vinothavn Over a year ago

I'm glad that I could help you

bart s · Accepted Answer · 2015-05-12 13:22:25Z

1

It may be the user agent stylesheet settings for margin and/or padding

add

* { margin: 0; padding: 0; }

to your stylesheet to reset the user agent margin and padding

answered May 12, 2015 at 13:22

bart s

5,1202 gold badges38 silver badges58 bronze badges

Collectives™ on Stack Overflow

incorrect css layout in div within a div

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related