How do I position buttons so they align horizontally with another element?

StackOverflow https://stackoverflow.com/questions/23178672

Pregunta

I need some help with my styling. I'm trying to get a nice looking website, but I just can't seem to do it. I've tried floats, but to no avail. I want to to have the look of the 'Aspen Development' as the brand name, and then have my buttons on the right side of the div. Here's my HTML:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Aspen Development | Home</title>
    <link href="stylesheet.css" rel="stylesheet" type="text/css" />
    </head>

    <body> 
    <div id="container">
      <div id="navMenu">
        <div id="header">
                <div id="brand"><a href="index.html">Aspen Development</a></div>
                <ul>
                  <li class="navButton">Home</li>
                  <li class="navButton">Pricing</li>
                  <li class="navButton">Contact Us</li>
                </ul>
        </div>
      </div>
      <div id="content">
        <div id="contentContainer">
        <p><b>4.21.14</b> Welcome to Aspen Development.</p>
        <p><b>4.19.14</b> The website has been created!</p>
        </div>
      </div>
      <div id="footer">
        <center><p style="margin-top: 17px; margin-bottom: 20px; font-size: 0.75em; ">Copyright &copy; 2014 Aspen Development | All Rights Reserved</p></center>
      </div>
    </div>
    </body>
</html>

My CSS:

@charset "utf-8";

body, h1, h2, h3, h4, h5, h6, p, div {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #FFF;
}

#navMenu, #footer {
    width: 100%;
    height: 50px;
    background-color: #F8F8F8;
    border: 2px solid #E6E6E6;
}

#header {
    width: 1140px;
    height: 50px;
    margin: 0 auto;
    text-align: right;
}

#brand a {
    display: block;
    width: 175px;
    padding-top: 12px;
    padding-bottom: 16px;
    padding-left: 14px;
    padding-right: 14px;
    color: black;
    font-size: 1.25em;
    text-align: justify;
    text-decoration: none;
}

.navButton {
    display: block;
    width: 175px;
    padding-top: 12px;
    padding-bottom: 16px;
    padding-left: 14px;
    padding-right: 14px;
    color: black;
    font-size: 0.75em;
    text-align: justify;
    list-style: none;
}

#content {
    width: 100%;
}

#contentContainer {
    width: 1140px;
    margin: 0 auto;
}

#contentContainer p {
    margin: 20px;
}

Thanks in advance. :)

¿Fue útil?

Solución

Add this CSS classes : 

ul{
    float:right;    
}

#brand {
    float:left;
}

Add to .navButton:

display: inline-block;

And add to #header :

overflow:hidden;

Also replace :

width: 1140px;

with 

min-width: 1140px;
width: 100%;

in #navMenu, #footer and #header.

Check Fiddle

Otros consejos

why don't you easily use float: left and float: right as long as you have given height to your header.

#brand{
    float: left;
}

.navButton {
    float: right;
}

Its an easy problem. You messed up the css bad. Here is the link and to the changed css and HTML.

Hope it helps... i have updated the css using element id try not to do that, always use classes for css unless you have a really good reason not to.

I've created a fiddle to help you fix the issue.

Use float: left in .navButton class and add clearfix class to the ul containing the .navButton elements. the style definition for the clearfix class is also written in the fiddle. Please try and let us know.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top