say I have layout like so:
<div id="main"> <div id="NormalContent"> {some content which is a fixed length list} </div> <div id="FeaturedContent"> {some content which may contain a long list} </div> </div> and I want to place FeaturedContent above NormalContent.
Can I do this with CSS? I assume I can with Javascript?
For a non-jquery answer
var content = document.getElementById('FeaturedContent'); var parent = content.parentNode; parent.insertBefore(content, parent.firstChild); Note that there is no need to remove it from the DOM, adding it a second time will move it.
this is a clearer way to move them with 1 line of jQuery:
$('#FeaturedContent').prependTo('#main'); In Javascript you could simply reorder them on the page.
With CSS it would be possible to swap them left and right if they were side by side (with some conditions), but not one above the other.
If you know exactly the dimension of FeaturedContent & NormalContent, you might be able to get away with using position:relative and playing around w/ their top properties.
i.e.
#NormalContent { position:relative; top:22px; } #FeaturedContent { position:relative; top:-22px; } But to make them flow... hmm... not sure you can do that.
With jQuery you can do something like:
$("#NormalContent").remove().insertAfter($("#FeaturedContent")); This answer seems to work aswel. CSS(3) only, very elegant solution.
CSS have a div that's to the right below the left div. Divs are reverse in HTML
