Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Shilpa K
Shilpa K
12,722 Points

Aligning 3 divs horizontally across web page?

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;


}
Shilpa K
Shilpa K
12,722 Points

ALSO: Another issue I'm experiencing is my navigation bar not functioning. Is anyone else experiencing this with my code? Am I doing something incorrectly here?

2 Answers

Erik McClintock
Erik McClintock
45,783 Points

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

Shilpa K
Shilpa K
12,722 Points

Thanks, Erik. This was helpful!