make a div center-positioned in a wrapper div

**dotJoon** · Apr 15, 2012 12:04

Code:

<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>3 columns</title>
<style type="text/css"> 
 body{
margin:0;
padding:0;
} 
#centerwrapper{
float: left;
width: 100%;
}
#centercolumn{
margin: 0 200px 0 230px; 
background-color:pink;
}
 #leftcolumn{
float: left;
width: 230px; /*Width of left column*/
margin-left: -100%;
background: yellow;
}
 #rightcolumn{
float: left;
width: 200px;
margin-left: -200px; 
background: green;
}
</style>
</head>
<body>
<div id="centerwrapper">
  <div id="centercolumn">
    center column
  </div>
</div>
 
<div id="leftcolumn">
left column
</div>
 
<div id="rightcolumn">right column</div>
 
</body>
</html>

http://dot.kr/x-test/3colsLayout.php has the code above.
I like to put the text "center column" in a new blue block of width:300px and make the blue block to be centered of the centercolumn div which is pink block.

I made the code below for it.

Code:

<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>3 columns</title>
<style type="text/css"> 
 
body{
margin:0;
padding:0;
}
 
#centerwrapper{
float: left;
width: 100%;
}
 
#centercolumn{
margin: 0 200px 0 230px; 
background-color:pink;
}
 
#leftcolumn{
float: left;
width: 230px; /*Width of left column*/
margin-left: -100%;
background: yellow;
}
 
#rightcolumn{
float: left;
width: 200px;
margin-left: -200px; 
background: green;
}
</style>
</head>
<body>
<div id="centerwrapper">
  <div id="centercolumn" style="text-align:center">
    <div style="background-color:blue;width:300px">center column</div>
  </div>
</div>
 
<div id="leftcolumn">
left column
</div>
 
<div id="rightcolumn">right column</div>
 
</body>
</html>

I want a new blue div block is at the center of the pink div block.
But the blue block is on the left of the pink div block.at http://dot.kr/x-test/3colsLayout1.php

How can I make a new blue div block to be centered of the pink centercolumn div block?

**kohoutek** · Apr 15, 2012 15:31

Set the blue <div> to margin:auto; and it'll be centered.

User Tag List

Thread: make a div center-positioned in a wrapper div

Thread Tools

Display

make a div center-positioned in a wrapper div

Bookmarks

Bookmarks

Posting Permissions