Problems having borders

Get Started
1

Hello Sitepointers.

I am having an issue, bordering my “headeri” div. The main problem, is when I use border-bottom, it borders the top. Also, when I use background-color, it doesn’t add the color to the “div”.

Here is the code

 <!DOCTYPE HTML>
<html lang = "en">
  <head>
    <title>VALUES</title>
    <link href = "style1.css" rel = "stylesheet" type = "text/css"/ >
    <meta name="keywords" content="VALUES" />
    <meta name="description" content="DESCRIPTON_VALUES." />
    <meta charset = "utf-8" />
  </head>
<body>
  <div id = "headeri" >
    <div id = "titlei">
      <h1 class = "titlec">TITLE_VALUE</h1>
      <p class = "sloganc">SLOGAN_VALUE</p>
    </div> <!-- end of titlei -->
    <div id = "followi">
    
      <!-- below is a twitter follow,  (We need to figure out if we want a small button, or a larger one(the "F", or "FOLLOW US") -->
      <a href="http://twitter.com/???????"><img src="IMAGE_SOURCE"  alt = "Image for Twitter Link" width = "???" height = "???" /></a>
           <!-- we can make them the same size, if ness -->                 
      <br />
      <!-- below is a facebook follow, (We need to figure out if we want a small button, or a larger one(the "F", or "FOLLOW US")-->
      <a href="http://facebook.com/???????/"><img src="IMAGE_SOURCE" alt = "Image for Facebook Link" width = "???" height = "???" /></a>
      <br>
    </div> <!-- end of followi -->
  </div> <!-- end of headeri -->
</body>
</html>

and here is the CSS :

/* CSS for mainpage.html() */

#headeri { 
  background-color: red;
  border-bottom: 5px solid black;}

#titlei { 
  float: left; }
  

          

#followi {
  float: right;
  border-bottom: 5px solid black;
   }

Thank you

2

The problem is the a container doesn’t wrap around its floated contents by default, so at the moment, the header has no height, and the contents are hanging out of it. An easy way to change that is to add overflow: hidden:


#headeri { 
  background-color: red;
  border-bottom: 5px solid black;
  [COLOR="#FF0000"]overflow:hidden;[/COLOR]
}

Here’s a brief explanation of containing floated elements:

http://pageaffairs.com/web/css/containing-floats/