PDA

View Full Version : Problem w/ Clearing Div


mnat
January 14th, 2009, 03:14 PM
Hey Everyone,

On a site I am building I have a wrapper that contains 3 divs: right column, left column, and footer all which have float properties. I want my wrapper to encase these div's and their content. The problem is that on some pages my right columns content is flowing over the footer and the wrapper.

I have tried several clearing methods including creating an empty div at the end of the wrapper with clear:both CSS, as well an updated clearing method that uses :after property, but neither seemed to work in any browser. Please Help!

Here is a link to a page of the site that shows the problem:
http://www.soleroliving.com/solero_apartments/residents/residents.html

and here is the URI for the CSS:
http://www.soleroliving.com/CSS/Solero_site.css


(http://www.soleroliving.com/CSS/Solero_site.css)

Thanks!
claudio
January 14th, 2009, 03:35 PM
Why do you have all 3 sections floating? Can't you just float one of the columns pair (left or right) and position the other using margin?

Something like the following:


<html>
<head>
<style type="text/css">
#left
{
width:300px;
float:left;
background:#F90;
}
#right
{
margin-left:300px;
background:#C00;
}
#footer
{
background:#FC0;
}
</style>
</head>
<body>
<div id="left">Community Openings
Fleurie...
...Spring '09
Regal Oaks...
...Summer '09
Pompeii...
...Winter '09
Bellissimo...
...Winter '09
Barcelona...
...Winter '09</div>
<div id="right">Residents
Welcome Solero Residents!

At Solero we realize that our residents are our greatest asset and we strive to create communities they can take comfort and pride in. All Solero Communities are provided with a fully equipped clubhouse that our resident may relax in, rent out for gatherings, or seek out help from their apartment managers. Many of our communities also have at least one swimming pool, a playground area, and a tennis court.

In addition to these year round facilities, we also offer various community activities throughout the year. These activities are a great way for residents to become involved with their community and meet fellow neighbors. Check your communities calendar regularly to see when we will be hosting cooking classes, holiday parties, community awareness meetings, and much more.</div>
<div id="footer">footer text goes here |footer text goes here |footer text goes here |footer text goes here |footer text goes here |footer text goes here |footer text goes here |footer text goes here |footer text goes here</div>
</body>
</html>
mnat
January 19th, 2009, 02:06 PM
I placed my columns in a wrapper "solero_content" and took away the right float. This however did nothing visually, and my text in the right column still overlaps the footer. I don't think it is a clearing issue anymore-- I placed clearing divs in several places and while the right column adjusts to fit the content div with in (which is floated), it seems the the wrapper around the right column will not adjust.

I have spent a long time play with the css and html trying to make it work but w/ no luck. I would really appreciate it if someone would look at the css and code and give me ideas/a solution for fixing it. Thanks.

Here is a link to a page of the site that shows the problem:
http://www.soleroliving.com/solero_apartments/residents/residents.html
(http://www.soleroliving.com/solero_apartments/residents/residents.html)
and here is the URI for the CSS:
http://www.soleroliving.com/CSS/Solero_site.css