Question

I’ve been working on an interface for a website. I’m stuck on a simple thing that I’ve spent hours and not get it fixed. I’m giving the prototype of my project. When you zoom in to page or minimize the page the alignment gets messed up. How do I fix that?

http://www.thewebblog.net/server/sosyalagDenemem

Answer 1

If by “minimization” you mean window resizing, it is because you are floating those columns. There are two ways you could go about fixing this.

1) Make your website responsive. You can find tons of information online about this, but here are some resources to get you started:

Ethan Marcotte’s Dao of Flexibility talk

Looking Beyond Common Media Query Breakpoints

2) Add a min-width to the <div> that contains all of your floated elements. Make sure the width is more than all of your floated items lined up. This will make sure that if the window gets smaller than the container, instead of pushing those elements below each other, it will just keep the container from getting farther and create a scrollbar.

Note, this isn’t necessarily the best way in terms of designing for mobile, tablet, etc., but it will certainly keep your site from breaking on “normal” desktop monitors. If this is your only target audience, then there’s no problem with it.

An example of this would be:

.container {
 min-width:960px;
}