![]() |
|
#1
|
|||
|
|||
|
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)
|