I am facing an issue with aligning two div elements inside a parent div. Currently, they are rendering side by side:
<image><info>
However, on smaller screens, I want them to render one under the other and swap positions, like this:
<info>
<image>
In reality, their order in HTML is
<info>
<image>
Both of these elements have float:right applied to them so that they appear swapped and side by side. When the screen size decreases, I remove the float properties and they stack vertically as intended. I followed Shlomi's solution from here and it works perfectly.
The problem arises when I try to align the div elements to the left horizontally. Due to the float:right, they end up aligning on the right instead.
I attempted to give the container position:relative and the children position:absolute, allowing me to use left:0; and right:0. However, this caused the container to have zero height and resulted in a vertical scrollbar appearing. If I remove the position:absolute, the layout returns to normal but without the desired left alignment.
My current code snippet is as follows:
#container{
width: 100%;
height: auto;
display: block;
margin-top: 30px ;
padding-bottom: 38px;
clear: both;
overflow: auto;
position: relative;
}
#image{
display: block;
height: 221px;
width : auto;
float: right;
margin-right: 20px;
position: absolute;
clear: both;
overflow: auto;
}
#info{
width:-moz-calc(100% - 331px);width: -webkit-calc(100% - 331px);width: calc(90% - 331px);
height: 500px;
display: block;
float: right;
position: absolute;
clear: both;
overflow: auto;
}