Creating a div that automatically resizes to fit a specific width, with excess content wrapping to the next row

In our project, we currently have a design with 4 div elements arranged in two rows and two columns.

However, the client has requested that we allow for multiple div elements within a container that spans 100% width. The inner divs should adjust to fit side by side within this width, breaking down into a new row if necessary.

<div class="container">
    <div class="block1"></div>
    <div class="block2''></div>
    <div class="block3"></div>
    <div class="block4"></div>
</div>

.container {
    width: 400px;
    position: relative;
}
.block1 {
    width: 198px;
    height: 198px;
    background: #FF0;
    border: 1px solid red;
}
.block2 {
    position: absolute;
    left: 200px;
    top: 0;
    width: 198px;
    height: 198px;
    background: #FF0;
    border: 1px solid red;
}
.block3 {
    width: 198px;
    height: 198px;
    background: #FF0;
    border: 1px solid red;
}
.block4 {
    position: absolute;
    left: 200px;
    top: 200px;
    width: 198px;
    height: 198px;
    background: #FF0;
    border: 1px solid red;
}

This current setup can be viewed here: http://jsfiddle.net/NE3rZ/

I am seeking suggestions on how to modify this design to make it responsive.

Answer №1

To align the inner divs next to each other, you can set them to float left using { float: left }

<div class="container">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

Next, apply the following CSS:

.container {
    width: 100%;
}
.block {
    width: 198px;
    height: 198px;
    background: #FF0;
    border: 1px solid red;
    float: left;
}

For a live demo, visit http://jsfiddle.net/NE3rZ/2/. Feel free to resize the width and see the effect.

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

Overflowing HTML Table Spills Over into Neighboring Div

Is there a way to make the data in a table that spans across multiple pages overflow into a separate div on the initial page without using JavaScript since I am generating it as a PDF? See the images below for reference. Current layout: https://i.stack.im ...

PHP code for retrieving all combobox values from a form during submission

When I submit the form, I am only able to retrieve the value of the last combo box. Is there a way to capture all the combo boxes' values? Also, I need to know how to access the value of a label. Below is the code snippet used to generate the list of ...

Dynamic Data Drive Multi-Series Line Graph

I am currently working on creating a D3 line chart. I have taken the code from the block builder and adjusted it with my own data. While the code is functional, I'm facing an issue where the labels are not showing up when I hover over the line. My ma ...

How to display an image stored in Laravel within a Nuxtjs application?

I'm trying to display all images that are saved in nuxtjs using Laravel's storage feature. <img v-for="(row, index) in files" :src="'storage/' + row" :key="index" alt="" width="150px" ...

Begin by opening a single div for each instance

I want a functionality where opening one div closes all the others. I've searched around for solutions and only found jQuery options, not pure JavaScript ones. Here is my code: function openDescription(description_id) { var x = document.getEle ...

Troubleshooting the 'innerHTML' Issue in Your Python Selenium Script

My Python Selenium script for sending emails via Gmail is throwing an error, and I need some assistance to resolve it. The error details are as follows: Traceback (most recent call last): File "C:\Users\Administrator\Desktop\New ...

Issue with Bootstrap v3.3.7 panel not collapsing as expected following height adjustment

Utilizing bootstrap 3.3.7 panels, I encountered an issue when trying to slide up the panel using the icon. The panel would not hide properly once the panel height was set, resulting in only the panel content body sliding up. Here is an example: $(&apo ...

Delete the following td when the mouse hovers over it

How can I modify my code to remove the next td on mouseenter of a particular td? Currently, my code is removing the first occurrence of mouseenter on any td and the current mouseover td. Here is the snippet of my code. Can anyone help me identify what&apos ...

Jquery bypasses original stylesheet settings when inline styles are removed

I have a CSS file with various styles defined within it. One style in particular has the property position set to 'fixed', but this only applies to specific combinations of classes. For example: .mystyle.blue { position: fixed; } Here, el ...

Setting up breakpoints for nested rows in Bootstrap can be achieved by utilizing the responsive

Currently, I am in the process of learning how to create a responsive website. One thing that has me puzzled is how to set the breakpoints for the content when the screen size changes. Here is what I am aiming to achieve: https://i.sstatic.net/DeyD0.png ...

Jquery Not Responding to HasChanged Function

I am a beginner and looking for some guidance. I am attempting to develop a single page app using Jquery and AJAX, but unfortunately nothing seems to be working; no errors or any other indication. There are three hyperlinks with hrefs: #/main, #/second, # ...

Pass the html form data to a PHP variable

I need assistance with updating a PHP variable with the value of an HTML form submission. Here is the code snippet: <form action="callback2.php" method="POST"> Enter Phone Number: <input type="text" size="10" name="nummerb" id="nummerb"> <i ...

Aligning an SVG within a container div

I am trying to display an SVG image inside a fixed-position div. Here is the HTML: <div class="main"> <svg class="svg" viewBox="0 0 180 100"> <rect height="100%" width="100%" fill="#003300"></rect> </svg> </div> ...

Protected Bootstrap Environment

Bootstrap is an amazing tool, but it tends to enforce too many opinions. The selectors used in its rules are quite broad, such as input or label. Is there a method to isolate Bootstrap's CSS so that it only impacts elements within a container with a ...

Experiencing a lack of desired outcome in Outlook when using simple HTML with table elements

When creating a template for Outlook, I encountered an issue where the logo appeared on the right and the link text was on the left, which is the opposite of what I wanted. How can this be resolved? <center> <table width="600px;" style="margin:au ...

Attempting to optimize a webpage design for compatibility with Google's mobile-friendly testing tool

After much searching on the forum, this is my first post, so I kindly ask for patience! I am dealing with a 20-year-old website that urgently needs to be optimized for mobile devices. With almost 2200 pages, manual editing is out of the question, so I nee ...

Python Script for Scanning a Website for a Specific Tag

Currently, I am exploring the process of creating a website monitoring script (which will eventually be set up as a cron job) that can access a specified URL, verify the presence of a specific tag. If the tag is not found or does not contain the expected i ...

SVG failing to display properly

I need to place a close button in the top right corner of my page. Here is the code for the SVG: .icon { width: 24px; height: 24px; /* any changes to the fill attribute have no effect */ fill: currentColor; } <svg class="icon"> &l ...

Graphic descending within container

Struggling to design some divs for image display, I encountered a problem where the image shifts down by 3 pixels. It seems this is due to a 3 pixel margin on the container div, but I'm puzzled as to why it affects the image position. padding:0; marg ...

Ways to gradually reveal all elements within a header section

Is there a way to gradually reveal all the components in my header once the window has finished loading by utilizing jQuery's fadeIn function? Below is the pertinent code snippet: HTML <div class="banner"> <header class="header"> < ...