homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

CSS Positioning center and right

5+ Year Member

Msg#: 3648456 posted 1:21 am on May 13, 2008 (gmt 0)

Hi All, just having a problem aligning 2 divs, I'm sure its a simple fix, but I cant seem to work it out.

I have a container div, in this container I have a copyright div which I'd like centered horizontally to the with of the container, this part works!

I also have a logo div which I'd like to sit to the right of the container div, this sought of works. It sits to the right, but the vertical position is not where I want it, I'd like it to sit vertically at the same height as the copyright div.

Any help would be appreciated.


<title> test</title>
<style type="text/css" >

#container-footer {

#footer-copyright {
border-style: solid;

#footer-logo {
border-style: solid;


html body text

<div id="container-footer">
<div id="footer-copyright">
<b>copyright<br />balblah<br />Copyright </b>
<div id="footer-logo">
logo goes here!
</div> <!-- container-footer -->




WebmasterWorld Senior Member 5+ Year Member

Msg#: 3648456 posted 2:44 am on May 13, 2008 (gmt 0)

One thing to note: your code doesn't have a valid doctype.
Another problem is that you didn't put in anything to center the div, you just centered the text in a div... so I assume you're using IE6? (IE6 may incorrectly center a div when the text-align attribute is on center). You may just want the text centered and not the div though, which seems likely, but you did not mention this!

Does the logo div need to be outside of the container div, or just the copyright div? I don't really see the necessity of having the two footer divs there at all as it is now. copyright footer div can be removed (text align:center can be put in the parent div). If you put the logo div inside the container div and set it to float:right, you should be getting what you want (regardless of whether you just used "text-align:center", or "margin:0 auto;width:xx"). If it's still not low enough, add some top-margin to the logo div to push it down a bit more.


5+ Year Member

Msg#: 3648456 posted 4:39 am on May 13, 2008 (gmt 0)

Hi Thanks for the reply, for this example I'm happy to not center the whole container div, I just want the text in the copyright div aligned to center.

The logo div should still fall inside the container div, even when its set to float:right.
It still sits below the bottom of the copyright div, eg its Y position is relative to where the last div finished which is not what I want, I'd like them both to start at the top of the container div.


WebmasterWorld Senior Member 5+ Year Member

Msg#: 3648456 posted 5:36 am on May 13, 2008 (gmt 0)

Well what I was saying is it's just pointless to have those two divs nested in your situation (unless you wanted double border or something). If you want the footer div inside, then it can be okay. You do not need it for them to appear at the same height though...

Perhaps you were not placing the float in there properly. If you're putting the float inside the 1 and only div you need (which you should), you need to put it before the footer divs contents.

And just so you know, you don't need to even have the float inside any div for it to align with that div. putting the logo div before the footer div, and floating it will result in the same effect, except instead of taking up part of the existing 600pixels, it will be outside of the 600pixels, and add on to that.

The float will be beside the div, aligned to the top of the footer (which can be lowered if desired by using margin)
Other than possibly doing the order wrong, it would not be working cause you're not doing something else properly. It's very simple, really.

[edited by: Xapti at 5:40 am (utc) on May 13, 2008]


WebmasterWorld Senior Member suzyuk us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 3648456 posted 1:24 pm on May 13, 2008 (gmt 0)

or, without changing the HTML order, don't think floats would be the right thing anyway as you will not know the height of the footer for vertical centering

you should however know the height of the image? so absolutely position the logo to the right of container then you can use its height to count the vertical center position.

#footer-logo {
/* float:right; */
border-width: 3px;
border-style: solid;
height: 40px; /* height of image */
position: absolute;
right: 23px; /* change to suit - this should be the distance from right side of container */
top: 50%; /* places it in the middle vertically */
margin-top: -24px; /* moves it back up by half the height and any borders this should be -(half height of image + borderwidth) */

you've already got your container positioned relative and this method will need that


5+ Year Member

Msg#: 3648456 posted 12:30 am on May 14, 2008 (gmt 0)

SuzyUK, thanks very much you're a gem, that exactly what I was after!


WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 3648456 posted 1:38 am on May 14, 2008 (gmt 0)

SuzyUK's code there is a gem. Where I'd go for "nah can't be done cause CSS doesn't calculate", she's used 50%-24px by combining absolute positioning and negative margins: gotta remember that one.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved