Background images

Getting overlapping issues, and non display

[bigonroad]

Hey, I'm editing this page - [namesnotnumbers.info ]

I have two issues. a) why is the background on contentmain not visible.
b) when it is visible, how do i get rid of the overlap in backgrounds between contentmain and contenttop & contentbottom?


My CSS is:

/*content*/
#content {
width:989px;
margin: 0 auto;
}
#contentmain{
background-image:url(images/contentbgmain.png);
background-repeat:repeat-y;
margin:0;
}
#contenttop{
background:url(images/contentbgtop.png) no-repeat top;
height:91px;
margin:0;
}
#contentbot{
background:url(images/contentbgbot.png) no-repeat bottom;
height:114px;
clear:both;
}
#contenttext {
padding:0 40px 0 40px;
margin-top:-60px;
margin-bottom:-70px;
width:900px;
}
#contenttextmain {
width:570px;
float:left;
}
#contenttextside {
width: 315px;
float:right;
}

And my HTML is

<div id="content">
 <div id="contenttop"></div>
 <div id="contentmain">
 <div id="contenttext"> 
 <div id="contenttextmain">
 main text here
 </div>
  <div id="contenttextside">
  sidebar text here
  </div>
 </div> 
 </div>
 <div id="contentbottom"></div>
</div>

Thanks!

[Major_Payne]

Always set a width and height for the divs you are using bachground images on:

#contentmain{
width: XXpx;
height: YYpx;
background: #fff url(images/contentbgmain.png) repeat-y scroll;
margin: 0;
}

Set the margin between divs to what you want. The one above shows all margins are set to zero. You can use margin-top: XXpx; and/or margin-bottom: XXpx;

or, even:

margin: XXpx 0 XXpx 0;

[caffinated]

Strictly, that's not quite true. If the container with the background contains floated elements, clearing the float underneath the content with an appropriate margin will also stretch the container naturally without specifying a fixed height.

[Demaestro]

caffinated

I am trying to do what you are talking about but can't get it to work.

Don't want to hijack this thread but don't want to post a new one seeing as you are talking about the same thing.

Why can't I get my bgimage/bgcolor on my divs to expand with the content when it contains floated elements?

I did as you suggested (I think?) and cleared the container elements but with no success.


#container {
position:relative;
margin:0 auto;
padding-top:20px;
width:790px;
background-color:ffff;
clear:both;
}

#main_section {
padding:0px;
margin:0px;
width:760px;
background-image:url('/images/bg_bottom.png');
clear:both;
}

#content_area_new {
padding-top:0px;
margin:0 auto;
padding-bottom:20px;
width:703px;
background-color:#e6e1e1;
clear:both;
}

#left_content {
padding-left:15px;
padding-right:7px;
padding-top:15px;
width:320px;
float:left;
}

#right_content{
padding-right:15px;
padding-left:7px;
padding-top:15px;
width:320px;
float:right;
}


<div id="container">
..<div id="main_section">
....<div id="content_area_new">
.......<div id="right_content">
.........CONTENT
.......</div>
.......<div id="left_content">
.........CONTENT
.......</div>
....</div>
..</div>
</div>

I would like the bgcolor and bgimage from main_content and content_area_new to be pushed down with the content from right_content and left_content.

Any ideas?

[Demaestro]

Ok I figured mine out... hopefully this will help others.

To get your container element to expand with floated content you simply add a empty div before you close the container that clears:both

It simply forces the new non floated div past the floated content and clears it which opens the container up.

.clearboth {
clear: both;
width: 0px;
height: 0px;
margin: 0px;
}

<div id="container">
..<div id="main_section">
....<div id="content_area_new">
.......<div id="right_content">
.........CONTENT
.......</div>
.......<div id="left_content">
.........CONTENT
.......</div>
....<div class="clearboth">&nbsp;</div>
....</div>
..</div>
</div>

[SuzyUK]

#content_area_new {
padding-top:0px;
margin:0 auto;
padding-bottom:20px;
width:703px;
background-color:#e6e1e1;
clear:both;
}

Demaestro don't add the extra element, that's the old fashioned way! ;) - either float the above container or add overflow: hidden to it, it should then contain the floated children

[Demaestro]

Suzy

Thanks!

Because there were a couple container elements to deal with I added the overflow tag as it seemed easiest in my case and it works great.

Thanks for suggesting newer/better practice. The solution I posted is most certainly a hack. This solution seems more elegant.