- This topic is empty.
March 6, 2012 at 9:07 pm #37013tomwMember
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:
Thanks in advance,
TomMarch 6, 2012 at 9:26 pm #98308joshuanhibbertMember
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:
}March 6, 2012 at 9:29 pm #98309wolfcry911Participant
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 floatMarch 6, 2012 at 9:35 pm #98311joshuanhibbertMemberMarch 6, 2012 at 10:12 pm #98316wolfcry911Participant
;pMarch 7, 2012 at 1:00 am #98328tomwMember
Those worked great! Thanks guys! I learned something that I did not know about.
- The forum ‘CSS’ is closed to new topics and replies.