Do the divs keep shifting as I adjust the window size, even with a wrapper div in place?

As a newcomer to HTML, I am struggling with creating a basic calendar. Currently, I have only managed to create a grid. The issue I'm facing is that my wrapper div does not seem to be working properly - when I resize the window, the divs within it still move around. Can anyone provide insight into why this might be happening?

For reference, here is a link to my code on JSFiddle: 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>
</body>
</html>

htmlcssresizewindowwrapper

Answer №1

Prevent the wrapper from shifting by setting a minimum width of 1100px

Answer №2

To customize the layout based on your preferences, utilize both min-width and max-width. Here are some tweaks to your existing code:

Avoid using width: 100% in combination with the max-width property as it takes precedence over 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>

Answer №3

One issue that stands out to me is the logic behind the wrapper ID. Currently, it is set to "have the width of the whole screen" at 100%, while also being limited to a maximum width of 1100 pixels. This results in elements within the wrapper being pushed down if the width exceeds 1100 pixels.

#wrapper {
    margin: 5px auto;
    width: 1064px;
    overflow: hidden;
}

My suggestion would be to keep the width fixed at 1064 pixels, which accommodates the fixed boxes in rows and columns, each 150 pixels wide along with their borders.

If you anticipate the need for scalability in the future, consider utilizing a flexbox layout with min/max widths in row and column classes to automatically adjust based on screen size. The current solution lacks scalability.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

In Internet Explorer, auto margins in Flexbox do not function properly when using justify-content: center

My table has cells that can contain both icons and text, with the icons appearing to the left of the text. There are different alignment scenarios to consider: Only an icon is present: The icon should be centered Only text is present: The text should be ...

htmlcssflexboxinternet-explorer-11

How can I make Bootstrap Carousel slides transition as I scroll?

I have implemented the Bootstrap carousel on my website, but I am looking to customize its functionality. Specifically, I would like the slides to change whenever the user scrolls with their mouse. Is there a way to achieve this using Bootstrap Carousel? ...

javascriptjqueryhtmlcsstwitter-bootstrap

Choosing multiple images by clicking on their alternative text with jQuery

I am currently working on a project that involves clicking on a thumbnail to enlarge the image and display its name (alt) below it. I have made progress, but there seems to be an issue where only one image is displayed no matter which thumbnail I click on. ...

javascriptjqueryhtml

How can I disable the submit button when there is a change in the form input fields using PHP?

I am looking to disable a button that will submit my form if the fields are not changed. So, if I change a field, I would like to be able to submit the form by enabling the button, but only if at least one field is changed. <?php $listeToitures = $db- ...

phpjqueryhtml

Incorporate dynamic optgroup elements into an HTML dropdown menu

I created a modal form that contains two select boxes with the identical class name of current_models. <div class="row"> <div class="col-md-6> <div class="form-group"> <label class="control-label">Model</ ...

phpjqueryhtml

What are the steps to converting one grid to another solely with the use of Bootstrap utilities?

https://i.sstatic.net/SuGiM.png I am looking to convert the grid layout shown above into the grid layout displayed below. To achieve the above layout, I have used the following grid structure: <div className="row"> <div className=&q ...

htmlcsstwitter-bootstrapbootstrap-4

focusing on two different sections with a single hover effect

Is it possible to modify the styles of two different divs using CSS when hovering over one div? #down-icn { position: absolute; bottom: 0; right: 25px; color: #fff; -webkit-transition: color 0.25s ease; border-color 0.5s ease; -moz-transition: colo ...

htmlcss

I am adding the main stylesheet to the queue, but for some reason my images are not appearing

I'm in the process of converting HTML to a Wordpress theme. I've successfully enqueued the stylesheet, but unfortunately, some of the images are not displaying properly. It seems like it could be an issue with the subfolder structure. ...

htmlwordpresssubdirectoryenqueue

Creating an HTML table from a JSON file: Step-by-step guide

I am trying to create a code snippet that populates a table with data from specified .json files in the 'tracks' folder. The JSON file format looks like this: { "EndTime": "11:00", "Person": [ { ...

javascripthtmlnode.jsjsonwebpack

Dropdown feature in the side navigation bar

Is it possible to create a drop-down section in a navigation bar using HTML/CSS/JS? For example, clicking on 'products' would reveal a list of products that disappears when clicked again. If this is achievable, how can it be done? I am currently ...

javascripthtmlcss

Looking for a seamless way to convert jsp code to html using sightly in AEM 6.1?

I need help transforming JSP code to HTML using Sightly in AEM. In the JSP code, we have a scriptlet that stores a value from the dialog into a JSP variable called "coltype" using the code pageContext.setAttribute("coltype", xssAPI.filterHTML(properties. ...

javascripthtmljspaemsightly

Ways to extend the length/size of the HTML5 range input type

Is there a way to adjust the length or size of the HTML5 range input for it to appear longer or bigger? <!DOCTYPE html> <html> <body> <form action="/" method="get"> Points: <input type="range" name="points" min="0" max="10"& ...

html

Confirming the data entry format

I am currently utilizing the RobinHerbots/Inputmask plugin to mask telephone input. I am interested in finding out how I can implement input validation to ensure that the user has entered accurate information. Thank you! <form> <input ty ...

javascriptjqueryhtmljquery-inputmask

The validation for props is incomplete as the parameter 'match.params.id' is not present

I am currently working on a project and following a tutorial as I am still a beginner in this field However, my code is generating an error specifically at console.log(props.match.params.id); The error message reads: 'match.params.id' is missin ...

javascripthtmlreactjsreact-props

To submit the form, users must check off multiple checkboxes using JavaScript conditional statements

Currently, I am working on creating a form that requires multiple fields like name and email. While I have been successful in sorting out those fields, I am facing a challenge with the checkboxes. I am trying to figure out how to make it mandatory for two ...

javascripthtml

Tips for utilizing browser cache in AJAX requests to prevent loading the refreshed JSON file

It may seem like a strange question, but I'm experiencing an issue with an AJAX call to a JSON file. Both the request and response headers do not indicate to not use cache, and in the browser settings, the Disable cache option is not checked. What mor ...

javascriptjqueryhtmlcssajax

Are there any alternative elements to wrap <li> items besides <ul> or <ol>?

Here is what I currently have: <ul id="status-infos"> <li>x</li> <li>y</li> </ul> Is there a valid HTML element that can be used to wrap the <li> elements? For example: <ul id="status-infos"> < ...

html

Import Information into Popup Window

When a user clicks on the "view" button, only the details of the corresponding challenge should be displayed: Currently, clicking on the "view" button loads all the challenges. This is because in my view-one-challenge.component.html, I have coded it as fo ...

htmlangulartwitter-bootstraptypescript

The function putImageData does not have the capability to render images on the canvas

After breaking down the tileset The tiles still refuse to appear on the <canvas>, although I can see that they are stored in the tileData[] array because it outputs ImageData in the console.log(tileData[1]). $(document).ready(function () { var til ...

javascriptjqueryhtmlcanvas

Adding Jquery content to HTML templates using Jinja2: A Simple Guide

Looking at my HTML code Base.html <title> {% block title %}{% endblock %} </title> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="collapse na ...

pythonhtmljqueryflask