Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


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>

<!-- <div id="head-bar"> -->
        <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">


    <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>


                <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>



    <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 class="big-links"> 

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

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

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


     <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>


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



#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


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?


Shilpa K
Shilpa K
12,722 Points

Thanks, Erik. This was helpful!