I’m building a responsive site http://www.ashleykirk.ca/AB4/
I don’t understand why my gray sidebar box is not sitting directly under the yellow sidebar box. It seems to be lined up with the top of my last “home-feature”. I could probably fix this if I wrap all of my “home-feature” boxes in a div, but I’m not sure that’s the right way to do it. What is the best way to do this?
Also, I don’t want to change the HTML order because it is the order I want when stacked for mobile.
Thanks!
Ak
You should put it in two columns, so that they are separated. By then, your sidebar will only be on the right side and content will be on the left. If you needed more help, let me know. Hope that helps 
A floated item can’t sit higher that the elements it follows by floating alone.
You could pull it up with a negative margin, but I’m wary of doing that in a layout.
.gray {
margin-top: -60px;
}
The ideal is to have the sidebar contents grouped in their own container, of course.
There are better CSS layout tools on the way, but they aren’t ready yet, unfortunately.
With the understanding that you do not want to alter the HTML, there are a couple of possible choices available.
(1) Assign a negative .sidebar.gray {margin-top:-60px} to lift the gray box close to the yellow box. They will still spread as the page narrows, but they will always be closer than they are now. You will have to remove that neg margin with the media query changes the layout for mobile.
(2) Assign .content > div {position:relative}. Then assign .sidebar.gray {position:absolute;top:290px;right:0;}. Spacing between the boxes will be consistent. The bottom of the .sidebar.gray box will flow into the gray footer at wide widths, but not objectionably so. The absolute positioning must be disabled by the media query when the layout changes for mobiles.
Awesome advice. Thank you!