CODEWITHSUNDEEP
css
Shyam Ramineni
Shyam Ramineni

Reputation: 51

div to float left

I am weak in css and can you please help with this problem. You can see problem by clicking on Login/Register link in the below url.

Test box url

This is done in drupal. I am not able get the css to make the div with id "toboggan-login" to appear under the "Login/Register" link

Forgot to mention. I put the below css code. It works in small resolution systems. But its does not work in my 22'' monitor.

div#toboggan-login {
position: absolute;
top: 23px;
left: 74em;
}

Upvotes: 1

Views: 106

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206007

This will fix your issue:

CSS:

div#toboggan-login {
    position:absolute;
    left: 50%;
    margin-left: 310px;
    width: 160px;
}

Than if you want to distance it a bit from the Login/Register top, just add:

top:10px; or how much px you want!

To explain the above lines:
The left:50%; pushes your element in the middle of the screen, so even at window resize your element will stay there, centered.
But to set it appropriately to some center-left position than we add position-left that will adjust the element position to a desired amount of px left from the center.

Upvotes: 3

Related Questions