homepage Welcome to WebmasterWorld Guest from 54.227.41.242
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
BassTeQ2




msg:3648458
 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.

Thanks


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

#container-footer {
width:600px;
position:relative;
border-color:#00FF33;
border-style:solid;
padding:10px;
}

#footer-copyright {
border-style: solid;
border-color:#006633;
text-align:center;
padding:5px;
}

#footer-logo {
float:right;
border-style: solid;
border-color:#330000;
margin:5px;
}

</style>
</head>

html body text

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

</html>

 

Xapti




msg:3648504
 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.

BassTeQ2




msg:3648557
 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.

Xapti




msg:3648572
 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]

SuzyUK




msg:3648822
 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;
border-color:#330000;
/*margin:5px;*/
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

BassTeQ2




msg:3649325
 12:30 am on May 14, 2008 (gmt 0)

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

swa66




msg:3649344
 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