CSS question

toString · 21 Jun 2006 at 13:20

I'm trying to make this very simple code work. There's supposed to be a box (item) which contains (image) on the left and (text) next to it. Simple I thought?! I must be doing something very obviously wrong...

If anyone can help I'd be greatfull! :confused:

Code:

<style type="text/css">
* {
	padding:0;
	margin:0;
}
.container{
	border:1px solid #00f;
	padding:10px;
	margin:10px
}
.item{
	border:1px solid #000;
	margin-bottom:10px;
	clear:both;
}
.image{
	margin:5px;
}
.text{
	margin:5px;
	float:left;
}
</style>

<div class="container">
	<div class="item">
		<div class="image">
			img<br/>
			img
		</div>
		<div class="text">
			1st line of text<br/>
		</div>
	</div>
	
	<div class="item">
		<div class="image">
			img<br/>
			img
		</div>
		<div class="text">
			1 line of text<br/>
			2nd line of text
		</div>
	</div>
</div>

toString · 21 Jun 2006 at 13:42

No not really, sorry. But that leads me onto something else I forgot to mention.
The text shouldn't wrap under the image.

toString · 22 Jun 2006 at 13:00

Code:

<style type="text/css">
* {
	padding:0;
	margin:0;
}
.container{
	border:1px solid #00f;
	padding:10px;
	margin:10px
}
.item{
	border:1px solid #000;
	margin-bottom:10px;
	clear:both;
}
.image{
	margin:5px;
	float:left;
}
.text{
	margin:5px;
	float:left;
}
.extra{
	clear:both;
}
</style>

<div class="container">
	<div class="item">
		<div class="image">
			img<br/>
			img
		</div>
		<div class="text">
			1st line of text<br/>
		</div>
		<div class="extra"></div>
	</div>
	
	<div class="item">
		<div class="image">
			img<br/>
			img
		</div>
		<div class="text">
			1 line of text<br/>
			2nd line of text
		</div>
		<div class="extra"></div>
	</div>
</div>

This works, by putting in the empty 'extra' div classes. Not right in terms of logic, it seems.

Must be some kind of hack, or more likely, a proper way of doing things...?

toString · 22 Jun 2006 at 14:26

Thanks for the tip. I've tried putting it onto the text class, and removing the float left. It gave some results, but not perfect. Maybe I'm adding it to the wrong place. Never really used this display property either...