How to move div from bottom to top

Question

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?

Are you using any media queries? How are you working out if the device is a small screen? — Undefined, May 26 '12 at 08:57
@Sam: yes, I am using media queries with the window width as an indicator. — Question Overflow, May 26 '12 at 08:59
How are you positioning it at the bottom? With position:fixed, or with the natural flow of elements? — ezakto, May 26 '12 at 08:59
@eZakto: I am using the natural flow of elements for the default positioning of the menu at the bottom. — Question Overflow, May 26 '12 at 09:02

score 5 · Answer 1 · answered Jul 24 '15 at 15:21

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: http://jsbin.com/lifuhavuki/1/edit?html,css,output

Ana · Accepted Answer · 2012-05-26T09:14:52.673

3

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.

edited May 26 '12 at 09:14

answered May 26 '12 at 09:09

Ana

35,599
6
80
131

The problem is that the menu is dynamic, depending on which page I am on, there could be more links or less links on the menu itself. – Question Overflow May 26 '12 at 09:16
This is a very interesting problem then. I'd say a bit of JavaScript can do the trick, but I'm really curious if anybody can come up with a pure CSS solution. – Ana May 26 '12 at 09:22
I saw your works on CSS3, quite impress with the solar system you drew. If you can't do it, I doubt others can. Would have to combine your solution with javascript then. – Question Overflow May 27 '12 at 09:44
Would you mind helping me with [this bounty question](http://stackoverflow.com/q/10672586/948920)? – Question Overflow May 29 '12 at 02:35

score 1 · Answer 3 · answered May 26 '12 at 09:04

1

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.

answered May 26 '12 at 09:04

Undefined

11,234
5
37
62

As pointed out by yourself, it doesn't work without changing the html structure. The sub-menu will be blocking the content. I am looking for something that works like a float. – Question Overflow May 26 '12 at 09:10
1

`position: fixed` is great, but I wouldn't use it for mobile, there are still a lot of problems - check http://bradfrostweb.com/blog/mobile/fixed-position/ – Ana May 26 '12 at 09:13

score 0 · Answer 4 · answered May 26 '12 at 10:12

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.

How to move div from bottom to top

4 Answers4