How to move div from bottom to top

I have a variable height, 100%-width sub-menu which is normally positioned at the bottom of the page. I want it to be at the top of the page when viewed through a browser with a small window. The following is the structure of the HTML for the page:

<div id=container style='height: 500px; background: red;'> <div id=content style='width: 100%; background: green;'>content</div> <div id=sub-menu style='width: 100%; background: blue;'>sub-menu</div> </div> 

How can I get the variable height sub-menu to the top without blocking the content of the page using CSS?

4 Answers

You can use display: table-header-group;...

HTML:

<div id=container> <div id=content>content</div> <div id=sub-menu>sub-menu</div> </div> 

CSS:

#container { display: table; width: 100%; } @media (min-width: 500px) { #sub-menu { display: table-header-group; } } 

Demo:

If you know the height of your sub-menu, then you can do it using position: relative on #container and position: absolute on both your #content and #sub-menu. You'll also have to give the #container a top value that's equal to the height of your #sub-menu.

Im not sure how you have your media queries set out. This might not be possible with your html structure so you may have to edit this for it to work.

#sub-menu { position:fixed; top:0; width:100%; background-color:#f00; } 

The code above will need to be placed inside your media query for small screens.

Here's the css media query solution.

/* Mobile Portrait Size */ @media only screen and (max-width: 479px) { position:absolute; top:0px; height:auto; /* So that the content wont be lost with the reduction in width. */ } 

With little more explanation of how u've placed the div or by linking it up with a fiddle would be helpful.