CODEWITHSUNDEEP
htmlcss
WASasquatch
WASasquatch

Reputation: 619

Float right position seems to be floating in the middle?

I can't seem to figure out why this box is floating down a bit from alignment with it's neighbor. The same code is in use inside the main boxes for the content, so It's a big puzzling, and the parents have nothing special that should be messing with the alignment.

http://jordan.rave5.com/tmpstuff/

I tried vertical-align knowing it wouldn't work with the elements anyway. I'm just confused. Again!

CSS

            .right-large-box {
                float: right;
                width: 300px;
                height: auto;
                padding: 0;
                margin: 0;
                vertical-align: top;
                top: 0;
            }

            .left-large-box {
                height: auto;
                padding: 0;
                margin-right: 310px;
                vertical-align: top;
                top: 0;
            }

Upvotes: 0

Views: 36

Answers (2)

Qiqi Abaziz
Qiqi Abaziz

Reputation: 3353

You have declared float: right; inside the .right-large-box class, you should apply float for .left-large-box class too. So it should be:

.left-large-box {
   float:left; /* add this one */
   height: auto;
   padding: 0;
   margin-right: 310px;
   vertical-align: top;
   top: 0; /* this one actually can be removed */
}

I think you also can remove the top:0; unless if you have set position:relative/absolute to those classes.

Upvotes: 0

Mark Parnell
Mark Parnell

Reputation: 9200

The top margin of 20px on .large-box is pushing it down inside its container. Remove that and it will sit at the top like you want.

Upvotes: 1

Related Questions