PDA

Click to See Complete Forum and Search --> : 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:

#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


<%@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.:mad:
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.