Floating elements not staying within its container

Question

I'm new to HTML5 and CSS3 coding, and I'm trying to get the social media icons to stay within its header container. As soon as I float it right, it does go towards the right where I want, but doesn't stay within the header elements.

/************************************
General: Body
************************************/

@charset "utf-8";
 body {
  width: 100%;
}

header, main, section, article,
footer {
    display: block;
}

html, body, header, nav, main,
section, article, aside, footer,
h1, h2, h3, p, a {
    margin: 0;
    padding: 0;
}

/************************************
Fonts
************************************/

h1 {
    font-family: 'Coming Soon', cursive;
    color: #FFFFFF;
}

h2 {
    font-family: 'Oswald', sans-serif;
    color: #44414E;
}

h3 {
    font-family: 'Oswald', sans-serif;
    color: #44414E;
}

p {
    font-family: 'Lato', sans-serif;
    color: #44414E;
}
/************************************
Page Wrapper 
************************************/

#pageWrapper {
  width: 85%;
  margin: 0 auto;
}
/************************************
Header
************************************/

header {
  background: #B6C3B8;
  width: 85%;
  margin: 0 auto;
  padding: 10px 10px;
}

#header_name {
  display: block;
  float: left;
}

#social_icons_1 {
  display: block;
  float: right;
}
/************************************
Main
*************************************/

main {
  width: 85%;
  margin: 0 auto;
}

