www.webdeveloper.com
Results 1 to 4 of 4

Thread: centering a div as a wrapper or container

  1. #1
    Join Date
    Feb 2008
    Posts
    38

    centering a div as a wrapper or container

    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.
    Attached Files Attached Files

  2. #2
    Join Date
    Jul 2008
    Posts
    196
    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!

  3. #3
    Join Date
    Feb 2008
    Posts
    38

    thank you for the reply more help needed please

    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.

  4. #4
    Join Date
    Feb 2008
    Posts
    38

    got it

    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles