The problem is that when you float the two divs, they are taken out of
the normal flow of hte page, and the container height no longer is
affected by their height. There is a CSS fix for this called clearfix,
which can be implemented by applying the class "clearfix" to the
container and adding the following to your stylesheet to support it:
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
You can read more about clearfix here:
http://www.webtoolkit.info/css-clearfix.html
Or here:
http://www.positioniseverything.net/easyclearing.html
On Jan 5, 6:42 pm, Pandu <[email protected]> wrote:
> Hello,
>
> I am trying to align two divs next to each other. I am also trying to
> use a background image. So what I did was create a container div with
> a background image. Then I placed the two divs (content and sidebar)
> within the container divs. Using Float: left and Float: right, I was
> able to align the two divs. But doing so makes the background image
> covered up by the content and sidebar divs. If I remove the floats,
> then background image appears and I can see that the two divs are
> within the container div. So either I keep the background image or I
> align the inside divs. There must be a way to do both. You can take a
> look at the current site at:http://fewtureweb.com/member
>
> Btw, the background image is simply creates a shadow effect on the
> left and right edge of the site. Right now the shadow effect only
> shows on the header. Would appreciate any help. Thanks.
--
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
