Menu
I'm not sure if that can be done with pure CSS. The site structure looks like this:
<body style="text-align:center;">
<div style="max-width:1000px; margin: 0 auto;" id="mainWraper">
<div id="fixedBox" style="position:fixed; top:100px; left:0;"></div>
</div>
</body>What I want to do is make the fixedBox element to be displaed always 100px from the top screen and aligned to the left side of the mainWraper. mainWraper is responsive with the max width - 1000px;
I know that it can be done with JS but can I do this also only with css?
374
If the width of the container is below 1000px the box will be aligned left to the viewport. Otherwise, it will be aligned left to the container:
#fixedBox {
position: fixed;
left: 50%;
/* move it back half the width of your mainWrapper */
margin-left: -500px;
}
@media screen and (max-width: 999px) {
#fixedBox {
left: 0;
margin-left: 0;
}
}
Demo
Try before buy
196
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