.button {
  border: 3px solid #0c222e;
  background: #3e779d;
  background: -webkit-gradient(linear, left top, left bottom,   from(#b6ccdb), to(#3e779d));
  background: -webkit-linear-gradient(top, #b6ccdb, #3e779d);
  background: -moz-linear-gradient(top, #b6ccdb, #3e779d);
  background: -ms-linear-gradient(top, #b6ccdb, #3e779d);
  background: -o-linear-gradient(top, #b6ccdb, #3e779d);
  background-image: -ms-linear-gradient(top, #b6ccdb 0%, #3e779d 100%);
  padding: 13px 26px;
  -webkit-border-radius: 17px;
  -moz-border-radius: 17px;
  border-radius: 17px;
  -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(255, 255, 255, 0.4) 0 1px 0;
  -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(255, 255, 255, 0.4) 0 1px 0;
  box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(255, 255, 255, 0.4) 0 1px 0;
  text-shadow: #7ea4bd 0 1px 0;
  color: #000305;
  font-size: 19px;
  font-family: helvetica, serif;
  text-decoration: none;
  vertical-align: middle;
}
.button:hover {
  border: 3px solid #0a3c59;
  text-shadow: #1e4158 0 1px 0;
  background: #bacbd6;
  background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#bacbd6));
  background: -webkit-linear-gradient(top, #65a9d7, #bacbd6);
  background: -moz-linear-gradient(top, #65a9d7, #bacbd6);
  background: -ms-linear-gradient(top, #65a9d7, #bacbd6);
  background: -o-linear-gradient(top, #65a9d7, #bacbd6);
  background-image: -ms-linear-gradient(top, #65a9d7 0%, #bacbd6 100%);
  color: #fff;
}
.button:active {
  text-shadow: #1e4158 0 1px 0;
  border: 3px solid #0a3c59;
  background: #65a9d7;
  background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#bacbd6));
  background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
  background: -moz-linear-gradient(top, #3e779d, #65a9d7);
  background: -ms-linear-gradient(top, #3e779d, #65a9d7);
  background: -o-linear-gradient(top, #3e779d, #65a9d7);
  background-image: -ms-linear-gradient(top, #3e779d 0%, #65a9d7 100%);
  color: #ffffff;
}
/************************************
Mid Content
*************************************/

/************************************
Lower Content
*************************************/

/************************************
footer
*************************************/

footer {
  background: #B6C3B8;
  width: 85%;
  margin: 0 auto;
  padding: 10px 10px;
}
#footer p {
  color: #FFFFFF;
  text-align: center;
}

<!DOCTYPE html>
<html>

<head>
  <title>Example Webpage</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="">
  <link rel="stylesheet" type="text/css" href="styles/normalize.css">
  <link href='http://fonts.googleapis.com/css?family=Coming+Soon|Lato|Oswald' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="styles/styles.css">
</head>

<body>
  <div id="pageWrapper">

    <header>
      <h1 class="header_name">Example Webpage</h1>
      <div id="social_icons_1">
        <a href="#">
          <img src="image/facebook-icon.png" alt="Facebook Logo">
        </a>
        <a href="#">
          <img src="image/twitter-icon.png" alt="Twitter Logo">
        </a>
        <a href="#">
          <img src="image/rss-icon.png" alt="RSS Feed Logo">
        </a>
      </div>
    </header>
    <!-- End Header -->

    <main>

      <section id="presentational_content">
        <article>
          <h2>Welcome to my Portfolio</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquet purus blandit, interdum lorem vitae, maximus nisl. Suspendisse posuere sem est, vitae varius sapien sollicitudin sagittis.</p>
          <a href='#' class='button'>Veiw My Portfolio</a>
        </article>
        <img src="image/image_placeholder.png" alt="Image Placeholder">
      </section>
      <!-- End Presentational Content Section-->

      <section id="main_content">
        <article>
          <h3>About</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed dolor dictum, varius neque id, efficitur magna. Vivamus scelerisque nisl a nulla euismod tincidunt. Etiam facilisis vehicula ipsum. Cras interdum vestibulum velit, at imperdiet
            justo mattis at. Etiam sed diam et magna venenatis venenatis sit amet quis massa. Integer ac mi eu risus condimentum interdum vel id ex. Vestibulum tempor pulvinar ante, at condimentum nunc ornare et.</p>
        </article>
        <article>
          <h3>Services</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed dolor dictum, varius neque id, efficitur magna. Vivamus scelerisque nisl a nulla euismod tincidunt. Etiam facilisis vehicula ipsum. Cras interdum vestibulum velit, at imperdiet
            justo mattis at. Etiam sed diam et magna venenatis venenatis sit amet quis massa. Integer ac mi eu risus condimentum interdum vel id ex. Vestibulum tempor pulvinar ante, at condimentum nunc ornare et.</p>
        </article>
        <article>
          <h3>Contact</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed dolor dictum, varius neque id, efficitur magna. Vivamus scelerisque nisl a nulla euismod tincidunt. Etiam facilisis vehicula ipsum. Cras interdum vestibulum velit, at imperdiet
            justo mattis at. Etiam sed diam et magna venenatis venenatis sit amet quis massa. Integer ac mi eu risus condimentum interdum vel id ex. Vestibulum tempor pulvinar ante, at condimentum nunc ornare et.</p>
        </article>
      </section>
      <!-- End Main Content Section-->

      <section id="additional_content">
        <table width="50%" border="0" cellingpadding="5">
          <tr>
            <td align="center" valign="center">
              <a href="#">
                <img src="image/image_placeholder_2.png">
              </a>
            </td>
            <td align="center" valign="center">
              <a href="#">
                <img src="image/image_placeholder_2.png">
              </a>
            </td>
          </tr>
          <tr>
            <td align="center" valign="center">
              <a href="#">
                <img src="image/image_placeholder_2.png">
              </a>
            </td>
            <td align="center" valign="center">
              <a href="#">
                <img src="image/image_placeholder_2.png">
              </a>
            </td>
          </tr>
        </table>
      </section>
      <!-- End Additional Content Section-->

    </main>
    <!-- End Main -->

    <footer>

      <p class="copy">&copy;Example Webpage 2015. All Rights Reserved.</p>
      <div id="social_icons_2">
        <a href="#">
          <img src="image/facebook-icon.png" alt="Facebook Logo">
        </a>
        <a href="#">
          <img src="image/twitter-icon.png" alt="Twitter Logo">
        </a>
        <a href="#">
          <img src="image/rss-icon.png" alt="RSS Feed Logo">
        </a>
      </div>

    </footer>
    <!-- End Footer -->

  </div>
  <!-- End of pageWrapper -->

</body>

</html>

score 2 · Accepted Answer · edited May 23 '17 at 12:28

You need to use a clearfix

A clearfix is a way for an element to automatically clear its child elements, so that you don't need to add additional markup. It's generally used in float layouts where elements are floated to be stacked horizontally. The clearfix is a way to combat the zero-height container problem for floated elements

Source

More info about `clearfix` here

More info about `floats` here

See snippet below:

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
/************************************
Header
************************************/

header {
  background: #B6C3B8;
  width: 85%;
  margin: 0 auto;
  padding: 10px 10px;
}
.header_name {
  display: block;
  float: left;
}
#social_icons_1 {
  display: block;
  float: right;
}

<header class="clearfix">
  <h1 class="header_name">Example Webpage</h1>

  <div id="social_icons_1">
    <a href="#">
      <img src="image/facebook-icon.png" alt="Facebook Logo">
    </a>
    <a href="#">
      <img src="image/twitter-icon.png" alt="Twitter Logo">
    </a>
    <a href="#">
      <img src="image/rss-icon.png" alt="RSS Feed Logo">
    </a>

  </div>
</header>
<!-- End Header -->

P.S. As @Ivan Ivanov mention you were trying to style the h1 as ID while you have it markup as class on your HTML

score 0 · Answer 2 · answered Jan 26 '15 at 02:52

0

Increase the padding of the top and bottom borders of the 'header' tag to >= 16px , i.e.,

header {
  background: #B6C3B8;
  width: 85%;
  margin: 0 auto;
  padding: 20px 10px;
}

This brings the social icon logos within the 'header' tags.

In such cases, it does a lot of help if you inspect the elements by right clicking on the page and clicking 'inspect element'. This lets you adjust the values of the styles 'dynamically' and see the results of such variations instantaneously.

answered Jan 26 '15 at 02:52

Python_user

1,378
3
12
25

Thanks both of you for your reply's, after using the inspect function I see that div is actually taking up the same space for the h1 block element. Adding 50px of height and using the clear both rule seemed to allow the element back into its parent element. Thanks once again. – user42587 Jan 26 '15 at 07:09

score 0 · Answer 3 · answered Jan 26 '15 at 09:08

I noticed there is an error in your CSS. In the HTML you use class for the <h1> tag but you're trying to style it as an ID in the CSS. HTML:

<h1 class="header_name">Example Webpage</h1>

CSS:

#header_name {
    display: block;
    float: left;
}

So it should look like this:

.header_name {
    display: block;
    float: left;
}

Once you fix that you should clear after the elements in the header as it was describe in the previous answer or just use one of these. Option 1:

header:after { content: ''; display: table; clear: both; }

Option 2:

header { overflow: hidden; }

The second variant will work but it's not recommended because overflow: hidden will hide everything outside the and if you have for example a dropdown menus they won't be visible. So simply use the first one.

P.S. Just an advice - it's better to use classes for styling in stead of IDs. That way you will avoid a duplication of code later if you have similar elements on different places.

Floating elements not staying within its container

3 Answers3

More info about clearfix here

More info about floats here

More info about `clearfix` here

More info about `floats` here