centering a div as a wrapper or container

**conrad4784** · 09-17-2009, 07:58 PM

Hello I am trying to build a home page with 4 div's enclosed in a 5th div wrapper. I can never get the content to appear in the middle of the screen. The wrapper DIV is relative possitioned with auto margins and the 4 div's i want inside are absolute positioned. They appear like i want them but not in the center of the browser. I have uploaded a zip file with the code and pictures, any help would be greatly appreciated. thank you

CSS:

Code:

#wrapper {background-color:#F00;position:relative; margin:auto;}

#topleft {
	position: absolute;
	left: 0;
	width: 300px;
	height: 300px;
	background-image:url('images/tools.jpg');
	background-repeat:no-repeat;		
	
	 }



#topright {
	position: absolute;
	left: 310px;
	width: 300px;
	height: 300px;
	background-image:url('images/techfinger.jpg');
	background-repeat:no-repeat;
	top: 1px;
	
	
	  }



#bottomleft {
	position: absolute;
	left: 0;
	top: 310px;
	width: 300px;
	height: 300px;
	background-image:url('images/Services.jpg');
	background-repeat:no-repeat;

	     }



#bottomright {
	position: absolute;
	left: 310px;
	top: 310px;
	width: 300px;
	height: 300px;
	background-image:url('images/techfinger_info.jpg');
	background-repeat:no-repeat;
		

	     }

HTML

Code:

<%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<LINK href="techfinger.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>

<body>
<div id="wrapper">

  <div id="topleft"></div>
	<div id="topright"></div>
  <div id="bottomleft"></div>
	<div id="bottomright"></div>


</div>

  
</body>
</html>

Any help would be great i just need to center the content thank you.

**Not to mention** · 09-17-2009, 08:46 PM

Well, im not sure i can help but in one way. Avoid absolute positioning at all costs. It will really throw your browser support down the toilet. Try relative and see if that helps.

Oh i see. here put this on them:

margin-left: auto;
margin-right: auto;

That on both should work great!

**conrad4784** · 09-18-2009, 03:18 AM

I have tried setting margin-left and margin-right to auto. It had the same effect as setting margin to auto. nothing. I do have a question though when you set margin to auto this is the same effect as setting all the margins to auto right( aka margin-left, margin-right, margin-top, margin-bottom. I used absolute positioning inside the wrapper DIV because I did not know how to get the effect of having the 4 div's in a 2 X 2 configuration using relative positioning. If someone could explain how to get a 2X2 table like configuration using relative positioning of 4 DIV's that would be GREAT because I am stumped.

**conrad4784** · 09-20-2009, 11:58 PM

I figured out how to fix the issue and it was really simple i just needed to find a good example. All I needed was the figure out how to stack the div on top of one another so that I didn't need to use absolute positioning. Use the Vertical-align method ex: vertical align: top;

when you use this with the float method you can accomplish what I was trying to do.

Thread: centering a div as a wrapper or container

Thread Tools

Display

centering a div as a wrapper or container

thank you for the reply more help needed please

got it

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions