CSS float and alignment question

Hi,

I want to place an image on the left and a paragraph on the right of my page and I want to align both of them to the center like the following image shows:

I have the following code but it doesn’t do what I want.

<div class="div1">
<img src="image.jpg" />
</div>
<div class="div2">
<p>Text goes here.</p>
</div>

CSS:

.div1 img{float:left}
.div2{margin:0 0 0 110px}

110px is the width of the image.

Any ideas how to align them as it is shown in the image? Thanks.

I can’t see your image yet, so this is a best guess for this type of question


<div class="centered">
    <div class="imgbox">
       then the image
    </div>
    <div class="textbox">
       then the text
    </div>
</div>

.centered {
width:to suit requirements; say 600px
margin:auto;
}

.imgbox{
width:some width that works; perhaps your 110px; or 150px (so other images will also fit)
padding:some small value, say 5px;
float:left;
}

.textbox {

width: some other width, say 400ish;
float:left;
padding:5 or 10px;
}

Hi,

As mentioned above you could just float both those elements with the correct width and then place a wrapper around both of them and center the wrapper with auto margins. You would need to give the wrapper a width to match the two floats though.

e.g.


<!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>Untitled Document</title>
<style type="text/css">
img{
	display:block;
	background:#000;/* color for testing */
	border-right:10px solid #fff;
}
.block,.block2{
	width:120px;
	float:left;	
}
.wrap{
	width:240px;
	margin:auto;/* center the container*/
	background:#ccc;
	overflow:hidden;/* contain the floats */	
	border:1px solid red;
}
p{margin:0 0 .5em}

</style>
</head>

<body>
<div class="wrap">
<div class="block"> <img src="image.jpg" width="110" height="110" alt="Important info" /> </div>
<div class="block2">
		<p>Text goes here.</p>
		<p>Text goes here.</p>
		<p>Text goes here.</p>
</div>
</div>
</body>
</html>


Depending on situation we could do it with one wrapper assuming that dimensions are standard and known by floating the image into the padding space next to the text.


<!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>Untitled Document</title>
<style type="text/css">
.block img {
	float:left;
	margin:0 0 0 -120px;
	background:#000;/* color for testing */
	border-right:10px solid #fff;
display:inline;/* ie6 double margin fix*/
}
.block {
	width:120px;
	padding:0 0 0 120px;
	margin:auto;
	background:#ccc;
	overflow:hidden;/* contain the floats */
	border:1px solid red;
}
p { margin:0 0 .5em }
</style>
</head>

<body>
<div class="block">
		<p><img src="image.jpg" width="110" height="110" alt="Important info" />Text goes here.</p>
		<p>Text goes here.</p>
		<p>Text goes here.</p>
</div>
</body>
</html>


With css there are many ways to do the same thing but it does depend on the requirements and what happens next.

John and Paul, thanks for your help. I always forget about margin: auto when aligning things.