是否可以使用CSS将元素放置在其容器的边界之外？

Question

Hey guys I have an interesting set up going on. I'm working on creating SOME mobile support for an existing site. Basically when the window is brought to a certain size or the page is opened up on a phone I want to the header to do something different. That part is easy the only thing I'm running into is this.

The basic structure of my header is this

[logo][user-stuff][right-side][1][2][3][/right-side]

These elements are all in a nice line in my header. My problem is that in mobile I need one of the elements from inside the containing div on the right to float underneath the header. So I either need it to pop outside of its container or I need its container to take up with the width of the screen. The idea is that it will end up looking like this.

[logo][user-stuff][right-side][1][2][/right-side]
[ 3 ]

any ideas how this can be done? If I have to use some Javascript to make this possible that's fine, but the markup needs to be minimal as per my bosses instruction. Just a little stumped on the direction.

current html

<div id="header">
  <div id="logo"></div>
  <div id="user-stuff"></div>

  <div id="right-side">
    <div id="1" class="right-side-section"></div>
    <div id="2" class="right-side-section"></div>
    <div id="3" class="right-side-section"></div>
  </div>
</div>

current css

#header {
  height: 48px;
  width: 100%;
}

#logo {
  display: inline-block;
  vertical-align: top;
}

#user-stuff {
  display: inline-block;
  vertical-align: top;
}

#right-side {
  display: block;
  float: right;
}

.right-side-section {
  display: inline-block;
  vertical-align: top;
}

Of course this is just a little bit of mockup code to give you an idea of the structure i'm working with and how everything is laid out. I just need to figure out a way to have div#3 drop underneath everything and take up the width of the screen when the screen is a certain size. Not sure how to have it breaks it's flow.

Answer 1

Since the header has a defined height this will be easy. Just add position: relative so that you can absolutely position child elements relative to itself.

Then you can set the css for div#3 to use absolute positioning as in the following example.

#header {
  height: 48px;
  width: 100%;
  position: relative;
}

#3 {
    position: absolute;
    top: 48px;
    left: 0;
    width: 100%;
    text-align: center;
}

See working Demo here: http://jsfiddle.net/Cce9n/

Please note that it is not valid to assign an ID starting with a number.

Answer 2

You may use Javascript to edit other div definitions,

EG changing the text-align style

document.getElementById("right-side").style.text-align = "center";