CODEWITHSUNDEEP
htmlcss
Torylon
Torylon

Reputation: 81

Centering a div that has float left set

So im feeling pretty stupid that I can't figure this out but my problem is as following:

I got a footer and inside the footer I have 2 divs, 1 containing a Facebook image and 1 containing copyright text. What I want to do is float them next to each other, but align the Facebook image to the left and the text to the center.

Html:

<div id="footer">
    <div id="facebook"><img src="img/FB-f-Logo__blue_29.png" alt="facebook link"></div>
    <div id="footerText"><p>© Copyright 2013. All Rights reserved.</p></div>
</div>

Css:

#footer {
    width: 960px;
    height: 50px;
    margin: 0 auto;
}

#facebook {
    width: 29px;
    height: 29px;
    margin-top: 20px;
    margin-bottom: 20px;
    float: left;
}

#footerText {
    float:left;
    font-size: 11px;
    text-align: center;
    margin: 20px auto 20px auto;
}

Upvotes: 0

Views: 147

Answers (5)

Derek Henderson
Derek Henderson

Reputation: 9706

You can try using absolute position to move the Facebook div out of the flow of the page and to the left, then giving the footer text a left margin equal to the facebook div's width and centering it:

#footer {
    width: 960px;
    height: 50px;
    position: relative;
}
#facebook {
    width: 29px;
    height: 29px;
    position: absolute;
    left: 0;
}
#footerText {
    font-size: 11px;
    text-align: center;
    margin: 20px auto 20px 29px;
}

Demo

Upvotes: 1

Veer Shrivastav
Veer Shrivastav

Reputation: 5496

#facebook:
{
     display: inline-block;
     text-align: center;
}
#footer-text
{
     display: inline-block;
     text-align: center;
     vertical-align: center;
}

Upvotes: -1

Derek Story
Derek Story

Reputation: 9583

You could give both divs an additional "wrapper" within the footer: http://jsfiddle.net/y9xpA/

#wrap {width: 400px; margin: auto;}

Upvotes: 2

theftprevention
theftprevention

Reputation: 5213

Your text in #footerText will not be centered because #footerText doesn't have a specified width. Its width is currently auto, which is default, so it will shrink to the width of the text inside; neither text-align:center or automatic side margins will fix this, as I can see you've tried.

If you want #facebook floating all the way to the left of the footer, you can give the remaining width of the footer to #footerText:

#footerText {
    float:left;
    font-size: 11px;
    text-align: center;
    width: 931px;
    margin: 20px 0;
}

Upvotes: 2

Tim Wasson
Tim Wasson

Reputation: 3656

It'd be much, much easier to just give the #footer a text-align:center and set the other elements inside it to display:inline. Check out a demo: http://jsfiddle.net/pUKwJ/

Upvotes: 0

Related Questions