Results 1 to 2 of 2

Thread: Help with aligning 2 divs, background image and footer disappears!

  1. #1
    Join Date
    Feb 2010
    Posts
    9

    Exclamation Help with aligning 2 divs, background image and footer disappears!

    Hi Im back doing some web design after a long hiatus.. I admit Ive forgot ALOT so please bare with me.
    this is my problem:

    Ive built a website and I want to align two divs next to each other. I managed to do that with float left and right. However, the footer gets pushed away somewhere and the background image for the content div (in which I have the 2 divs) disappears and so does the background image of the footer. Ive searched the web, watched tutorials on how to align two divs next to each other. people say you need to have a clear: both; etc, Ive tried it but it doesnt work.
    If I put a clear: both; in the footer, the footer is fine, but the background image of the content div still disappears!

    have a look here at how it looks:

    www.marcuslew.com/Cru/index.html



    right now my code looks like this:


    #content {
    background-image:url(../images/bg.jpg);
    background-repeat:repeat-y;
    width: 795px;
    }

    #leftContent {
    width: 600px;
    float: left;
    background-color: green;
    margin: 0px 0px 0px 7px;
    }

    #rightContent {
    width: 181px;
    float: right;
    background-color: red;
    margin: 0px 7px 0px 0px;

    }

    #footer {
    background-image:url(../images/footer.jpg);
    background-repeat:no-repeat;
    height: 46px;
    width: 795px;
    border: none;
    padding: 0px;
    margin: -5px 0px 0px 0px;
    clear: both;
    }



    Can someone please point out to me what im doing wrong here and how to correct it and how I can have my layout as I want it?
    Thanks alot!

  2. #2
    Join Date
    Feb 2006
    Location
    Salisbury UK
    Posts
    4,332
    You have put clear: both; in the footer style but that isn't enough to drag down the bg.jpg background in #content. You need a clear div inside the #content div after the floated divs because an u***oated div has a height and will tell the parent to carry down the background to cover it:-
    Code:
     <div id="rightContent">
            <p>good bye good bye good byegood bye good bye good byegood 
    
    bye good bye good byegood bye good bye good bye</p>
            </div>
     <div class="clear">&nbsp;</div>       
        </div> 
        
        <div id="footer">
    and this style:-
    Code:
    .clear { clear: both; width: 100%; height: 0; visibility: hidden; }
    Your footer text is at the top of the footer. If you want to position it lower, don't add margin-top which will create a space above the footer, but add padding-top to footerText:-
    Code:
    .footerText {
    	text-align:center;
    	margin: 5px 0 0 0; padding-top: 8px;
    	}
    Code downloaded to my PC will be deleted in due course.
    WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
    Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.

Similar Threads

  1. gap between header image and menu this i urgent! please help me!
    By shankha in forum Web Design, HTML Reference and CSS
    Replies: 1
    Last Post: 05 May 2011, 02:51 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •