Should be really simple... I thought.
I have a set up as such:
<div id="main">
<div id="a1">THE FIRST</div>
<div id="a2">THE SECOND</div>
</div>
I want the entire main div to be positioned at the top right hand corner of my screen and when I resize the browser, I want it to STAY there. I'm not talking fixed positioning - Just absolute.
However, this css isn't working. Any ideas?
#main {
position:relative;
top:0;
right:0;
z-index:300;
min-width:0;
width:8%;
}
#main #a1 {
position:absolute;
background: #082540;
z-index: 300;
right:0;
top:40px;
}
#main #a2 {
position:absolute;
background: #082540;
z-index: 300;
right:0;
top:0;
}
** EDIT **
If I put the div at the top right hand, I want it to disappear (like "fixed") when I bring the browser in from right to left.
ID and NAME tokens must begin with a letter, that is why your #1
and #2
styles are not applying, change them to something like #a1
or #a2
UPDATE:
Just add float:right;
to your #main
div
Working demo
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With