Home/ Questions/Q 6121615
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T15:48:15+00:00

Basically this isn’t working out how I’d like it too. The navigation buttons are

  • 0

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,255, 1);

    color: white;
    font-family: Pare, Helvetica;
    font-size: 24pt;
    text-align: center;
    text-decoration: none;

    padding: 27px;
}

Here’s what it’s doing: https://i.stack.imgur.com/RdUOx.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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0