Question

I have a box container as shown bellow

Which i want to code in a modular way so that i can use the html css structure to build any size box in width and height. I will be using Bootstrap to code the website

Which is the best way to get started.

Answer 1

I tried to keep this as similar to your example as I could with straight CSS. Given this approach, you won’t find immediate support in IE8 and lower.

The markup for the box itself is pretty simple:

<div id="modal">
  <header><h1>Something Here</h1></header>
  <section>
    <p>Pellentesque habitant morbi tristique...</p>
  </section>
</div>

The CSS for this markup can be found below the preview image below.

Demo: http://jsbin.com/ogesuf/5/edit

<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  #modal {
    width: 600px;
    border: 1px solid #CCC;
    box-shadow: 0 1px 5px #CCC;
    border-radius: 5px;
    font-family: verdana;
    margin: 25px auto;
    overflow: hidden;
  }
  #modal header {
    background: #f1f1f1;
    background-image: -webkit-linear-gradient( top, #f1f1f1, #CCC );
    background-image: -ms-linear-gradient( top, #f1f1f1, #CCC );
    background-image: -moz-linear-gradient( top, #f1f1f1, #CCC );
    background-image: -o-linear-gradient( top, #f1f1f1, #CCC );
    box-shadow: 0 1px 2px #888;
    padding: 10px;
  }
  #modal h1 {
    padding: 0;
    margin: 0;
    font-size: 16px;
    font-weight: normal;
    text-shadow: 0 1px 2px white;
    color: #888;
    text-align: center;
  }
  #modal section {
    padding: 10px 30px; 
    font-size: 12px;
    line-height: 175%;
    color: #333;
  }
</style>