How to keep the same structure and positions of my divs regardless the browser window size?

Question

i'm having for example 3 divs next to each other,covering all available width in the browser like this

and i want them to stay like this when the window is resized or zoomed in/out

where should i start ?

div {
  position: relative;
  float: left;
  border: 1px solid black;
  width: 100px;
  height: 50px;
  margin: 2px;
}

<div></div>
<div></div>
<div></div>

score -1 · Answer 1 · answered Mar 27 '21 at 10:03

-1

you should add overflow property to parent div like below:

.parent{

overflow:auto; }

answered Mar 27 '21 at 10:03

sid

in the snippet the parent is the body which has this property by default. Non-theless it remains a terrible solution as it is unresponsive and not does what the OP actually wants. flexbox or grid are the way to go. give the width of 1fr or 33.3% – tacoshy Mar 27 '21 at 10:56

1 Answers1