Hey Guys,
Maybe someone can help out on this problem. Here it is:
<!-- m --><a class="postlink" href="http://ten28design.com/stk/home.html">http://ten28design.com/stk/home.html</a><!-- m -->
Here's what I'm trying to do. I've got two <div>s that are mostly the same but the difference is that they have different widths and heights. They also have a <h2> in each one that is a different height than the other (But the appearance is similar). After the <h2> in each <div> is another <div>(class="box") that I want to be 5px margin from the right side, left-side, and bottom. The problem is that the top margin will differ depending on the parent <div>. So, I guess I'm looking for a fluid way to make the <div>(class="box"> fill all the space of the parent <div>. Hope that makes sense. . . Here's the relevant code:
CSS
#dashboard {
height: 185px;
margin: 10px;
background: #ccc;
border: 1px solid #666;
}
#dashboard h2 {
font-size: 1em;
color: #000;
margin: 5px 0 0 5px;
padding: 10px 0 0 40px;
background: url(images/dashboard.gif) no-repeat;
height: 30px;
}
#news {
height: 250px;
width: 400px;
float: right;
margin: 0 10px 10px 10px;
background: #ccc;
border: 1px solid #666;
}
#news h2 {
font-size: 1em;
color: #000;
margin: 5px 0 0 5px;
padding: 5px 0 0 30px;
background: url(images/news.gif) no-repeat;
height: 30px;
}
.box {
margin: 0 5px 5px 5px;
background: #fff;
border: 1px solid #666;
height: auto;
}
and the html:
<!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" xml:lang="en" lang="en" >
<head>
<title>monkey</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href=http://www.webdeveloper.com/forum/archive/index.php/"main.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="main">
<div id="news"
<h2>News</h2>
<div class="box">
</div>
</div>
<div id="spotlight">
</div>
<div id="bannerad">
</div>
<div id="dashboard">
<h2>My Dashboard</h2>
<div class="box">
</div>
</div>
</div>
</div>
</body>
</html>
Please note: I've taken out some of the html that is irrelevant.
Also, I've tried doing the height of <div>(class="box") as a % also, to no avail. It has issues with the height of my <h2>s.
Thanks in advance,
IanI think this is your intention to do, try this:
.box {
margin: 0 5px 5px 5px;
background: #fff;
border: 1px solid #666;
height: 100%;
}
<div id="news">
<div class="box">
<h2>News</h2>
</div>
</div>
Maybe someone can help out on this problem. Here it is:
<!-- m --><a class="postlink" href="http://ten28design.com/stk/home.html">http://ten28design.com/stk/home.html</a><!-- m -->
Here's what I'm trying to do. I've got two <div>s that are mostly the same but the difference is that they have different widths and heights. They also have a <h2> in each one that is a different height than the other (But the appearance is similar). After the <h2> in each <div> is another <div>(class="box") that I want to be 5px margin from the right side, left-side, and bottom. The problem is that the top margin will differ depending on the parent <div>. So, I guess I'm looking for a fluid way to make the <div>(class="box"> fill all the space of the parent <div>. Hope that makes sense. . . Here's the relevant code:
CSS
#dashboard {
height: 185px;
margin: 10px;
background: #ccc;
border: 1px solid #666;
}
#dashboard h2 {
font-size: 1em;
color: #000;
margin: 5px 0 0 5px;
padding: 10px 0 0 40px;
background: url(images/dashboard.gif) no-repeat;
height: 30px;
}
#news {
height: 250px;
width: 400px;
float: right;
margin: 0 10px 10px 10px;
background: #ccc;
border: 1px solid #666;
}
#news h2 {
font-size: 1em;
color: #000;
margin: 5px 0 0 5px;
padding: 5px 0 0 30px;
background: url(images/news.gif) no-repeat;
height: 30px;
}
.box {
margin: 0 5px 5px 5px;
background: #fff;
border: 1px solid #666;
height: auto;
}
and the html:
<!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" xml:lang="en" lang="en" >
<head>
<title>monkey</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href=http://www.webdeveloper.com/forum/archive/index.php/"main.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="main">
<div id="news"
<h2>News</h2>
<div class="box">
</div>
</div>
<div id="spotlight">
</div>
<div id="bannerad">
</div>
<div id="dashboard">
<h2>My Dashboard</h2>
<div class="box">
</div>
</div>
</div>
</div>
</body>
</html>
Please note: I've taken out some of the html that is irrelevant.
Also, I've tried doing the height of <div>(class="box") as a % also, to no avail. It has issues with the height of my <h2>s.
Thanks in advance,
IanI think this is your intention to do, try this:
.box {
margin: 0 5px 5px 5px;
background: #fff;
border: 1px solid #666;
height: 100%;
}
<div id="news">
<div class="box">
<h2>News</h2>
</div>
</div>