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:
<html>
<head>
<title>Elastic Layout</title>
</head>
<body>
<div id="wrapper">
<div id="div1">
<p>This is div1</p>
<image src="InstallBackground.jpg" />
</div>
<div id="div2">
<p>This is div2</p>
<image src="InstallBackground.jpg" />
</div>
<div id="div3">
<p>This is div3</p>
<image src="InstallBackground.jpg" />
</div>
</div>
</body>
</html>
CSS Rules
Code:
<style type="text/css">
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%;
}
</style>