Adaptable young person occupying an adaptable receptacle

I'm having an issue with the automatic shrinking of children within a flexible container box. I want the elements with classes .c1 and .c2 to shrink when the page size is reduced, so that their container with class .a2 also shrinks and stays positioned next to .a1, instead of moving underneath it.

.flexible-container
{
    background-color:red;
    max-width:500px;
}
.element-a
{
    background-color:yellow;
    width:100px;
    height:100px;
    float:left;
    display:inline-block;
}
.element-a2
{
    background-color:grey;
    overflow:auto;
    max-width:400px;
    width:100%;
}
.element-c
{
    background-color:blue;
    float:left;
    height:60px;
    width:50%;    
    overflow:auto;
}
.element-c2
{
    background-color:black;
}
<div class="flexible-container">
    <div class="element-a element-a1">aaa</div>
    <div class="element-a element-a2">
        <div class="element-c element-c1"></div>
        <div class="element-c element-c2"></div>
        <div style="clear:both"></div>
    </div>    
    <div style="clear:both"></div>
</div>

htmlcss

Answer №1

Your .a2 element is impacted by the following styles:

.a {
    float: left;
    display: inline-block; /* Not needed! Floats already act as blocks */
}
.a2 {
    width: 100%;
}

To make it work correctly, simply undo those styles:

.a2 {
    display: block; /* Default setting for <div> */
    width: auto; /* Initial value */
    float: none; /* Initial value */
}


.con {
  background-color: red;
  max-width: 500px;
}
.a {
  background-color: yellow;
  width: 100px;
  height: 100px;
  float: left;
  display: inline-block;
}
.a2 {
  display: block;
  width: auto;
  float: none;
  background-color: grey;
  overflow: auto;
  max-width: 400px;
}
.c {
  background-color: blue;
  float: left;
  height: 60px;
  width: 50%;
  overflow: auto;
}
.c2 {
  background-color: black;
}
<div class="con">
  <div class="a a1">aaa</div>
  <div class="a a2">
    <div class="c c1"></div>
    <div class="c c2"></div>
  </div>
  <div style="clear:both"></div>
</div>

Alternatively, you may choose not to set those styles to begin with.

.con {
  background-color: red;
  max-width: 500px;
}
.a {
  height: 100px;
}
.a1 {
  background-color: yellow;
  width: 100px;
  float: left;
}
.a2 {
  background-color: grey;
  overflow: auto;
  max-width: 400px;
}
.c {
  background-color: blue;
  float: left;
  height: 60px;
  width: 50%;
  overflow: auto;
}
.c2 {
  background-color: black;
}
<div class="con">
  <div class="a a1">aaa</div>
  <div class="a a2">
    <div class="c c1"></div>
    <div class="c c2"></div>
  </div>
  <div style="clear:both"></div>
</div>

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

Ensuring the title div is the foremost layer

So I have written the following code for my personal website: Here is the HTML: <html> <head> <meta charset="utf-8"> <title>My Website</title> <link rel="stylesheet" href="assets/css/style.css" ...

htmlcss

Tips on moving down the `<li><span>` elements with the jQuery `.slidedown()` method

I'm struggling to articulate my question clearly, so please bear with me. Essentially, I have a jquery script that reveals content within a div nested in an li. When I click on the header, the content drops down and visually pushes the next header do ...

jqueryhtmlcss

Picture goes missing from slideshow

