How to make 2 elements adhere to the parents size?
Basically this isn't working out how I'd like it too. The navigation buttons are just floating to the right and not staying inside of their parent div. The HTML I have is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>UI Test</title>
<link type="text/css" rel="stylesheet" href="main.css" />
</head>
<body>
<div id="container">
<div id="header">
<div class="first">
First column stuff
</div>
<div class="second">
<a href="#" class="nav_button">Current Projects</a>
<a href="#" class="nav_button">Build New Project</a>
<a href="#" class="nav_button">Fund Projects</a>
</div>
</div>
</div>
</body>
</html>
and my main.css file looks a little like this:
#header {
display: block;
background-color: #2a2626;
color: #fff;
border-bottom: 4px solid #000;
border-top: 8px solid #000;
padding-top: 8px;
}
.first {
float: left;
width: 20%;
}
.second {
float: right;
}
.clear { clear: both; }
.nav_button {
background-image: -webkit-gradient(
linear,
left bottom,
right bottom,
color-stop(0.14, rgb(44,132,145)),
color-stop(0.79, rgb(103,191,204))
);
background-image: -moz-linear-gradient(
left center,
rgb(44,132,145) 14%,
rgb(103,191,204) 79%
);
-moz-box-shadow: inset 0 0 8px rgba(255,255,255, 1);
-webkit-box-shadow: inset 0 0 8px rgba(255,255,开发者_如何学JAVA255, 1);
color: white;
font-family: Pare, Helvetica;
font-size: 24pt;
text-align: center;
text-decoration: none;
padding: 27px;
}
Here's what it's doing: http://i.imgur.com/PU400.png As you can see the height isn't auto-adjusted and I've been trying to do it for a while now. Anyone know what the problem is?
Old school method: Put a clearing element after your <div class="second">, such as <br style="clear: both" />, to force the parent element to completely enclose the buttons.
Newer school method: make your #header be overflow: auto.
加载中,请稍侯......
精彩评论