I had some problems need help about CSS!

HTML & CSS
1

This is my site http://thietkewebtopx.com/ . On the home page 3 the box I put class = “list_home”. Happened to me is a problem when users zoom in site! Moving box look so bad! I need help. thank you everyone

This is my CSS


.list_home{
-moz-transition: all 0.7s ease 0s;
    background: none repeat scroll 0 0 #ECECEC;
    border: 2px solid #DBDBDB;
    display: block;
    float: left;
    margin-left: 13px;
    margin-right: 12px;
    min-height: 305px;
    padding: 10px 29px 10px 10px;
    width: 28%;
}
2

Hi,

It’s not quite clear what you mean or what you want to happen exactly. When you say “zoom” do you mean resizing the layout via the browsers zoom function or were you just referring to the window being opened and closed?

The elements will wrap at small window sizes so you would be better using display:inline-block instead of floats so that they don’t snag. Also give them a bottom margin to stay clear.

e.g. (this code is additional to yours and not a replacement)


.list_home{
float:none;
display:inline-block;
*display:inline;/* ie6/7 hack for inline block*/
zoom:1.0;
vertical-align:top;
margin-bottom:10px;
min-width:240px;
}

I also added a min-width because you are not scaling the images so the images will stick out unless you stop them.

3

Thanks for your help!the error that I want to present here is the div tag it moved as early as this http://thietkewebtopx.com/wp-content/uploads/2013/01/error1.jpg
and I want it in a state like this whenever a motion browser http://thietkewebtopx.com/wp-content/uploads/2013/01/error2.jpg

4

Sorry but I an still unclear as to what you want to happen?

and I want it in a state like this whenever a motion browser http://thietkewebtopx.com/wp-content/uploads/2013/01/error2.jpg

That sounds like you want it to wrap at smaller window sizes which is exactly what the code I gave you will do. Try the code I alreadfy gave you and then if that’s not what you want we can take it from there.

5

Thank you for your enthusiastic help!