Welcome to WebmasterWorld Guest from 107.20.59.213

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Positioning center and right

     

BassTeQ2

1:21 am on May 13, 2008 (gmt 0)

5+ Year Member



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

2:44 am on May 13, 2008 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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

4:39 am on May 13, 2008 (gmt 0)

5+ Year Member



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

5:36 am on May 13, 2008 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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

1:24 pm on May 13, 2008 (gmt 0)

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



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

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

5+ Year Member



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

swa66

1:38 am on May 14, 2008 (gmt 0)

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



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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month