locked
Expanding background RRS feed

  • Question

  • The background of my website, www.libertyhtc.com will not expand when I put text onto the page, rather, it cuts everything off...

    I am looking for insight on correcting this, what information will you need to help? thanks.

    Saturday, January 8, 2011 11:09 PM

All replies

  • When you float something, it's placed according to the float instruction, then removed from the flow of the diagram.  In other words, your background has no knowledge of the height of your left and right floated content areas.

    Put something after the floated elements, that will tell the containing div how tall it should be.  You already have a footer.  Add "clear:both" to the footer's style.  That will tell it to drop below the floated elements above it.  Since the footer itself is not floated, the containing div knows where it is - including where it is when it is below floated elements. 

    Saturday, January 8, 2011 11:45 PM
  • that helped. You might notice those two borders going around the page, those should surround the page on the left, right, and bottom, but not top.
    Sunday, January 9, 2011 12:12 AM
  • Please mark repllies that answered you as answers.  My first reply answered your original question.  :)

    As for your second question: If you want the colored border to show on the bottom, try using padding.

    Sunday, January 9, 2011 1:15 AM
  • You're experiencing margin collapse. Assign a small border to layerA and layerB to resolve it, so

    layerA {
       border-bottom : 0.01em solid # BAB2FE ;
    }

    layerB {
       border-bottom : 0.01em solid #FFC800 ;
    }

    BTW, if you want borders on block elements, assign them borders. Those are divs, so just give them appropriately colored borders, then clear the one (top) you don't want. You're trying to build borders by using background divs, which is like going from San Francisco to Mexico City via Manhattan. You can get there that way, but you're going way out of your way for no reason.

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.
    Sunday, January 9, 2011 1:17 AM
  • I assume the nested divs are being used because more than one border is wanted.  (Agreed that making at least one a border makes more sense.)  Padding will work, if margins collapse.
    Sunday, January 9, 2011 1:23 AM