CODEWITHSUNDEEP
htmlcsslayoutresponsive-design
Michael Grigsby
Michael Grigsby

Reputation: 12173

HTML elements changing positions on browser resize

Why are the boxes and images moving on browser resize in this video?

Here is my code:

style="width: 98pt; position: fixed; left: 112pt; bottom: 175pt"

Upvotes: 1

Views: 3972

Answers (2)

GG.
GG.

Reputation: 21904

Because...

Its design is flexible.

How to make

According to this other answer:

  • Use percentage based widths for dimensions of your page and elements rather than pixels.

  • Use em for your font sizes rather than px or pt.

  • Try not to use images for navigation or if you do, make them expandable using the sliding doors method. Read this: #1.

  • Read up on liquid layouts: #2 or #3.

To go further

If you want to learn more about this, I recommend this book:

Responsive Web Design by Ethan Marcotte.

enter image description here

Upvotes: 3

ButterDog
ButterDog

Reputation: 5245

Because they are attached to the bottom of its container (the body tag maybe?)

Use "top:###pt" instead of "bottom: 175pt".

I think it would be better to specify its height instead.

<body>

  <div style="position:fixed; top: 50px; left: 50px; width: 100px; height: 100px;">content</div>

</body>

Upvotes: 0

Related Questions