Divs are moving around when I resize the window even with a wrapper div?
Question
I'm relatively new at HTML so please bear with me. I'm trying to make a basic calender, all I have now is a grid. For some reason my wrapper div doesn't seem to work, when I resize the window, the divs still move around. Does anyone know the reason why?
Here is a JSFiddle of my code: https://jsfiddle.net/ydbgz7y5/
#wrapper{ margin: 5px auto; width:100%; max-width: 1100px; overflow: hidden; } .column{ float: left; width: 150px; height: 750px; border: 1px solid blue; overflow: hidden; } .row{ width: 150px; height: 148px; border: 1px solid red; }
<html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="wrapper"> <div class="column"> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> </div> <div class="column"> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> </div> <div class="column"> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> </div> <div class="column"> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> </div> <div class="column"> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> </div> <div class="column"> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> </div> <div class="column"> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> </div> </div> </body> </html>
3 answers
solution1
1 2017-03-10 19:51:34
Give the wrapper a min-width: 1100px; to keep it from moving
solution2
0 2017-03-10 20:04:00
Use min-width along with max-width to make it work according to your choice here is some modification in your code
No need to use width: 100% along with max-width property as it always override it
#wrapper{ margin: 5px auto; max-width: 800px; min-width: 800px; overflow: hidden; } .column{ float: left; width: 150px; height: 750px; border: 1px solid blue; overflow: hidden; } .row{ width: 150px; height: 148px; border: 1px solid red; }
<html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="wrapper"> <div class="column"> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> </div> <div class="column"> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> </div> <div class="column"> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> </div> <div class="column"> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> </div> <div class="column"> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> </div> </div> </body> </html>
solution3
0 2017-03-10 20:10:25
The issue that I'm seeing is the logic in the wrapper ID. Right now, you're stating for the wrapper to "have the width of the whole screen" with width at 100%, and for the wrapper to "have a maximum width of 1100 pixels", forcing the wrapper to move elements below if the width becomes greater than 1100 pixels.
#wrapper {
margin: 5px auto;
width: 1064px;
overflow: hidden;
}
Here, what I'm saying is to keep the width permanently at 1064 pixels, which is the combination of both your fixed boxes in the rows and columns, 150 pixels wide, combined with their borders of a single pixel.
If you want to have the calendar scale in the future, I would recommend using a flexbox combined with min/max widths in the row and column classes to automatically scale the rows and columns based off of screen size. The above solution does not scale.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.