[CSS] Question on moving an element.

[Neo824]

I would like some help, notice the 'log in' box on this page: http://neo-productions.com

I would like to know how to move it to the top right corner of the page, without using margins. Any help would be greatly appreciated! I've provided the code below.

stylesheet.css

div#log_inHolder {
background: url('image/log_inHolder.png') no-repeat;
height: 136px;
width: 264x;
margin: 0px;
padding-top: 30px;
padding-left: 6px;
font-family: Tahoma;
font-size: .90em;
}

index.html

        <input id="log_inSubmit" type="submit" value="Log In" onMouseOver="this.style.color='white'"; onMouseOut="this.style.color='black'">

[Jolt]

Add

float: right;

to the CSS.

[Neo824]

Look at the outcome:

http://neo-productions.com

-----

=[ It moved it to the right, cutting out some of the background image.

Also, after I move it to the right how do I get it to the top?

[Jolt]

Link looks the same here.

In any respect... add the float: right; to the CSS then move the login HTML above the Sidebar code in the HTML (Right after the content div opening tag).

[Neo824]

:[ It moves it to the extreme upper right, cutting out some of the image.

Result: http://www.neo-productions.com

[Jolt]

It moves to the exact top right edge. It doesn't cut out any part of any image here. You said you didn't want to use margins. But if you put margins on it for the top and right it'll move inward on the page a bit.

[Neo824]

Originally Posted by Jolt

It moves to the exact top right edge. It doesn't cut out any part of any image here. You said you didn't want to use margins. But if you put margins on it for the top and right it'll move inward on the page a bit.

It does cut the image out.

Right click the image and click 'View Background Image.'

[Jolt]

Oh I see. Your CSS has an error in the width property for the login box. Fix that.

[Neo824]

Originally Posted by Jolt

Oh I see. Your CSS has an error in the width property for the login box. Fix that.

That isn't the problem, I changed the width and it wouldn't fix it.

[Jolt]

Look again. I swear to you there is an error in the CSS width property of the login box. Honest. It's the problem. I could tell you exactly what the error is, but you'll never learn that way. It's even present in the code you posted in your initial post here.

[Neo824]

Thanks! I found the problem, I was missing a 'p.' Thanks for all of your help!

How did you know that I had to move the log in div above the sidebar div?

[Jolt]

Most often when you float something to the right, the HTML needs to be before any left side content.

[Neo824]

Alright, thanks!

I appreciate all of your help!

[Jacorre]

If you float that to the right your content will have to float to the left. Watch the width, margin, and padding settings you use because you may run into issues where one div ends up being underneath the other. This is because there was no more space available so it pushes one of the divs down. Again, make sure the total width takes into account the width, margin, and padding of the divs in question.

Another option is absolute positioning. This also "floats" a div but it acts a little differently. You'll have to add margin/padding to the content div to move it from appearing underneath your positioned div. When you absolutely position a div it actually pulls it out of the flow of the page. It's like the div is floating over the page and anything else after it will end up pushing right underneath it. So you'll have to push those things away by using margin/padding.