Vertical alignment and spacing for two divs
Question
I'm stuck with a vertical align issue. I have 2 divs. First one has auto height (depends on the browser size), the other one has fixed height and is positioned at the bottom of page. Also, the second div needs margin.
An exact example of what I want to do:
http://img199.imageshack.us/img199/9569/79106387.jpg
I tried:
<html>
<body>
<style>
* { margin: 0; padding: 0; }
body { background: #a7daf6; }
</style>
<div style="width:200px; height:100%; position:absolute; background:#000; opacity:0.6"> </div>
<div style="width:200px; height:40px; position:absolute; background:#eee; bottom:0; opacity:0.6"> </div>
</body>
</html>
but I can't give margin to second div. Any ideas?
3 answers
solution1
2 2011-02-02 22:46:02
try to add this for first div:
<div style="width:200px; position:absolute; top:0px; bottom: 42px; background:#000; opacity:0.6"> </div>
and remove margin-top from second one
solution2
1 ACCPTED 2011-02-02 22:49:11
If I understand correctly, you can simply apply to the first <div> this style: top:-42px .
If you need content inside the <div> , you can add another <div> with padding-top: 42px .
Like this:
<div style="width:200px; height:100%; position:absolute; background:#000; opacity:0.6; top:-42px">
<div style="padding-top:42px; color:#fff">hello</div>
</div>
solution3
0 2011-02-02 22:57:23
Giving any element an absolute position will remove it from the flow of the document. Not matter what the margin is other elements will not be affected.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.