CSS Divs Not Adjusting for Body Content

[tomw]

Hi Everyone,

I am building a site and when I put text copy in the body, the page will expand in height (like it should). But if I put an image in the body, the body size stays the same and the image is overlapping. I can’t figure out what is wrong with my CSS code that is causing this. My heights are set to auto – I tried changing them to 100%, but it still doesn’t change anything.

Here is the page I am working on:
http://www.tomwindeknecht.com/new/about.htm

Thanks in advance,
Tom

[joshuanhibbert]

That is due to you floating the image to the right. Floated elements are removed from the normal flow of the document, meaning that parent elements won’t naturally expand to contain them.

Firstly, rather than using HTML attributes to set height/width and so on, use CSS. Secondly, to get the parent element to contain the floated image you will need to use a clearfix of some sort. Here is one I like to use:

.cf:after,

.cf:before {

content: '';

display: table;

}

.cf:after {

clear: both;

}

.cf {

zoom: 1;

}

[wolfcry911]

you’ve set the image to align right (which is deprecated, btw – use css float) which is the same as a float, so the image is following the specs and ‘hanging’ outside of it’s parent (and ancestor). You need to contain the float. One way is to use overflow: hidden on the parent – in this case, you don’t really want to do that because the image is inside a p element and you will get unexpected results. You can contain the float by adding overflow: hidden to #content. If it were me, I’d also remove the image from the p and place it as a child of #content – although what you have now is not wrong.

edit// joshua beat me again – he gives another way of containing the float

[joshuanhibbert]

@wolfcry911 Just to clarify, I have never laid a hand on you…

@tomw Heed @Wolfcry911’s advice, it is spot on.

[wolfcry911]

;p

[tomw]

Those worked great! Thanks guys! I learned something that I did not know about.

[Author]

Posts