How to wrap div around another div without actually wrapping it? - html

Question

I want my page to look like this without resizing (disclaimer: own page), however, I would like that on resizing (or mobile), the "Introduction" would fall down under "Index" and look just like "History" looks, for example.
If possible, I would even like that, within the code, there's the index div and then the first box (in this case "Introduction", but in case of missing, "Required knowledge" would behave in the same way as now Introduction). This would make the PHP code behind much simpler. Also, 'Introduction' should flow naturally through the page as shown in the link above, wrapping around Index and filling 100% of the page under it.
This is what I've got so far, but I just cannot make it behave right. Without resizing it looks good, but the "Introduction" h2 would fall first due to it's % and fixed padding (horizontally 20px in total) while the text remains in place, getting in the middle of the text. I would like that, if the h2 falls down, the text follows in pure HTML and CSS.
Is this even possible? I'm trying my best but I cannot get it to behave as I'd like. This is the relevant code of 'test/ck' (when it works I'll put it in a separate stylesheet):
<div style="width: 25%; float: left; min-width: 150px; margin-right: 2%;">
<h2>
Index
</h2>
<div id="index" style="width: 100%">
<ul>
<li>Announcements</li>
<li>Description</li>
<li>Subjects</li>
<li>Competency</li>
<li>Schedule</li>
<li>Evaluation</li>
</ul>
</div>
</div>
<div id='box' style="">
<h2 style="width: 70%; float: right;">
<?php echo $_('Introduction'); ?>
</h2>
<p>
Lorem ipsum dolor sit amet, consecte22tur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<span style="clear: left; display: block;"></span>
<br><br>
<h2 id="announcements">Announcements</h2>
<p>
Lorem ipsum dolor sit amet, consecte22tur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<br><br>

Answer 1

I think you are looking for css media queries
http://www.w3.org/TR/css3-mediaqueries/
http://css-tricks.com/css-media-queries/
You can implement page width 'breaks' in your css like this:
#media all and (max-width: 600px) {
#index { width: 100% }
body { background: red}
}
Anything in the curly braces of the media query will be used if the page width is less than 600px.
Media queries are here to stay, and they degrade "gracefully" for those with sad old browsers.
Take a look at the example I have set up here:
http://jsfiddle.net/AqbSY/4/
resize the browser and see how this works.
You don't need to set the float or size on the #box elements.