CODEWITHSUNDEEP
cssresponsive-design
Federico
Federico

Reputation: 1422

Keep constant margin based on vw

How can I give margin to #more so it will be always at the same distance from #logo when resizing the window?

Look at the code down here in fullscreen and resize the window you'll see that the distance from 1 to 2 changes.

Thanks for the help.

body {
  font-size: 5vw;
  font-family: Arial;
  letter-spacing: 1px;
}
#logo {
  top: 10px;
  left: 10px;
  position: fixed;
}
#more {
  top: 10px;
  left: 50px;
  position: fixed;
}
<div id=logo>1</div>
<div id=more>23456789</div>

Upvotes: 1

Views: 806

Answers (2)

Federico
Federico

Reputation: 1422

Actually I can float:left both div and it works aswell.

body {
  font-size: 5vw;
  font-family: Arial;
  letter-spacing: 1px;
}
#logo,#more {
float:left;
}
<div id=logo>1</div>
<div id=more>23456789</div>

Upvotes: 0

Joel Harkes
Joel Harkes

Reputation: 11661

You want to use the same unit you use for your font-size: which is vh.

2 important side notes:

  • dont use position: fixed if you want to really be responsive
  • don't use id's in css, you are not allowed re-use these in html.

body {
  font-size: 5vw;
  font-family: Arial;
  letter-spacing: 1px;
}
#logo {
  display:inline;
}
#more {
  display:inline;
  padding-left: 2vw;
}
<div id=logo>1</div>
<div id=more>23456789</div>

Upvotes: 2

Related Questions