CODEWITHSUNDEEP
htmlcss
Question Overflow
Question Overflow

Reputation: 11255

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?

Upvotes: 10

Views: 60907

Answers (4)

jjenzz
jjenzz

Reputation: 1559

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

Upvotes: 5

Katti
Katti

Reputation: 2121

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.

Upvotes: 0

Ana
Ana

Reputation: 37169

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.

Upvotes: 3

Undefined
Undefined

Reputation: 11431

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.

Upvotes: 1

Related Questions