Vertical alignment and spacing for two divs
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 ha开发者_如何学Pythons 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?
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
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:
Live Demo
<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>
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.
加载中,请稍侯......
精彩评论