Apologies for posting this inquiry here, but I am facing a challenge with an iPad issue when switching to portrait orientation on my website.
I am using a @media query to detect the portrait view and I want to switch from three columns to two. However, the issue arises when the content in the left column dynamically expands, causing it to overlap under the right-side div that is transitioning to the left side.
I suspect that the expanded content is being hidden by the right div because I have set its "position:absolute". If anyone has encountered this issue before and knows of a quick fix, please share your advice.
Below are the CSS elements I would like to move to the left side:
#main_wrapper #agenda_wrapper {
width:23%;
left: 5px;
top: 2px;
}
#main_wrapper #summary_wrapper {
float:left;
position:absolute;
left: 5px;
top: 280px;
width: 23%;
}
Here is the structure of the HTML:
<div id="wrapper">
<header id="pageHeader">
<div id="main_wrapper">
<div id="agenda_wrapper"></div>
<div class="main"></div>
<div id="summary_wrapper"></div>
</div>
<footer>
</div>