I am currently using a CSS + Javascript slideshow on my website, inspired by an example from the W3Schools website. Here is the code I have adapted for my web application: $(document).ready(function() { var slideIndex = 1; function showSlides(n) { ...

javascriptjqueryhtmlcssslideshow

Shift the Search bar to the last position on the navigation bar

I'm looking to relocate the search icon and input field to the end of the navbar. I'm currently using Bootstrap 5.0.2, but I am still new to Bootstrap, HTML, and CSS, so I'm not sure how to accomplish this. I want the width of the search box ...

htmlcssnavbarbootstrap-5

How can I address the issue of width:100% truncating the content and causing a horizontal scrollbar in HTML/CSS?

I've searched high and low for a solution to this issue but have come up empty-handed every time. It's possible I just didn't search hard enough, but everything I've attempted so far has failed to work. This problem has been plaguing me ...

htmlcss

Is it possible to accomplish this straightforward task using PHP?

Essentially, my goal is to have the content inside the h1 tag duplicated in the h2 tag as well. Take a look at the example provided below. <!DOCTYPE html> <html> <body> <h1>The content here should also appear in the H2 tag.</h1 ...

phphtmlcss

Is there a way to eliminate the return?

Struggling to eliminate the unwanted return in my Wordpress loop. The layout is ruined by trying to display a thumbnail next to the entry: https://i.sstatic.net/j3Ozz.png Even using padding for the entry made it worse! Here's the code snippet that ...

htmlcsswordpresspositioning

What is the best way to render multiple components from a single file in the App.js?

I am currently in the process of learning React.js and I have a question regarding displaying multiple components in App.js. Specifically, I have two pages named Home.js and About.js. When running the code, if you click on "About Us", only the About Page ...

htmlreactjs

Navigate between links by using the Tab key, while excluding certain links from the sequence

On my webpage, I have a main menu, various links in the main content area, and a left menu. The challenge is to make the website accessible for people who are blind... When using the tab button to navigate between links, the order currently goes as follow ...

htmlcss

Decompressing CSS in PhpStorm

I'm currently using PhpStorm version 2016.3.2. Occasionally, I come across <style> tags in my HTML files containing minified CSS code. Is there a way to create a shortcut for unminifying the code within these tags? For instance, the following ...

htmlcssphpstormminifyunminify

Expanding your selection capabilities using BeautifulSoup

My objective is to harness the power of BeautifulSoup in a unique way. Within my HTML files, there are two specific tags that catch my interest. The first one, which I'll refer to as TagA, is <div class ="A">...</div> The second tag, k ...

pythonhtmlbeautifulsoup

Bootstrap 4: In collapsed navbar, li items are shown horizontally beside navbar-brand

I've been troubleshooting this issue for hours. It seems like the navbar is not collapsing correctly in Bootstrap 4, causing the next list item to display to the right of the navbar-brand text instead of below it like the other items. <nav class=" ...

javascriptjquerycsshtmltwitter-bootstrap-4

Tips for refreshing an element after modifying a data-* attribute

I have an element that has the following CSS style: #element:after { content: attr(data-percent); } In an attempt to change the data-percent attribute using jQuery, I used this code: $('#element').data('percent', '50%'); ...

javascriptjquerycssreflow

Is it possible to replace JavaScript files that are included in my index page if I am utilizing conditional comments specifically for IE9?

My website works perfectly in all browsers, except for IE9. After some investigation, I discovered that the issue lies with a jQuery plugin called multilevelpush.js. While it works great on other browsers, it simply won't cooperate with IE9. Upon fur ...

javascriptjqueryhtml

Which characters are permissible for the id attribute to prevent the jQuery selector from throwing an exception?

I am facing a situation where the id attribute is inputted by an end user. For instance, if the id for a textbox is "11_=11" as entered by the user, then the HTML code will appear like this: <input type="text" id="11_=11"> The corresponding jQuery ...

javascriptjquerycsshtml

In your web projects, how many external conditional stylesheets do you typically incorporate specifically for Internet Explorer?

What is the number of external IE Conditional Style-sheets utilized in your web projects specifically for Internet Explorer? Make sure to review this page before you provide an answer: http://css-tricks.com/how-to-create-an-ie-only-stylesheet/ ...

csscross-browser

Ensure that the keyboard remains open in an Ionic chat app when a button is clicked

Having some trouble with my Ionic v1 chat application. Everything is set up, but I'm running into an issue where clicking on the send button causes the keyboard to lose focus from the input and then close. I've tried several solutions, but none ...

htmlangularjscordovaionic-frameworkandroid-softkeyboard

Tips for controlling the last size in a CSS grid

<div class="grid-layout"> <img class="grid-item unview" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/9.png"> <img class="grid-item unview" src="https://s3-us-west-2.amazonaws.co ...

javascripthtmljquerycss

The secrets of z-index: Ensuring nested elements stay behind their parent element

Check out this demo to see the problem: http://jsfiddle.net/5sqxQ/2/ I am trying to make the sub menu appear below the main menu. I also want to use JavaScript to slide the menu from underneath when hovering over the parent li element. I don't real ...

cssnestedz-index

Prevent keypress from being detected while the confirm box is displayed

My website heavily relies on key events, and for certain actions, it triggers a bootbox confirm box. This confirm box appears over a transparent layer, blocking all mouse click actions unless the user interacts with the confirm box. Now, I also want to dis ...

javascriptjqueryhtmlbootbox