Stop the container from wrapping and allow its children to wrap instead

Here is a snapshot of my current layout:

<div class="left">
    ...
</div>

<div class="right">
    <div class="inner" />
    ... several more of these ...
    <div class="inner" />
</div>

My CSS code looks like this:

div { display: inline-block; }
.left { width: 25%; }
.right { width: 75%; }
.inner { width: 33%; }

I am aiming for the following design when the screen is at its original size:

+--+-----+
|  |O O O|
|  |O O O|
+--+-----+

When I decrease the browser's width, here is what I would like to see:

+--+---+
|  |O O|
|  |O O|
|  |O O|
+--+---+

However, this is how it currently appears:

+--+
|  |
|  |
+--+
+-----+
|O O O|
|O O O|
+-----+

If I continue to shrink the browser window further, I want to avoid this scenario:

+--+
|  |
|  |
+--+
+---+
|O O|
|O O|
|O O|
+---+

Can this be accomplished?

Answer №1

Hopefully this will provide you with a more optimal outcome.

div {
  display: inline-block;
  margin: 0 auto;
}

.left {
  width: 25%;
  float: left;
}

.right {
  width: 75%;
  float: right;
}

.inner {
  width: 33%;
}
<div class="left">
  ...
</div>

<div class="right">
  <div class="inner" /> ... a bunch of these ...
  <div class="inner" />
</div>

Answer №2

Sure thing, flexbox makes it possible.

html

<div class="parent">
  <div class="left">Some Content</div>
  <div class="right">Some more content</div>
</div>

css

.parent {
  display: flex;
  height: 100vh;
  width: 100vw;
}

.left, .right {
  flex: 1 1 auto;
  border-color: black;
  height: 100%;
  width: 100%;
}

.left{
  background-color: red;
}
.right{
  background-color: blue;
}

View the code in action on CodePen here

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

Selector matching a descendant element in React styling

I am facing a challenge with using the direct descendant CSS selector within a React inline style element: <style>{` .something>div{ color: blue; } `}</style> While this works fine in development, in production React replaces > ...

Retrieve the content of a specific HTML tag using JavaScript

Is it possible to extract the content of a specific HTML tag as a string or XML format? <body> <script src="jquery.min.js"> //var test = document.getElementsByTagName("input"); //alert(test[0]); $(document).ready(function ( ...

The art of organizing dates and times

Need help with formatting a datetime that is retrieved from the database. The current format is as follows: 2012-06-11 21:39:54 I would like to display it in the format of June 11. Any suggestions on how this can be achieved? Thank you! ...

arranging texts in a vertical stack with wrapping

Looking to change the orientation of my horizontally wrapped list items from vertical to horizontal. Take a look at my code snippet: HTML <ul> <li>Long text goes here.</li> <li>Another Longer Text Goes Here</li> < ...

Setting the CSS property `position: absolute; bottom: 0`, will move the div to the bottom of the screen rather than the bottom of

I'm currently working on a website where I want to attach a menu-bar to the bottom of the header using #menu { position: absolute; bottom: 0; } Unfortunately, instead of sticking to the bottom of the parent div, the menu-bar is stuck to the ...

The grid elements are not in perfect alignment

I'm having trouble aligning the <p> element to the left and the image to the right. The image is not aligning properly with the fourth column, so I need to figure out how to fix that. .content{ display: grid; grid-template-columns: 25% 25 ...

Adjust the Division's Width to be 20% of the Total Page Width Excluding Margins

https://i.sstatic.net/T0nKq.png I need to create a menu page with 5 equal columns, but I'm facing an issue with the layout. Here's my current CSS for the yellow divs: width:20%; height:100vh; background-color: yellow; display:inline-block; In ...

The background-repeat property in CSS appears to cease functioning when the container becomes too wide

Exploring various combinations of space and round values for background-repeat, I've discovered a way to utilize radial gradients to create a visually appealing dotted border on an element without having the dots cut off. .test { background-repeat: ...

saving selected values to the database

I have updated the question, thank you for your help. The code seems to be working fine but I need some assistance with increasing the booked count in the database when the user clicks "Confirm Choices." Additionally, if the user selects a booked image, ...

data-cy appears in the DOM structure, yet remains unseen

I'm seeking some clarity on how to effectively use Cypress. While writing end-to-end tests, I encountered a failed test due to the element not being visible. A helpful answer I found assisted me in resolving this issue by clicking an element that was ...

Creating a Form with HTML and CSS

I am currently working on setting up a banner that includes an overlay with a cutout. Beneath the overlay, there is an image. My goal is to create this design using HTML and CSS. I have been experimenting with pseudo-elements but I am having difficulty re ...

What steps can I take to create a responsive jQuery UI buttonset?

I am currently facing a challenge with my web app (http://www.tntech.edu/cafe-menu.php) which is being iframed into a mobile application developed by ATT. The button sizes vary on different phone models, and I am seeking a solution to make them responsiv ...

Leveraging the power of dual CSS classes for a single element

Can you help me troubleshoot this? I have a .social div, and I want zero padding on the top for the first one, and no bottom border for the second one. I tried creating classes for the first and last scenarios, but it seems like something is off: .socia ...

The submit function for Ajax is not functioning properly

<script> var markerLatitude; var markerLongitude; function initializeMap() { var centerCoordinates = new google.maps.LatLng(51.8979988098144, -2.0838599205017); var mapOptions = { zo ...

How can I use Ajax to show only one div on the entire page while keeping the CSS and other header content intact

One of my clients is looking to integrate a merch shop into their website. The existing merch page is not visually appealing and doesn't match the aesthetic of the client's site. I am considering using AJAX GET to fetch the content of the merch p ...

The modal popup is getting lost behind the slider

I am facing an issue with opening a Modal popup for customer details. The problem occurs when the modal opens behind a slider on the website. However, when I slide the page down, the content of the modal becomes fully visible. https://i.stack.imgur.com/wR ...

Guide on making an SVG tooltip using the Menucool JS extension

I am trying to add a simple tooltip to an SVG "map" when the mouse hovers over a rectangle. To create the tooltip, I would like to utilize this specific plugin. Here is how I have connected the SVG to HTML: <object data="map.svg" type="image/svg+xml" ...

Sending a concealed input according to the chosen option

I'm attempting to send some hidden values to a Servlet via a form, but my goal is to only pass them if the user chooses a specific option. <!-- FORM ABOVE --> <input type="hidden" name="foo" id="foo" value="foo"> <input type="hidden ...

IE not rendering 'right' property in jqueryui CSS

I am attempting to shift a neighboring element after resizing a text area, triggered by the stop event on jqueryUI's resizable feature: $("textarea").resizable({ stop: function (event, ui) { var x = ui.originalElement.closest("li").find(" ...

Using brush strokes to create a unique design on the canvas page

Currently, I am working on implementing a brush-like effect on a web page. The task involves providing multiple patterns/textures in the background and allowing users to drag their mouse to create the pattern effect on the page. If you want to see the st ...