CODEWITHSUNDEEP
htmlcssborder
Marcella Ruiz
Marcella Ruiz

Reputation: 323

My border style in CSS doesn't cover the whole body

I have tried to put it in 

   body{ border-style: double;}

also

   #form{border-style: double;}

but the border only covers a certain portion

      <!DOCTYPE html>

      <html xmlns="http://www.w3.org/1999/xhtml">
      <head runat="server">
       <title>Checkout</title>
      <link rel="stylesheet" type="text/css" href="StyleSheet.css" />
      </head>
       <body>
      <form id="form" runat="server">
         <div>
            <img src="banner.jpg" />
             <br /><br />
             <span id ="Checkout">Checkout</span><br /><br />

the border just goes around the image and checkout after I put float:left in one of the other IDs in the CSS. If I remove the float then the border works fine.

Please don't down the answer, I'm a student and I'm trying to learn step by step. So any help will be appreciated.

Upvotes: 3

Views: 1408

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206008

The problem you're facing is that body (and html) has no height set, and it will expand to embrace unfloated elements. As soon you float the inner element, the body height will fall, collapse.

You need to properly clear your floats on the containing parent element (of the floated element)
You can either:

  • set overflow:auto to the parent DIV element
  • or use a special class (again on the parent element):

.clearFix:before,
.clearFix:after {
    content: " ";
    display: table;
}
.clearFix:after {
    clear: both;
}

Additionally, if you want to add border directly to body, taking in consideration that html, body are set to 100%, in order to make visible the bottom border you might want to add

box-sizing:border-box;

to your body element.

jsBin demo of body with visible bottom border

Upvotes: 1

Related Questions