Problem with css content box made from divs and background images

[weasel]

Hi gang,

You all should remember me after turning me against tables and into a CSS junky... lol

Well, based on an example I was given by Lchad I beleive.
I have been developing a simple css layout.

What I have done is visable in the image below:


This is only a mock up using quick graphics to give me a something visual I can see to work on.
The image above looks okay but watch what happens when the paragraph tags are used in the content area:



The html code for that section is here:

Code: Select all

  <div id="sidebar">
        <div id="top_left_box"></div>
<div id="center_content_box">
  <p>This is content box Left..</p>
  <p>&nbsp;  </p>
</div>
<div id="bottom_left_box"></div>
  </div>

The CSS that controls it is here:

Code: Select all

/* SIDE BAR OR CONTENT BOX 1 */    
    
    #sidebar {
        float: left;
        width: 260px; /* real width: 280px; */
        padding-top: 7px;
        padding-bottom: 7px;
        padding-left:5px;
    }
      
/* START OF BACKGROUND BOX 1 GRAPHICS */      
      
    #top_left_box{
      height: 32px;
      background-image: url(../images/left-box_top.gif); background-repeat: no-repeat; background-position: left;
    }
      
    #center_content_box{
    height: auto;
      background-image: url(../images/left-box_center.gif); background-repeat: repeat-y; background-position: left;
      padding-left: 20px;
      padding-right:20px;
    }
      
    #bottom_left_box{
      height: 34px;
      background-image: url(../images/left-box_bottom.gif); background-repeat: no-repeat;    background-position: left;
    }
    
    
/* END OF BOX GRAPHICS */
/* END OF SIDEBAR */

If I use the <br /> tags I dont get a problem with the images breaking appart.

Can any one help or advise please.

Thanks

[pa007]

Try setting margins to 0 on you p's in the css. Use padding instead, might work.

Pete.

[Lchad]

Use this in your css

Code: Select all

* {
margin: 0;
padding: 0;
}

That will erase the padding that the p's are getting.

[weasel]

Worked a charm! Thanks very much!!!!!!!!1