Aligning 3 divs horizontally across web page?

Question

I'm having trouble getting my three div images to line up and take up equal space across my web page. I simply want three images in a row. My code is below, could someone help me? Thanks!

<!DOCTYPE html>
<html>

<!-- <div id="head-bar"> -->
    <head>
        <meta charset="utf-8">
        <title> Shilpa Kumar | Web Developer </title>
        <link rel="stylesheet" ref="normalize.css">
        <link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>

    <body>

    <div id="head-bar">
        <div id="logo">
            <h1 class="logo">
                <a href="http://www.shilpakumar.me"><img src="shilpa-logo.jpg" alt="Shilpa Kumar | Web Developer"></a>
            </h1>
        </div>

        <header>

        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="portfolio.html">Portfolio</a></li>
                <li><a href="resume.html">Resume</a></li>
                <li><a href="connect.html">Connect</a></li>
            </ul>
        </nav>

        </header>

    </div>

    <div id="pink-block">
        <p> Hi. My name is Shilpa Kumar.</p> <br>

        <p>I'm an aspiring front-end developer, with knowledge of HTML, CSS, Sass, Javascript, and jQuery. <br> <br>

            A passionate self-starter looking to break into the web development world and earn a position that will allow me to work with the web, as well as learn from others, and grow in the industry.</p>

    </div>



<div class="big-links"> 

    <div id="big-portfolio">
        <a href="portfolio.html">
            <img src="portfolio-link.jpg" alt="Portfolio-Link"> 
        </a>
    </div>

     <div id="big-logo">
        <a href="resume.html">
            <img src="giant-logo.jpg" alt="Logo"> 
        </a>
     </div>

     <div id="big-profile">
        <a href="connect.html">
            <img src="profile.jpg" alt="Profile-Picture"> 
        </a>
     </div>

 </div>

     <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
     <script src="fade.js" type="text/javascript" charset="utf-8"></script>

    </body>

    <footer>
        <p>&copy; 2014 Shilpa Kumar.</p>
    </footer>


</html>

CSS

#pink-block {

    position: absolute;
    top: 50%; 
    margin-bottom: 100%;

    text-align: center;
    background-color: #FE2E64;
    color: #FFFFFF;
    font-family: 'Droid Serif', serif;
    font-size: 2em;

.big-links {
    text-align: center;
    position: absolute;
    padding-top: 48%;

}



#big-portfolio {
    float: left;
    width: 25%;



}


#big-logo {
    display: inline-block;
    margin: 0 auto;

    width: 50%;



    }


#big-profile {
    float: right;
    width: 25%;
    margin: 0 0;


}

Answer 1 · 2014-09-30T06:25:30Z

September 30, 2014 6:25am

Shilpa,

As far as getting all three of your divs to line up horizontally on the page next to each other, and each to take up 1/3 of the page, you should simply apply a class to each of them, and style that class to float either left or right, and make the width set to ~33%.

For your nav not working; are you sure each of those files exists? How exactly is it "not working"? What is the behavior that you're seeing?

Erik

Answer 2 · 2014-10-09T01:25:20Z

October 9, 2014 1:25am

Thanks, Erik. This was helpful!

Welcome to the Treehouse Community

Looking to learn something new?

Shilpa K

Shilpa K

Aligning 3 divs horizontally across web page?

Shilpa K

Shilpa K

2 Answers

Erik McClintock

Erik McClintock

Shilpa K

Shilpa K