Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Sep 2006
    Posts
    24
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Unhappy problem with clearing floats

    I am having a problem clearing the floats on my layout, and also getting my background image to tile vertically in my parent container, I have been directed to read about a dozen articles on this problem, and have even consulted my own css book and either I am understanding it all wrong, or just not getting it. Could someone please look over my code and the page and tell me exactly what I am doing wrong....I would forever appreciate it very very much.

    here is the url for the page http://www.prcreations.net/lop/ and below is the code for my style sheet that pertains to that page....thanks!!

    #page {
    background-image : url(images/lopbg2.jpg) repeat-y;
    width : 761px;
    text-align : left;
    padding : 0;
    height : auto;

    }

    #fix {
    width : 761px;
    clear : both;
    }

    #headerimg {
    background-image : url(images/lop.jpg);
    width : 761px;
    height : 250px;
    padding : 0;
    }
    #leftside {
    float : left;
    width : 151px;
    padding : 0;
    }
    #maincontent {
    float : left;
    width : 459px;
    padding : 0;
    }
    #rightside {
    float : left;
    width : 151px;
    padding : 0;

    }

    #introduction {
    background-color : #ffffff;
    float : left;
    width : 440px;
    padding : 10 15 0 10;
    }

  • #2
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You don't have DOCTYPE which doesn't help things...

  • #3
    New Coder
    Join Date
    Sep 2006
    Posts
    24
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I just had not put it in yet, would that really make a difference right now?

  • #4
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It may do, a DOCTYPE tells the browser how it should display certain things. It's generally best to start with one otherwise once you add it in you may find your page looks different!

  • #5
    New Coder
    Join Date
    Sep 2006
    Posts
    24
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I know I did it in xhtml, so how would the doctype be put in, I am still learning the rules of this stuff, so please bear with me ignorance in certain things

  • #6
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just place it before everything else on the page (above <html>).

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    At least then you'll know that all browsers will be at least trying to make it look the same (IE will probably fail though!).

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Add this just after your rightside div
    Code:
    <div class="clear">&nbsp;</div>
    Then add this to your CSS
    Code:
    .clear {
    clear:both;
    font-size:0;
    line-height:0px;
    height:0;
    }
    Then change this
    Code:
         #maincontent {
    	       background-image : url(images/lopbg2.jpg) repeat-y;
               float : left;
               width : 761px;
               padding : 0;
    		   clear : both;
          }
    to this
    Code:
         #maincontent {
    	       background: url(images/lopbg2.jpg) repeat-y;
               width : 761px;
               padding : 0;
          }
    That should fix most of your issues. As mark said you still need the doctype in there. You need to change this part as well as its making your introduction section too wide not allowing your right side to fit
    Code:
         #introduction {
    	       background-color : #ffffff;
               float : left;
               width : 459px;
               margin : 10px 10px 0 10px;
          }
    to this
    Code:
         #introduction {
    	       background-color : #ffffff;
               float : left;
               width : 439px;
               padding:10px;
          }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    New Coder
    Join Date
    Sep 2006
    Posts
    24
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ok, the doctype is in, but my right sidebar is still floating below my left instead of being on the right, and my background image still won't show up or tile in either FF or IE, I am getting so frustrated, I have read everything I can about this, but nothing is working for me

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Read my post, just before this one. It should solve all of your problems.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #10
    New Coder
    Join Date
    Sep 2006
    Posts
    24
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Smile

    You are a genius!! Everything you changed, I had tried, but not all together :::smile::: I bow to your genius and have learned a great lesson, a million thank you's for all the help from both of you!!

  • #11
    New Coder
    Join Date
    Sep 2006
    Posts
    24
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Well, the problem was fixed completely, floats and background in FF, but in IE the right side is still floating below the left, I could have sworn it was fixed, but now I don't know what to do...any ideas what else could be wrong?

  • #12
    New Coder
    Join Date
    Sep 2006
    Posts
    24
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ok, I got the right side bar to the right side by floating it to the right, still looks perfect in FF and in IE it is now on the right side BUT, it won't float to the top, it is hovering at the bottom....I am going to start pulling out my hair here!! help!!

  • #13
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Float the rightside to the left.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #14
    New Coder
    Join Date
    Sep 2006
    Posts
    24
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I had the right side floating to the left, but in IE it made it float under the left side, while in FF it was perfect...but when I floated it to the right, it stayed perfect FF and floated to the right like it was supposed to in IE but it floated to the bottom as well....if I float it back to the left, and it starts floating on the bottom of the left side again in IE, what should I do?

  • #15
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Make the introductions div 439px wide once you float the rightside left then find this div
    Code:
    <div style="height: 200px; width:440px;overflow: auto"> </div>
    should be in introductions, remove the width from there and your right side should fit in IE.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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