float:right with correct semantics - html

Question

I have the following html/css:
#wrapper {
width: 400px;
background-color: red;
}
#text {
margin-right: 50px;
}
#subcontent {
float: right;
width: 50px;
}
<div id="wrapper">
<div id="subcontent">
<img src="http://lorempicsum.com/futurama/50/50/1" width="50">
</div>
<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis leo sapien. Nunc convallis elit purus, non fringilla quam lobortis at. Integer pharetra auctor luctus. In congue dolor a pretium facilisis. Donec et risus lacinia augue pellentesque mollis
eget a urna. Sed dapibus est enim, id iaculis arcu ultrices sit amet. Donec quis dolor risus. Suspendisse a nunc a enim mattis finibus eget vitae diam. Phasellus dictum commodo metus, ut rutrum dolor pretium a. Aliquam at sem vel tortor mollis tristique.
Proin neque dolor, pellentesque ut euismod id, finibus sed lacus. Mauris varius tempor diam, at varius risus. Etiam dictum metus et augue bibendum commodo. Vestibulum imperdiet elit vitae bibendum finibus. Maecenas mollis dui ex, id suscipit mauris
cursus vitae. Vivamus nec faucibus elit.</div>
</div>
This is achieving the desired effect of making the text stay left and the sub content stay right, without having to specify a width for the text (for responsive behaviour). However, semantically this is incorrect as I have had to place <div id="subcontent"/> before <div id="text"/> in the html, even though the text should appear before the sub content (assuming reading rtl). I can live with this to get the job done but unfortunately when the screen size is very small I need to make <div id="text"/> full width and let the sub content flow naturally afterwards. This currently means the sub content is at the top and I need it to be at the bottom.
How can I change the css so that when the html is ordered
<div id="text"/>
<div id="subcontent"/>
the sub content will float right without being pushed down by the text?
I need to support IE9+

Answer 1

Float is a pain.
Try to use flex and media queries for a responsive design :
Note: since you mention rtl reading, I strongly advise you to have a look on the flex-direction property (MDN)
#wrapper {
display: flex;
width: 400px;
background-color: red;
/* this is the default behavior - you can skip it */
flex-direction: row;
}
#text {
}
#subcontent {
width: 50px;
}
#media (max-width: 400px) {
#wrapper {
flex-direction: column;
}
}
<div id="wrapper">
<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis leo sapien. Nunc convallis elit purus, non fringilla quam lobortis at. Integer pharetra auctor luctus. In congue dolor a pretium facilisis. Donec et risus lacinia augue pellentesque mollis
eget a urna. Sed dapibus est enim, id iaculis arcu ultrices sit amet. Donec quis dolor risus. Suspendisse a nunc a enim mattis finibus eget vitae diam. Phasellus dictum commodo metus, ut rutrum dolor pretium a. Aliquam at sem vel tortor mollis tristique.
Proin neque dolor, pellentesque ut euismod id, finibus sed lacus. Mauris varius tempor diam, at varius risus. Etiam dictum metus et augue bibendum commodo. Vestibulum imperdiet elit vitae bibendum finibus. Maecenas mollis dui ex, id suscipit mauris
cursus vitae. Vivamus nec faucibus elit.</div>
<div id="subcontent">
<img src="http://lorempicsum.com/futurama/50/50/1" width="50">
</div>
</div>

Answer 2

Something like this?
#wrapper {
width: 400px;
background-color: red;
position: relative;
}
#text {
margin-right: 50px;
}
#subcontent {
position: absolute;
top: 0;
right: 0;
width: 50px;
}
<div id="wrapper">
<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis leo sapien. Nunc convallis elit purus, non fringilla quam lobortis at. Integer pharetra auctor luctus. In congue dolor a pretium facilisis. Donec et risus lacinia augue pellentesque mollis
eget a urna. Sed dapibus est enim, id iaculis arcu ultrices sit amet. Donec quis dolor risus. Suspendisse a nunc a enim mattis finibus eget vitae diam. Phasellus dictum commodo metus, ut rutrum dolor pretium a. Aliquam at sem vel tortor mollis tristique.
Proin neque dolor, pellentesque ut euismod id, finibus sed lacus. Mauris varius tempor diam, at varius risus. Etiam dictum metus et augue bibendum commodo. Vestibulum imperdiet elit vitae bibendum finibus. Maecenas mollis dui ex, id suscipit mauris
cursus vitae. Vivamus nec faucibus elit.</div>
<div id="subcontent">
<img src="http://moviesalbum.com/wp-content/themes/sunny/timthumb.php?src=http://moviesalbum.com/wp-content/uploads/2013/05/Koala-300x225.jpg&h=120&w=120&zc=1&q=90" width="50">
</div>
</div>

Answer 3

Cool. If I understand your question correctly, you are trying to change the order of the HTML, yet have the output still look the same?
If this is the case, you need to give #text AND #subcontent a float:left; add a clearing div and use a calc width on your text to make sure that the image will always fit in whilst the text can be responsively sized.
Here's a fiddle: https://jsfiddle.net/hk9ntyd2/1/
And here's the code:
#wrapper {
width: 400px;
background-color: red;
}
#text {
width: calc(100% - 50px);
float: left;
}
.clear {
clear: both;
}
#subcontent {
float: left;
width: 50px;
}
<div id="wrapper">
<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis leo sapien. Nunc convallis elit purus, non fringilla quam lobortis at. Integer pharetra auctor luctus. In congue dolor a pretium facilisis. Donec et risus lacinia augue pellentesque mollis
eget a urna. Sed dapibus est enim, id iaculis arcu ultrices sit amet. Donec quis dolor risus. Suspendisse a nunc a enim mattis finibus eget vitae diam. Phasellus dictum commodo metus, ut rutrum dolor pretium a. Aliquam at sem vel tortor mollis tristique.
Proin neque dolor, pellentesque ut euismod id, finibus sed lacus. Mauris varius tempor diam, at varius risus. Etiam dictum metus et augue bibendum commodo. Vestibulum imperdiet elit vitae bibendum finibus. Maecenas mollis dui ex, id suscipit mauris
cursus vitae. Vivamus nec faucibus elit.</div>
<div id="subcontent">
<img src="http://moviesalbum.com/wp-content/themes/sunny/timthumb.php?src=http://moviesalbum.com/wp-content/uploads/2013/05/Koala-300x225.jpg&h=120&w=120&zc=1&q=90" width="50">
</div>
<div class="clear"></div>
</div>
The margin-left:50px; solution should have worked fine, I personally find that the calc solution is a little neater, but feel free to use margin instead :)