I have a main container with two nested elements.
<div id="middleHolder">
<a href="#">
<img>
</a>
<div id="sidebar">
<p>content</p>
</div>
I am looking to achieve a layout where the link is floated to the left and covers the full size of the image (655px X 506px). The sidebar should also be floated left, aligning with the link when its width is between 33.5% and 27%. If the width becomes smaller than this range, I want the sidebar to move onto a new line and occupy the full width.
Is there a way to dynamically adjust the width of a div within a specific range before allowing it to break onto a new line without using multiple media queries?
Here is the CSS code provided:
#middleHolder > a {
float: left;
margin: 0 2% 2% 0;
max-width: 655px;
width: 100%;
}
#socialMediaSidebar {
float: left
min-height: 506px;
min-width: 270px;
width: 27-33.5%; /* Not accurate, but demonstrates desired behavior */
}
@media width… /*specific breakpoint would trigger once socialMediaSidebar falls below 270px */
#socialMediaSidebar {
width: 100%;
}