...

View Full Version : problem with clearing floats



purplerose
09-20-2006, 07:59 PM
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;
}

mark87
09-20-2006, 08:09 PM
You don't have DOCTYPE which doesn't help things...

purplerose
09-20-2006, 08:15 PM
I just had not put it in yet, would that really make a difference right now?

mark87
09-20-2006, 08:17 PM
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!

purplerose
09-20-2006, 08:20 PM
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

mark87
09-20-2006, 08:22 PM
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!).

_Aerospace_Eng_
09-20-2006, 08:28 PM
Add this just after your rightside div

<div class="clear">&nbsp;</div>
Then add this to your CSS

.clear {
clear:both;
font-size:0;
line-height:0px;
height:0;
}
Then change this

#maincontent {
background-image : url(images/lopbg2.jpg) repeat-y;
float : left;
width : 761px;
padding : 0;
clear : both;
}
to this

#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

#introduction {
background-color : #ffffff;
float : left;
width : 459px;
margin : 10px 10px 0 10px;
}
to this

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

purplerose
09-20-2006, 08:29 PM
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

_Aerospace_Eng_
09-20-2006, 08:33 PM
Read my post, just before this one. It should solve all of your problems.

purplerose
09-20-2006, 08:49 PM
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!!

purplerose
09-22-2006, 02:06 AM
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?

purplerose
09-22-2006, 03:51 AM
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!!

_Aerospace_Eng_
09-22-2006, 04:47 AM
Float the rightside to the left.

purplerose
09-22-2006, 05:48 AM
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?

_Aerospace_Eng_
09-22-2006, 06:04 AM
Make the introductions div 439px wide once you float the rightside left then find this div

<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.

purplerose
09-22-2006, 06:12 AM
Feeling like a total idiot right now, I remember now that it was fine in IE and did not check it again after I added the div scroll....I cannot believe I made such a stupid mistake and then didn't catch it myself...shows what happens when you try to do this stuff while having a head cold at the same time :rolleyes:

Once again I bow to the god of CSS....thanks for the help!! :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum