Box Not Floating

Question

Have looked, but did not find a suitable answer.

My question is simple: Trying to float, without success.

Here's the page: http://www.linguashop.com/course/classic.php

The red box on the left should float left, with the greybox and menu coming up on the right.

The CSS I am using is below:

.logo2013,      
.logo2013 a     {margin:0;width:220px;height:120px;}

.logo2013   {float:left;}

.logo2013   {border:1px solid #f00; border-top-left-radius: 10px; }

.logo2013 a     {display:block;text-indent:-9999px;}

.greybanner2013 {height:91px; line-height:1; background:#f7f6f2 left top;}  
.greybanner2013 {border:1px solid #ddd; border-top-right-radius: 10px;}

.greybanner2013 .fontsize32 h2 {padding-top:5px; font-size:32px;color:#777;font-weight:bold; margin:0; margin-left: 20px; }

.greybanner2013 .foreign {font-size:32px;color:#FF9300;font-weight:bold; display:inline; margin:0; margin-left: 20px; padding:0; }

.greybanner2013 .translation {font-size:28px;color:#AAA;font-weight:normal; display:inline; margin-left:  10px; }

/*menu*/

.nav2013 {height:28px; background-color:#787065; border:1px solid #ccc; }

.nav2013 ul {/*float:right;*/ list-style:none;margin:4px 0;padding:0}

.nav2013 li {float:left;padding:0 24px 0 22px;margin:0; right top no-repeat*/}

.nav2013 li a {font-family:Verdana,Arial,SunSans-Regular,Sans-Serif; display:block;color:#ebeae8;text-decoration:none;font-size:12px; font-weight:bold; }

.nav2013 li:last-child {padding-right:15px;background:none}

Any insight would be greatly appreciated!

David

Answer 1

this is what i am seeing

if you want to float the red box to the left all the way;

then add logo2013 directly under banner2013

it will create this

UPDATE

i think your problem is the border radius on the upper left corner. this should fix it.

add this to .greybanner2013

border-top-left-radius:10px;

the logo you put there that has a border radius like that can cover the grey area behind there. to actually float the red box left and rest right while keeping them in the middle of the screen requires a little more work and perhaps change of html and css quite a bit.

you can set the background color of logo2013 class to white and that will give the similar effect as well.