Jump to content

Column layout issue with floating divs

Recommended Posts

Hey there,


I know this is somewhat of a rookie problem, but I'm a little rusty on the subject of float, since my more recent projects haven't dealt with it much. I have created a two-column layout (main content and a navigation sidebar) with floating divs. However, at a certain zoom level the sidebar is kicked down below the main content div. I'm trying to figure out how to keep the two columns side-by-side on the page, no matter what the zoom level is. I used to know how to do this, but as I said, I'm a little rusty in this department.


Any help would be greatly appreciated. The url is: http://www.zyggywebs.com

body { background-color: white; background-image: url(banner-new2.jpg); background-position: center top; background-attachment: fixed; background-size: 160%; color: black; padding: 20px;}a { color: yellow;}a:hover { color: steelblue;}#header { background-color: black; background-position: left bottom; color: white; padding: 10px; height: 130px; border-radius: 1em;}#main { float: left; width: 960px; background-color: black; opacity: 0.800; color: white; padding-left: 20px; padding-top: 20px; padding-bottom: 20px; padding-right: 20px; min-height: 700px;}#sidebar { float: left; background-color: black; color: white; height: 500px; width: 200px; margin-right: 10px; margin-left: 10px; text-align: center; border-radius: 1em; opacity: 0.800;}#sidebar img { max-width: 150px; border: none;}#footer { clear: both; background-color: black; color: white; padding: 10px; margin-top: 20%; border-radius: 1em;}#galleries img { width: 20%;}.section { padding-bottom: 25px;}
Edited by Zyggy

Share this post

Link to post
Share on other sites

Probably because you don't have a containing div to match the total width your 2 divs. But if you are wanting to make the page responsive then convert the divs, paddings and margins to percentages.

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...