Float property preventing background from functioning

  • Brad-W
  • Novice
  • Novice
  • Brad-W
  • Posts: 16
  • Loc: BC Canada

Post 3+ Months Ago

I have a really basic section of my site where there is a wrapper and two columns for content.

The wrapper contains the left and right sides. The problem is, as long as I have the float property applied, the background doesn't show up behind those fields. When I take out the floats, the background works but the boxes are vertical. This is ONLY a Firefox issue (surprisingly :P).

See "http://polarskymedia.com/"

Code: [ Select ]
#content {
    background: url(/images/body_bg.gif);
    margin-left: auto;
    margin-right: auto;
    width: 718px; }
.left_side {
        background: url(/images/table_bg.gif) #FFFFFF repeat-x;
        float: left;
        width: 471px;
        margin-left: 4px; }
.right_side {
        background: url(/images/table_bg.gif) #FFFFFF repeat-x;
        float:right;
        width: 224px;
        margin-right: 8px; }
  1. #content {
  2.     background: url(/images/body_bg.gif);
  3.     margin-left: auto;
  4.     margin-right: auto;
  5.     width: 718px; }
  6. .left_side {
  7.         background: url(/images/table_bg.gif) #FFFFFF repeat-x;
  8.         float: left;
  9.         width: 471px;
  10.         margin-left: 4px; }
  11. .right_side {
  12.         background: url(/images/table_bg.gif) #FFFFFF repeat-x;
  13.         float:right;
  14.         width: 224px;
  15.         margin-right: 8px; }
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8413
  • Loc: USA

Post 3+ Months Ago

Instead of float: left; float: right; technique, try float: left; on both of them... if that doesn't help than replace the float thing altogether on both of them to display: inline;
  • Brad-W
  • Novice
  • Novice
  • Brad-W
  • Posts: 16
  • Loc: BC Canada

Post 3+ Months Ago

Having them both on float: left; didn't make a difference and when I put display: inline; to replace the float property the right_side fell underneath and filled the entire width of the page, although the background then worked properly.. :S
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

Code: [ Select ]
.right_side {
    background-image: url(/images/table_bg.gif) #FFFFFF repeat-x;
    float:left;
    width: 224px;
    margin-right: 8px;
    height:288px;
}
  1. .right_side {
  2.     background-image: url(/images/table_bg.gif) #FFFFFF repeat-x;
  3.     float:left;
  4.     width: 224px;
  5.     margin-right: 8px;
  6.     height:288px;
  7. }

Code: [ Select ]
#content {
    background-image:url('images/body_bg.gif');
        background-repeat:repeat;
    margin-left: auto;
    margin-right: auto;
    width: 718px;
        height:290px;
    padding-top: 8px;
  1. #content {
  2.     background-image:url('images/body_bg.gif');
  3.         background-repeat:repeat;
  4.     margin-left: auto;
  5.     margin-right: auto;
  6.     width: 718px;
  7.         height:290px;
  8.     padding-top: 8px;

there's your solution ... the floats made that the "#content"'s height is only 5 px high ... so I set manually, otherwise what you also could've done is to add a div inside "#content" below the other two divs with the following attributes:
Code: [ Select ]
div.clearer
{
clear:both;
width:100%;
height:0px;
}
  1. div.clearer
  2. {
  3. clear:both;
  4. width:100%;
  5. height:0px;
  6. }

but remember that in IE6 (if you still develop with it in mind) you cannot have a div with height "0px" the minimum is 5px.
  • Brad-W
  • Novice
  • Novice
  • Brad-W
  • Posts: 16
  • Loc: BC Canada

Post 3+ Months Ago

There we go, that worked beautifully. Thanks a lot for going through that. I really appreciate it.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

it's my pleasure.

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 35 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.