Simple image next to div

HTML & CSS
1

Hey I have a div followed by an image. Howcome the image won’t line-up next to div despite having enough space and explicitly again setting the element to display:inline?


<div id="gelijkvloers">
	<h1>Gelijkvloers</h1>
	<ul>
		<li>500m2</li>
	</ul>
</div>
<img src="afbeeldingen/plattegrond_gelijkvloers.jpg" alt="plattegrond van de gelijkvloers" />



/* GELIJKVLOERS */

div#gelijkvloers{
	margin: 10px 0 0 0;
	padding: 0 0 0 8px;
	background-color:#000;
	color:#fff;
	width:200px;
}

img{
	display:inline;
	border: 1px solid #000;
}
2

Your div is not inline so it is a block which should mean the image appears beneath it. Is that what happens?

3

Hm even when I set the div to display inline the div just collapses on itself(e.g. all text within it dissapears and the block resize to about 2x4 pixels) and the image stays in the same spot…weird.

EDIT: wait the text just dissapeard out of the box but it’s still there. The image doesn’t move however

4

Make both elements floating:


div#gelijkvloers{
	margin: 10px 10px 0 0;
	padding: 0 0 0 8px;
	background-color:#000;
	color:#fff;
	width:200px;
	float: left;
}

img{
	margin: 10px 0 0 0;
	border: 1px solid #000;
	float: left;
}
5

Is it really necessary to float them ? Css doesn’t make sense from time to time. I intentionally didn’t want to go the easy float way and look :wink:

thanks though, it worked :wink:

6

Yes you do. If you don’t float element’s you take them out of the flow! Or you should position elements absolute instead.

Does gelijkvloers make sense to you?

It does because you need gelijkvloers to build a first floor (eerste verdieping)

It worked didn’t it :slight_smile: So It makes sense :wink:

7

???

floating means taking them out of the flow. Naturally the flow is determined by wether an element is inline or block? I figured setting it to inline would rearrange the flow so that they would be positioned inline from left to right. Maybe what you are sayins is that for this to work you need to specify an absolute position?

Hm whatever it is, it worked :smiley:

8

That isn’t correct. Like Ajajajak said, floated elements are taken out of the normal document flow.

Your img element doesn’t sit next to your div because div elements are block-level elements and as such these are laid out vertically by default rather than horizontally (inline-level elements).

Thus when you place your div element before your img element, which is an inline element, the latter will still be placed below your div, as a block-level element fills its parent’s content area and can’t have other block or inline elements at its sides, unless you float them.

So, if you didn’t want to float your div, you could set display:inline on your div rather than on the img (as it’s inline anyway), thus generating an inline box in CSS and making your img sit next to your div.

/* GELIJKVLOERS */

div#gelijkvloers{
	margin: 10px 0 0 0;
	padding: 0 0 0 8px;
	background-color:#000;
	color:#fff;
	width:200px;
    display:inline;
}

img{
	border: 1px solid #000;
}
9

But won’t declaring display:inline on the div nullify the width property? The OP has already tried this.

Sounds like a case for an introduction to the mysteries of display:inline-block (this Mozilla webdev article deals specifically with lists but includes some useful cross-browser tips).

10

Yes, it does, however, I tried to explain why a block-level element with its default values cannot have other elements next to them unless you alter its display, position or float property values.

11

Hm very useful information thank you all. I shall give display:inline another try since that was what seemed the most logical solution to me. I didn’t know about the document flow and how block elements take up the space of their parent container so thank you for that kohoutek!