Positioning DIVs (Help plz....)

AllyRoz · 06-12-2009, 02:46 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!!!

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>

**wmorri** · 06-12-2009, 02:36 PM

Hi,

Here are a couple of things that I see wrong with your html, and your css. Have a look at mine, I changed a couple of things. I think that this is more what you want.

HTML Code:

<html>
<head>
<title>Elastic Layout</title>
<link rel="stylesheet" type="text/css" href="elastic.css" />
</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>

HTML Code:

/* Elastic Layout */

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%;
}

Cheers!