CODEWITHSUNDEEP
htmlcss
Jas
Jas

Reputation: 25

Three divs, aligned horizontally

I have attempted to rectify this problem for far too long, and am not getting anywhere.

I am trying to align three inline-block divs horizontally using text-align: justify within their parent div, but with no luck. I have done something similar in the past, and I have read other threads that state I am going about it correctly.

I am attempting to learn the codeIgniter framework, but not sure if that is relevant.

I am also using Aptana for the first time. Again, not sure if that has any affect (can’t see how it would).

Maybe the solution is right in front of me, but any help would be appreciated. Thanks.

HTML:

<div about="homeContent" class="pageContent">
    <h1>Home</h1>
    <div id="threeColumn" class="threeColumnDiv"> <!--Define id and class-->
        <div id="One" class="threeColumnElement">
        </div>
        <div id="Two" class="threeColumnElement">
        </div>
        <div id="Three" class="threeColumnElement">
        </div>
    </div>
</div>

CSS:

html, body{
    height: 100%;
}

html{   
}

body {
    margin: 0px;
}



#wrapper{
    width: 960px;
    margin: 0px auto;
    min-height: 100%;
}


/****HEADER*****/

#headerBanner{
    height: 100px;
    width: 960px;
    background-color: green;
}

#leftHeaderBanner{
}

#rightHeaderBanner{
}

/****Home****/



#threeColumn{
    text-align: justify;
}


#One{
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: blue;


}

#Two{
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: blue;
}

#Three{
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: blue;
}




/****FOOTER****/
/***STICKY FOOTER FROM http://www.cssstickyfooter.com/using-sticky-footer-code.html*/

#footerBanner{
    width: 960px;
    background-color: blue;
    margin: 0px auto;
    position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;
}

#leftFooterBanner{
}

#rightFooterBanner{
}

Upvotes: 0

Views: 58

Answers (1)

ketan
ketan

Reputation: 19341

Use text-align:center instead of text-align: justify; in #threeColumn

#threeColumn{
    text-align: center;
}

Working Fiddle

Upvotes: 1

Related Questions