CODEWITHSUNDEEP
cssresponsive-design
krisk
krisk

Reputation: 167

Making div automatically move to left on resizing

Using css, how can I make div to incrementally move to the leftmost position, i.e, touching the left screen border, as the browser windows is resized? It means, div should keep moving to the left till it touches screen browser left border, as browser is being resized.

#element {
  position: absolute;
  top : 40px;
  left : 300px;
 }

If I provide value in percentage, for left, it shifts gradually to left, but still that percentage is maintained. I want it reduced to 0 or some other lower value gradually, so that there is more space on right side.

Upvotes: 0

Views: 617

Answers (1)

Leeish
Leeish

Reputation: 5213

So you have a couple options. The most "smooth" would be to use a percentage and then at a certain point that you decide, a certain minimum screen width, you would put 0% or remove float or whatever it is you want to do. There would be a point at which it would sort of "snap into place" but if you make it a small resolution, say one used by phones in landscape, no one would ever see it snap. In order to accomplish this do as @Raunak Kathuria said and use a CSS media query, if you need an example of one I can write one, but it's pretty basic and there are tutorials everywhere. Just search for CSS media queries.

You other options would be to use a series of media queries, each moving the div to different locations. This wouldn't be gradual, it would be at certain screen sizes.

A lot of people when doing responsive design, myself included, get caught up on what the page looks like and acts as it's actually being resized. In reality this isn't important. I would argue the overwhelming majority of people don't resize their browser as they are viewing a website. They browse and move on. So as long as your page looks as you like it to at whatever screen size, the gradual movement is irrelevant. That's why I personally prefer media queries to a flexible layout. It provides the pixel control I desire.

Upvotes: 1

Related Questions