When does order of HTML elements matter? - html

Question

I have a line of text that I'm wanting to position a small graphic next to, within a full screen liquid layout. I have it working, but I'm not sure why.
The html:
<div class="wrapper">
<div class="image_container">
<img src="some_valid_url">
</div>
<div class="text">Zachary</div>
</div>
The CSS (written in sass, if you're curious about the nesting):
.wrapper {
text-align: right;
float: left;
width: 10%;
word-wrap: breakword;
}
.image_container {
margin-left: 2px;
float: right;
img {
height: 20px;
width: 20px;
vertical-align: top;
}
}
.text {
overflow: hidden;
}
What this is supposed to do is place the small graphic and the text on a single line, and the graphic be just to the right of the text. And it works, but only if the image_container div is above the text div. Flip them around and the image now sits below the text. Why is that?

Answer 1

It has to do with div.text being a block level element and not interacting with the floated .image_container.
When .image_container is before div.text in the markup it floats to the right and then because div.text isn't cleared or floated, it essentially ignores .image_container and goes on the same vertical line.
However when .image_container is after div.text, which is taking up 100% of the available horizontal space (because it's block level), it respects this and floats to the right, just below it.
If you put borders around both your elements, it should become clear what's happening.

Answer 2

It isn't really the HTML that matters, but the CSS. CSS float's still treat elements like a blocks-- a floating block element. An element with a float will basically keep one foot on the ground, where its block position is, but the rest floats in the air. CSS floats don't act like position absolutes, which totally pops it out of its block position and makes it float.

Answer 3

I believe the issue is your text-align in the wrapper. Text-align will actually align elements within the div as well, so if your text is listed first, text and image are going to be pushed to the right. You could probably fix this by adding "float: left" to your text class.

Answer 4

i have made a custom solution, it work even you put image container below or up to text
<div class="wrapper clearfix">
<div class="image_container">
<img src="http://www.netbsd.org/images/download-icon-orange.png" />
</div>
<div class="text">Zachary</div>
</div>
​
.image_container,.text{
float:left;
line-height:40px;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */​
you can see its working demo
let me know if something else is required.