CSS vw does not seem to resize correctly


#1

I want to use css vw units so that my webpage resizes as the window size resizes. The problem is, it does not function like it should. Here is the code I am using:

<div id="row_1">
		
		<div class="banner row_1_element" id="menu" >
			Menu 
		</div>
			
			<div class="banner row_1_element">
				Top Users 
			</div>
				
				<div class="banner row_1_element">
					My Profile
				</div>
			
			<div class="banner row_1_element">
				Login
			</div>
		
		<div class="banner row_1_element">
			Create Account
		</div>
	
	</div>
.row_1_element{
	text-align:center;
	font-size:3vw;
	width:19.52vw;
	margin-top: 0.2vh;
	margin-left: 0.1vw;
	float:left;
    border:0.2vw solid #000;
}
#menu{
    margin-left:0; /*to make sure the leftmost rectangle 
is farthest to the left, (no need for space)*/
}

I am trying to create a row of 5 rectangles, there are 5 rectanges each 19.52 vw plus 10 (0.2)vw borders for the boxes (1 border of width 0.2vw on each side of the box) and 4 (0.1)vw spaces between each rectangle. so 5*(19.52) + 4*(0.1) + 10*(0.2) this should always add up to 100vw no matter what the size of the window is.

This works fine when when in full screen mode, but when I resize the chrome window to a very small width, the the last element of row 1 spills over to the next row.


#2

http://caniuse.com/#search=vw

Borders can use the more traditional px units so there is no need to calculate the border, only the box size.


#3

But if I use vw and px, how will I be able to keep everything the same size? i.e. if one is dynamic (vw) and the other is static (px) than isn’t it impossible size the box if at different viewport widths 1px will be equal to a different vw?


#4

And also in reply to a quote from the link provided, “Chrome does not support viewport units for border widths, column gaps, transform values, box shadows or in calc() until version 34.” I think I have the latest chrome, so I can use vw as border values, I even checked by setting the border width to 100vw and it worked.


#5

I’m still of the view that borders should not be proportional. It just means more calcualtions for the browser every time it has to redraw the page. Borders can have fixed width and will always fit the box they wrap around.


#6

How can I use px for the border width? when resizing the window, the width of 1px increases compared to that of 1vw, therefore my row element slides to the next row instead of remaining in the same row. And I still do not know why, when resizing, does my element slide to the next row, given that my calculations are correct everything should work correctly.


#7

It’s weird that anything set in px would change at all. It is a fixed to the exact pitch of the screen. Use what works, and don’t let my opinion sway you.


#8

I want to use px, but I don’t know how I could use it to fix my problem, any ideas?


#9

Make the rule later in the cascade. { border-width: 1px } should override any previous border rules for that selector.


#10

I think there has been a communication error on my part, if I do border-width:1px, then I am left with a gap on the right side.

I want it so that all of the 5 rectangles take up 100% of the viewport width. {border-width: 1px;} works, you are right. But than I am left with a 1/2 centimeter of empty space on the right side of the screen.
|/==/ /==/ /==/ /==/ /==/ | <-- this being my screen, and those being 5 rectangles, I want a perfect fit like this:
|/==/ /==/ /==/ /==/ /==/| <-- no gap.


#11

Set up a bsic repl that contains only the elements in question, and your CSS. Then we can see what is happening.


#12

There were no errors in the REPL, When I resized the repl window, my last element stilll spilled out into the next row.


#13

Save the repl and post a link, please.


#14

deleted for reasons unknown to mankind.


#15
.banner{
	color: rgb(255,255,255);
	border: 1px solid #000;             /* changed */
	background-color:hsl(150,0%,40%);
}

.row_1_element{
	text-align:center;
	font-size:3vw;
	width:19.9vw;                       /* changed */
	border:1px solid #000;              /* changed */
	box-sizing: border-box;             /* added */
	margin-top: 0.2vh;
	margin-left: 0.1vw;
	float:left;
	text-decoration:none;
}

#16

Thank you very much! I didn’t know about the box-sizing property, you saved me a lot of headache!


#17

Your repl was anonymous, so may be lost. Good thing I had it open. Here is your code…

<!DOCTYPE html>
<html>
  <head>
    <title>home</title>
  </head>
  <body>
    <div class="banner" id="title">TITLE</div>
    <div id="row_1">
      <div class="banner row_1_element" id="menu" >Menu</div>				
      <div class="banner row_1_element">Top Users</div>					
      <a href="" class="banner row_1_element">My Profile</a>				
      <a href="" class="banner row_1_element">Login</a>
      <a href="" class="banner row_1_element">Create Account</a>
    </div>
  </body>
</html>
body{
	margin:0;
}
.banner{
	color: rgb(255,255,255);
	border:1px solid #000;
	background-color:hsl(150,0%,40%);
}
#title{
	text-align:center;
	font-size:5vw;
	margin-top: 2vw;
}
.row_1_element{
	text-align:center;
	font-size:3vw;
	width:19.9vw;
	border:1px solid #000;
	box-sizing: border-box;
	margin-top: 0.2vh;
	margin-left: 0.1vw;
	float:left;
	text-decoration:none;
}
#menu{
	margin-left:0; /*to prevent leftmost element from having margin*/
}
.row_1_element:hover{
	color:hsl(150,0%,40%);
	background-color:rgb(255,255,255);
}

I didn’t study the HTML earlier, but see some things that are odd.


#18

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.