After spending hours searching, I am still struggling to get two divs to sit next to each other at 50% width each, with a third div below that spans 100% width. The challenge is to make the layout responsive, so that when the screen size is reduced to around 960px, the right div moves under the left one.
I attempted some code for this layout, but encountered an issue where the right div shrinks as the browser size decreases. I'm aware that my approach may not be correct, but I am in the learning phase and seeking assistance regarding this basic question! Any guidance would be greatly appreciated!
To provide a clearer picture, I can share an image illustrating the desired outcome. Essentially, I need two divs side by side in one row (each at 50% width) and one full-width div in the second row.
For reference, the images used will vary in size and have different amounts of text below them. Please note that the example layout image provided is just for demonstration purposes and does not represent actual scale. Additionally, the site's background should remain clear without any color, as shown using contrasting colors in the example divs.
Below is how the responsive design should appear:
HTML:
<div class="custom_div">
<div id="one">one</div>
<div id="two">two</div>
<div id="three">three</div>
</div>
CSS:
.custom_div {
overflow:hidden;
}
.custom_div div {
min-height: 100%;
padding: 10px;
text-align: center;
}
#one {
background-color: gray;
float:left;
margin-right:0px;
width:50%;
}
#two {
background-color: white;
overflow:hidden;
margin-right: 20px;
margin: 1px;
width:auto;
min-height: 50%;
}
#three {
background-color: yellow;
margin-right:auto;
margin-left:auto;
width: 100%;
}
@media screen and (max-width: 600px) {
#one {
float: none;
margin-right:0;
width:auto;
}
}