Forum Moderators: not2easy
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>
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.
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.
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]
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
