CODEWITHSUNDEEP
css
David542
David542

Reputation: 110209

Positioning a banner in CSS

How do I position an element absolutely from the top, but relatively from the sides.

I.e., the object needs to be Xpx. from the top (absolute) and stay centered from the sides.

I tried the following CSS, but it was not working.

position: absolute; top: 105px; margin: 0 auto;

Thank you.

Upvotes: 1

Views: 10118

Answers (3)

jrn.ak
jrn.ak

Reputation: 36619

Live Demo

<style type="text/css">
div { padding: 5px; }
#outer {
    border: 1px dotted #F00;
    position: absolute;
    top: 105px;
    right: 0px;
    left: 0px;
}
#inner {
    border: 1px dotted #0F0;
    margin: 0 auto;
    text-align: center;
    width: 200px;
}
</style>

<div id="outer">
    <div id="inner">Banner</div>
</div>

Upvotes: 1

DouglasMarken
DouglasMarken

Reputation: 324

I would place it inside a container that had absolute positioning, and then make it's postition relative to that.

#container { position: absolute; top: 105px; }
#box { position: relative; margin: auto; }

Then just:

<div id="container">
  <div id="box">
  </div>
</div>

This is just off the top of my head.

Upvotes: 2

Phrogz
Phrogz

Reputation: 303253

If it has a known, fixed width, set the margin-left to negative half the overall width:

#banner { position:absolute; width:400px; left:50%; margin-left:-200px }

Upvotes: 1

Related Questions