CODEWITHSUNDEEP
csshtmlcss-float
MisutoWolf
MisutoWolf

Reputation: 1233

Need these two <div>s side by side

So, I'm trying to have two "halves" of the navigation thing under this title page thing, one floated left, the other right.

For some reason, They're not beside each other like they should be, unless I'm doing something wrong. Code is as follows:

HTML:

<!DOCTYPE html>
<html>

    <head>
        <title>Landing Mockup</title>
        <link href="mockup.css" rel="stylesheet" type="text/css" media="screen" />
        <link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'>
    </head>

    <body>
        <div id="landing-container">
            Hello.  I'm Charles Baker.<br />
            <span id="landing-codeblock">{ I design websites. }</span>
            <div id="landing-links">
                <div id="landing-links-left">
                    Small links here.
                </div>
                <div id="landing-links-right">
                    <ul>
                        <li><a href="#">test1</a></li>
                        <li><a href="#">test1</a></li>
                        <li><a href="#">test1</a></li>
                        <li><a href="#">test1</a></li>
                        <li><a href="#">test1</a></li>
                    </ul>
                </div>
            </div>
            <div id="clear"></div>
        </div>
    </body>

</html>

CSS:

body {
    margin-top: 200px;
    font-family: 'Roboto Slab', serif;
}

#landing-container {
    width: 1000px;
    margin: 0 auto;
    font-weight: bold;
    font-size: xx-large;
    text-align: center;
}

#landing-codeblock {
    font-family: 'Droid Sans Mono', monospace;
    font-size: large;
}

#landing-links {
    width: 700px;
    margin: 0 auto;
    border: 1px solid blue;
}

#landing-links-left {
    border: 1px solid orange;
    float: left;
    text-align: left;
    font-size: x-small;
    width: 200px;
}

#landing-links-right {
    font-size: small;
    text-align: right;
    width: 400px;
    float: right;
}

#landing-links ul {
    border: 1px solid green;
    list-style-type: none;
}

#landing-links ul li {
    border: 1px solid red;
    display: inline;
}

#landing-links li a {
    display: inline-block;
    padding: 5px;
}

#clear {
    clear: both;
}

I've got borders temporarily so I can see where things are, but...yeah. I need to float them next to each other, I think I'm doing something entirely wrong. Any thoughts?

Upvotes: 0

Views: 102

Answers (4)

Matt Smith
Matt Smith

Reputation: 2120

Technically they are on the same line, but margin and line-height values aren't being clearly defined for better aligning. Including the following properties:

#landing-links-left { line-height: 20px; }
#landing-links ul {
    margin: 0;
    line-height: 20px;
}

Upvotes: 0

Georgian Burungiu
Georgian Burungiu

Reputation: 81

Just add <div id="clear"></div> before closing this div <div id="landing-links"> 

#landing-links-right {
     font-size: small;
     text-align: right;
     width: 400px;
     float: right; //modify this to left(so it could be next to the other container)
}

Hope this helped you!Cheers!

Upvotes: 0

David Randall
David Randall

Reputation: 770

You're getting a wedge of top (and bottom) margin as a browser default. If you inspect your unordered list in Chrome you'll see from the user agent style sheet:

-webkit-margin-before: 1em;
-webkit-margin-after: 1em;

You can set the margins on your list to 0 to remove this default. Also, I would recommend having a look at http://necolas.github.io/normalize.css/ which provides a nice set of default rules for common elements, taking the pain away from these kind of issues.

Upvotes: 0

Scott Rowell
Scott Rowell

Reputation: 1130

Behold! http://jsfiddle.net/QHeDZ/

I added display:inline-block to your .landing-links-left and .landing-links-right css and removed your floats. I think this is what you were trying to do? If not, let me know! I can fix it up.

Upvotes: 1

Related Questions