Aligning Picture

HTML & CSS
1

I am trying to align a picture to the right of some text. I want the text to wrap around the picture. Both the text and picture are in the same div tag.

I tried using float right but that doesn’t work because then when the browser window is sized really small the picture pops on top of other div elements because its taken out of the normal flow.

I tried wrapping another div tag around the picture and using text-align to the right, that works, except the text always shows up below the image on the left side, so there is a big open white space on the top of the page.

I don’t want to use float but I still want the text to wrap around the picture, what properties do I need to use for this?

I also seen a clear property; I thought that might work but it doesn’t have any effect.

2

That fixed that part, but I still have overlap problems. I have a footer at the bottom of the page and when I resize the page too small the text on the page runs over top of the footer text.

I’m trying to do a left column with links, and the content on the right side of that column, I also want a header for logo and links and a footer for copyright.

It all works until I resize stuff and it all gets smashed together.

Do you know of any articles or examples, that will show me how to do a layout like this correctly, without having all this stuff pile on top of each other?

3

Here is a sample architecture that your page should have:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title> 
<style>
html, body {
height:100&#37;;
width:100%;
}
#masthead {
height:auto;
width:100%;
overflow:hidden;
}
#content-container {
position:relative;
min-height:100%;
overflow:hidden;
width:100%;
background:#ffcc00;
}
#links {
width:auto;
height:100%;
float:left;
padding-bottom:60px;
border:solid thin #000000;
}
#content {
width:auto;
height:auto;
float:left;
padding-bottom:60px;
border:solid thin #000000;
}
#footer {
height:60px;
width:100%;
background:#ff0000;
position:absolute;
bottom:0px;
}
</style>
</head>
<body>
<div id="content-container">

	<div id="masthead">
	my masthead
	</div>

	<div id="links">
	bla<br />
	bla<br />
	bla<br />
	bla<br />
	</div>
	<div id="content">
	my content is here
	</div>

	<div id="footer">
	my footer
	</div>

</div>

</html>

min-height does not work in IE6 though, but to work around this problem (for IE6 only, use min-height for other browsers), use a <!–[if IE 6]> conditional comment in which you specify height:100% for the content-container instead of min-height.

4

Is there a height set on the content div? None of this should be happening. Floating the image right is the right thing to do, and if there’s not much content in the div, then overflow: hidden will fix that, as Tommi said. Can you show some code, or post a link to an example?

5

You got the first part right; put your image in the same DIV as the text and float the image right. Now, your containing div (the one that houses your image and text) should have a width of 100%, an auto height and a hidden overflow. That should do the trick