PDA

View Full Version : Positioning DIVs (Plz.. some advise)



allyroz
12 Jun 2009, 05:08 AM
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!!!

Here's the markup:


<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:


<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>