Photo problem

HTML & CSS
1

I have this div with the style bellow.
When I add padding-bottom to #newproduct #newproducttitle the div newproduct is destroyed.(The background image is shown left and the other image at right of the middle content.
How can newproducttitle and newproduct have some pxs between them ?
I want to do the same for the offer div.
I hope to be undestood.


<div id="firstpage">					
<div id="newproduct">
<span id="newproducttitle">
product</span><br />
<img src="images/product.jpg" alt="" /></div>
<div id="offer">
<span id="offertiitle">offer</span>
<br />
<img src="images/offer.jpg" alt="" /></div>
<div style="clear: both;">&nbsp;</div>
......
</div

#firstpage
{
 margin-left: 0px;
  margin-right: 0px; 
 float:right;
 height:600px;
}
#newproduct
{
 position:relative;
 margin:4px 0 0 0px;
  padding:0 px 10px 0; float: left;
}
#newproduct #newproducttitle
{
padding-left:.3em;
float: left;
width: 312px;
 border: none;
	color: #FFFFFF;
	margin-bottom:.01em;
	padding-bottom:.01em;
 background:  url(images/newproduct.jpg) no-repeat  ;
}

#offer
{ position:relative; margin:5px 0px 0 6px; 
padding:0 0px 0px 5px; float: left;
}
#offer #offertiitle
{
padding-left:.5em;

float: left;
width:311px;

 border: none;
 color:#FFFFFF	;
	 overflow:inherit;
 background:url(images/month_offer.jpg) no-repeat;
}
2

I believe your second id is overwriting your first id. Can’t give you the specifics as to why (Paul, Ralph, XHTML?)

so in essence newproduct is not used and newproducttitle styles are being used.

why not put newproducttitle in a class? That way newproduct stays intact and newproducttitle should follow.

3

You have a typo here which is killing the padding on newproduct.


#newproduct {
    position:relative;
    margin:4px 0 0 0px;
   [B] padding:0 px 10px 0;[/B]
    float: left;
    background:red
}

That will invalidate the padding and it will be ignored.

It should be:


#newproduct {
    position:relative;
    margin:4px 0 0 0px;
   [B] padding:0px 10px 0;[/B]
    float: left;
    background:red
}
4

Oh Paul you always correct me. I need to read thoroughly before posting. :slight_smile:

5

No worries. I didn’t really understand the question but spotted the typo and went for it :slight_smile: