CODEWITHSUNDEEP
htmlcss
abiku
abiku

Reputation: 2246

Fixed element aligned left to main column

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?

Upvotes: 3

Views: 110

Answers (3)

insertusernamehere
insertusernamehere

Reputation: 23600

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

Upvotes: 3

Manoj H L
Manoj H L

Reputation: 843

the grey box is your fixedBox and it will always be 100px from the top and aligned left to main column

<body style="text-align:center;">
  <div style="width:1000px; margin: 0 auto; height:1000px; position: relative;" id="mainWraper">
    <div id="fixedBox" style="position:fixed; top:100px; left:0; width: 20px; height: 20px; background-color: #aaa;"></div>
  </div>
</body>

issues:

  1. always give fixed element width and height
  2. added top: 100px so that the fixedBox stays 100px from the top
  3. give some height to the mainwrapper

Upvotes: 0

jakecfc1992
jakecfc1992

Reputation: 196

Assign a margin to fixedBox rather then using fixed position:

#fixedBox{
  margin: 100px 0px 0px 0px; 
}

Upvotes: 0

Related Questions