Back to For Beginners

I have a very basic CSS question! :]

For Beginners

Started by iaminternets October 24, 2008 09:33 PM

1 comment, last by iaminternets 15 years, 6 months ago

iaminternets

187

Author

October 24, 2008 09:33 PM

<html>
  <body>
    <div style="background-color:red;position:absolute;width:400px;top:50%">
      [non-breaking-space]
      <div style="background-color:blue;width:50px;position:relative;top:-50%;">
        [non-breaking-space]          
      </div>
      [non-breaking-space]
    </div>
  </body>
</html>

Aparently, in Firefox, if an element isn't absolute:positioned, you can't use percentage units with the top property. It's frustrating! I'm trying to vertically center images (yes, the above code is incomplete, but it demonstrates my point about percentage units); is there a work-around? EDIT: I'm sorry for the initial post; I wasn't quite sure how I was supposed to post HTML! [Edited by - iaminternets on October 24, 2008 9:52:39 PM]

I love the 'nets.

F1N1TY

478

October 25, 2008 12:22 AM

Is there any reason for that div to have absolute positioning? (I'm by far no web expert but) I don't see any reason for that to have absolute positioning.

Anyway, first google result right here:

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Let me know if that helps ;-)

"I'd rather know one thing, no matter how ordinary, than discourse endlessly on great issues." -- Galileo

iaminternets

187

Author

October 26, 2008 09:50 PM

Thanks for the reply! ++rep

I'll probably just end up using the solution that article provided, but why won't 'top' accept a percentage value if the element isn't absolutely positioned?

I love the 'nets.

I have a very basic CSS question! :]

This topic is closed to new replies.

Popular Topics

Recommended Tutorials

I have a very basic CSS question! :]

This topic is closed to new replies.

Popular Topics

Recommended Tutorials

Reticulating splines