Jump to content

Center fixed div in div


toxicious
 Share

Recommended Posts

I have a div that is floating to the right and is 30% width. Within that div I have another div that has this css:

#testDiv {position: fixed;top: 150px;bottom: 0px;border-style: solid;border-width: 5px;width: 350px;height: 130px;text-align: center;border-radius: 30px;font-family: Tahoma, Geneva, sans-serif;font-size: 14px;}

What I want to do is to center this div within the first div. How can I achieve that? Remember, I want the position:fixed so it "stickies" when you scroll :)

  • Like 1
Link to comment
Share on other sites

good idea, that worked! EXCEPT I now have another problem:Since I am using a 3 column layout (3 divs) and want the two side ones' fixed I'll have to center the middle one on some other way than float:left (since there is no left div that keeps it from the border. I tried with margin: 0px auto; but if I set that and remove float:left, the right div disappears? Why does it disappear when I remove the float:left?

Link to comment
Share on other sites

What?, Where?, When? show the code
I just solved it (before I saw your post).Apparently, the right div didn't understand that the position of it should be FIXED. I changed the height of the middle, then the right appeared. I put some colors on the background and saw that the right started at the same height that the middle ended. Meaning that if I put 100% height on the one in the middle, the right one "disappears". So I solved it by putting top: 0px. Sounds maybe like an obvious move that I should have done from the beginning, but since the left div didn't need it, I didn't think of it. Thanks for your help!
Link to comment
Share on other sites

Hi toxicious, We (dsonesuk and Myself) would like to see your final code. If you don't mind, could you please show us your code?

Edited by creative1977
Link to comment
Share on other sites

Sure, here's the css of the three columns:

#leftCol {display: none;width: 36%;height: 100%;left: 0px;top: 0px;position: fixed;background: #F06;}#middleCol {margin: 0px auto;margin-top: -10px;width:600px;padding-bottom: 20px;background: #603;}#rightCol {display: none;width: 36%;height: 100%;position: fixed;top: 0px;right: 0px;background: #30F;}

The backgrounds are just there since I am still working on it (to make it clearer). The display: none is because I'm trying to use a fadeIn effect.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...