I am facing an issue with a container div that contains two elements. When I resize the window, one inner div moves under the other.
However, my requirement is that when one div moves under another on resizing, the first div should occupy the full width of the parent container.
This problem involves multiple div elements. You can experiment with multiple divs but try to find a solution that works for all scenarios.
Check out the fiddle example:
Below is the HTML and CSS code I have been using:
<div class="cont">
<div class='inner'></div>
<div class='inner'><div>
</div>
I am looking for a CSS solution as I already know that I can adjust the child div within the container using CSS properties like below:
.cont {
width:100%;
background-color:yellow;
overflow:hidden;
white-space:nowrap;
height:100px;
}
.inner {
width:200px;
height:80px;
margin:4px;
border:1px solid black;
float:left;
display:block;
}