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!
views:
109answers:
5
+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
2010-05-06 09:53:06
That is, an absolutely-positioned container `div`, with the two `div`s static-positioned (They will then stack).
Dan
2010-05-06 09:56:31
They have diffrent widths. The bottom div should be whole screen width, but the div above is absolute and centered.
Jack
2010-05-06 09:58:00
It will work, just do it, believe me. (ps: added example)
Lo'oris
2010-05-06 10:34:02
A:
Wrap both DIVs in a third one and position that one absolute instead of the original one.
RoToRa
2010-05-06 09:54:40
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
2010-05-06 09:58:43
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
2010-05-06 10:31:58
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
2010-05-06 11:06:43
There is no such thing as a `float: center;`. http://www.w3schools.com/css/pr_class_float.asp
Kyle Sevenoaks
2010-05-06 11:22:04