Creating Modules (Boxes) similiar to Bebo modules with CSS and HTML

I would like to create a box similiar to that on Bebo. Graphic background on footer and heading of the box with text and links in html with content in the box itself. I have general box etc but I don't have enough experiance on getting the content area background to meet flush with the heading and footer etc

Can someone maybe point me in the right area of what to start changing in this code please (I should mention this is in .txt as I'm using PHP but that shouldnt effect styles should it)

HTML (In .txt/PHP)......................................

            <div class="box">
                  <h1>Header</h1>
                  <div class="cbside">
                        <p>Test Box</p>
                  </div>
            </div>

CSS.......................................

.box{
      margin: 15px 0 0 0;
      padding: 5px 0 5px 0;
}

.cbside{
      width:160px;
      margin: 5px 0 0 10px;
      padding: 10px 0 5px 0;
      background: #FFFFFF;
}
LVL 2
Ryan BayneWordPress DeveloperAsked:
Who is Participating?
 
SyntheticsCommented:
Keep a zero margin between the h1 and the cbside div and they should meet up.
0
 
Ryan BayneWordPress DeveloperAuthor Commented:
Forgot this part, probably not a good idea to put the background image for the heading in this is it...

h1 {
  font-size: 2.4em;
  font-weight: normal;
  background: #000 url('../images/header1.jpg');
}
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.