How to make 2 elements adhere to the parents size?_问答_开发者

How to make 2 elements adhere to the parents size?

开发者 https://www.devze.com 2023-03-19 11:05 出处：网络

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.

相关专题：css

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.