tags:

views:

109

answers:

5

Hi,
I have div with position absolute and I want to put another div under.
The two divs have diffrent widths.
The div above is with position absolute and is centered. The div that should be at the bottom has 100% width.
How to make that?
Thanks!

+2  A: 
  • make one div that contains both
  • use float:right

example:

div#p8015buttons {
    position:absolute;
    bottom:0.5em;
    right:0.5em;
    width:90px;
}
div.p8015 {
    float:right;
    margin:1px;
}
Lo'oris
That is, an absolutely-positioned container `div`, with the two `div`s static-positioned (They will then stack).
Dan
They have diffrent widths. The bottom div should be whole screen width, but the div above is absolute and centered.
Jack
It will work, just do it, believe me. (ps: added example)
Lo'oris
A: 

Wrap both DIVs in a third one and position that one absolute instead of the original one.

RoToRa
A: 

Not tested, but this should do it.

HTML:

<div class="wrapper">
      <div class="one">
         Content
      </div>
      <div class="two">
         More content
      </div>
    </div>

And the CSS:

    .wrapper
    {
      position:absolute;
      width: 500px; 
      height: 400px;/*whatever you want*/
      }

    .one,
    .two
    {
      position:relative; /*or static*/
    }

Hope it helps :)

Kyle Sevenoaks
A: 

Tested HTML MARKUP

<div class="wrapper">
<div class="left-ontent>
</div>
<div class="right-ontent>
</div>
</div>

CSS

.wrapper{width:980px;margin:0 auto;position:absolute;}
.left-content{float:left;width:630px;}
.right-content{float:right;width:320px;}
The idea is to have two divs with difrrent widths one is with absolute position. centered with fixed width the other has no witdt (should be wide as screen) and the second div should be under the first.
Jack
A: 

Try this one, you can then move style to your css

<div style="width:500px; margin: auto; height:200px; background-color:black;">
</div>
<div style="width:100%; height:200px; background-color:green;">
</div>
Mauro
There is no such thing as a `float: center;`. http://www.w3schools.com/css/pr_class_float.asp
Kyle Sevenoaks
Sorry, I mispelled focusing on first div. Edited!
Mauro