...

View Full Version : Centering one style within an outer style



cyphix
12-17-2007, 12:16 AM
I'm trying to center a <div> with a CSS style within another style; but I want to center it within the outer style.

Here is the relevant code:



<div id="content">
<div id="form">
<div id="control">
<select name="position" onChange="customPos();">
<?=$list1?>
<option value="custom">custom</option>
</select>
</div>
</div>
</div>


I want to center the "control" div within the "content" div; because it's inside the "form" div it's obviously being centered in there & not content.

Thanks a lot! :)

Excavator
12-17-2007, 01:28 AM
Hello cyphix,
in your CSS add

#control {
width: 200px; /or whatever width you need*/
margin: 0 auto;
}

Should work...

cyphix
12-17-2007, 01:58 AM
Thanks but unfortunately it didn't work :(

Donkey
12-17-2007, 02:46 AM
I don't think what you are trying to do can work.

You can centre "control" within "form" or "form" within "content" but you can't centre "control" within "content" because "form" is in the way.

Excavator
12-17-2007, 04:40 AM
I think if #form is wide enough that #control should be able to be centered in it... hard to say without seeing the rest of the code though.

Excavator
12-17-2007, 04:49 AM
Yup... centers fine:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<meta name="" content="authored by http://www.nopeople.com/Design" />
<style type="text/css">
html, body {
background: #CCCCCC;
}
* {
margin: 0;
padding: 0;
}
#content {
width: 600px;
margin: 100px auto;
overflow: auto;
background: #FFCC00;
}
#form {
width: 400px;
float: right;
background: #CC0000;
}
#control {
width: 200px;
margin: 0 auto;
background: #00FF00;
}
</style>
</head>
<body>
<div id="content">
<div id="form">
<div id="control">
<select name="position" onChange="customPos();">
<?=$list1?>
<option value="custom">custom</option>
</select>
</div>
</div>
<!--end content--></div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum