How to create a box with header with css styling?

[anirbankundu]

I am trying to create a box with a header. I am using bootstrap for the css [http://getbootstrap.com/]. The html and css I have for this is as below. The problem I have is The Header should be aligned with the container. Any idea of how this can be achieved. I have posted the image @ [http://stackoverflow.com/questions/21768955/box-with-header-using-bootstrap]

<div class="header container">
    Header
</div>
<div class="container">
    <div class="mainbody">
        main body
    </div>
    <div class="footer">
        footer
    </div>
</div>

CSS Code :-

`.container:before, .container:after {
display:table;
content:””;
}

.container:after {
clear:both;
}

.container {
width:500px;
margin:0 auto;
border:1px solid #fff;
box-shadow:0px 2px 7px #292929;
-moz-box-shadow: 0px 2px 7px #292929;
-webkit-box-shadow: 0px 2px 7px #292929;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
background-color:#ffffff;
}

.mainbody {
height:250px;
width:500px;
border: solid #eee;
border-width:1px 0;
}

.header, .footer {
height: 40px;
width:50px;
border : 1px solid red;
padding: 5px;
}

.footer {
background-color: whiteSmoke;
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
}`

[Paulie_D]

Could you make a Codepen rather than just dropping in a code dump.

[Author]

Posts