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>

Retorted · 21 Jun 2006 at 13:25

Do you mean something like this?

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.

joeyjojo · 21 Jun 2006 at 18:06

Theoretically (since I couldnt get it perfect either

) you make the image and text divs float:left, and the containers (container and item) clear:both. However, clear:both only stops things which are floating left or right, not below. If there was an element below the text div which was clear:both, then item would stretch to fit, but as it is...

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...?

Wimnat · 22 Jun 2006 at 13:41

The right way would the display tag.

Display: inline;

Should help you out - at work at the mo so can't post more. Let me know if you can't get it working.

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...