[shaun236]

Hi All,

I’m completely new to web designing and I’m learning things from scratch with some online tutorials/screencasts. I need little help from you guys.

I have four div in my markup. One is a “wrapper” div while other three divs are to display some image and content. I have centered the “wrapper” div. All three div within it has equal width and also has equal left and right margin. The page looks pretty much the way I want it to look, but when I start to zoom in after a certain point the images start to overlap.

Also when I increase/reduce the max- width for “wrapper” div the other divs within it are not aligned equally. I have used % for width and margin and I believed that should take care of it. What am I doing wrong… please advice?

I need help with the following:

1.When I zoom-in why images start overlapping?
2.When I reset the “wrapper” max- width why doesn’t other divs maintain its position?

Please advice how I can fix them? I have also attached my markup file.

Thanks in advance!!!

HTML Code:


Elastic Layout





This is div1







This is div2







This is div3









CSS Rules

Code:


body{
margin:0;
padding:0;
}

#wrapper{
margin:0 auto;
max-width:60em;
border:1px dotted blue;
height:20em;
}

#div1 **
float:left;
width:30.1%;
margin:0 1.6% 0 1.6%;
}

#div2 **
float:right;
width:30.1%;
margin:0 1.6% 0 1.6%;
}

#div3 **
float:left;
width:30.1%;
margin:0 1.6% 0 1.6%;
}



Attached Files ElasticLayout.zip (4.7 KB)