I want to create a <div> which has a Label/Header displayed in Capitals letters. The <div> is 250px wide.
Inside the <div>, I will place another <div> which will contain controls. This inner <div> should be center aligned and the outer <div> should automatically increase its height to accommodate the controls height.
The outer <div> and inner <div> should have a border.
Is this possible with CSS?
im not sure what you are asking but maybe this will help?
<!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>
<title>example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
div#wrapper { display:block; width:250px; height:auto; margin:auto; padding:0; border:1px solid #F00; }
div#wrapper h1 { text-transform:uppercase; text-align:center; }
div#controls { display:block; width:100%; height:100px; margin:0; padding:0; border:1px solid #000; text-align:center; }
div#controls a { display:inline; margin:0 5px; line-height:100px; }
</style>
</head>
<body>
<div id="wrapper">
<h1>header</h1>
<div id="controls">
<a href="#">control</a>
<a href="#">control</a>
<a href="#">control</a>
</div>
</div>
</body>
</html>
You mean like this?
<style type="text/css">
.panel { width: 250px; padding: 5px; border: 1px solid #666; }
.panel h1 { margin: 0 0 5px; padding: 0; text-transform: uppercase; }
.panel .content { padding: 5px; border: 1px solid #666; }
</style>
<div class="panel">
<h1>Title</h1>
<div class="content">
... controls ...
</div>
</div>
Yes i m agreed with "Jabes88" but jabes88 why using "display:block;" ... infact if we are using display=table or display=table-cell logic with this..............
What you say ?