CODEWITHSUNDEEP
htmlcssfullscreenvertical-alignment
user463393
user463393

Reputation:

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 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?

Upvotes: 1

Views: 1439

Answers (3)

RobertO
RobertO

Reputation: 2663

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

Upvotes: 2

Oliver A.
Oliver A.

Reputation: 2900

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.

Upvotes: 0

thirtydot
thirtydot

Reputation: 228202

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>

Upvotes: 1

Related Questions