PDA

View Full Version : Question about float drop + other issues



Amaz1ng
27 Jan 2011, 11:21 PM
What do I have to keep in mind to make the elements in my site not drop? Check this site out:

tutking.99k.org

If you resize the browser or go to a lower resolution, notice how everything drops. The nav bar drops, the floats drop. What do I need to do to fix that so that it does like this site (webdevforums) does, for example.

The elements are not affected by resizing the browsers...why is this?

resdog
28 Jan 2011, 07:30 AM
Mainly the reasons are that you have defined the width of the container to be 100% instead of a fixed width. For your other elements, you are defining a percentage margin.

The Nav bar - you don't have a defined width, so it adopts it's parent width (container) which is 100%. So when you resize the browser, the nav bar resizes and if the content doesn't fit, it drops to the next line.

the columns drop because the their parent container's width is 100%, so when you resize the window, the size of the parent container changes, and if it's less than 600 pixels, the secondary column drops to the next line.

Change the container width to be a fixed width and it will fix the problems.