Why is my CSS layout working unexpectedly (see link)?
This question is specific to the site I'm building. See: http://www.creeksidekitchen.ca/seniors
The layout has two columns side by side in the center of the page with a total width of 850 pixels. However, as soon as the browser window width is 1275 pixels or less, the right column drops below the left.
I only want this to happen when the width of the window has dropped to 850px or less - that is, I want it to be responsive, so only if the window is too small to show both columns side by side if the column is stacked.
Why is stacking happening instead of 1275px?
I'm getting lost in my own layout and logic, I hope someone looking at it from the outside can determine what is causing the problem.
source to share
You have the following code which you should remove / change in master.css
:
@media only screen and (min-width: 480px) and (max-width: 1275px) {
.column2 {
clear: left;
}
}
Please refer to the definition of correctness: http://www.w3.org/wiki/CSS/Properties/clear
source to share