Floats in Razor Views ASP.NET

Hey Experts, I have something strange going on. It's happened in every MVC webpage I've ever made.

See the attached screenshots first, this is the difference between no float, and float: right.

I always have something like so in my layout page:

    <div id='MainBody'>
    @RenderBody()
    </div>

With CSS like so:

#MainBody
{
    width: 950px;
    display: block;
    /*background: #F8D330;*/
    background: white;
    margin: auto; /*This may not work in all browsers*/
    z-index: 1;
}

Now, the @RenderBody will render my Index page which has a bunch of code in it, so far I only have a nav bar thingy set up. I have the nav bar wrapped in a div tag like so:

<div id="rightMenuBar">
...code...
</div>

When I do CSS like so:

#rightMenuBar
{
    float: right;
}

it never floats all the way to the right.

HELP! Tell me why!

Also, as you can see, the white background doesn't wrap the elements anymore.

HELP!

-Jeff
no-float.png
float-right.png
LVL 6
jeffiepooAsked:
Who is Participating?
 
COBOLdinosaurCommented:
Main body, which has the background is technically empty.  Floating an element takes it out of the normal flow so main body does not extend and without it there is no is no background.

The problem will go away when you add something inside of main body.

Cd&
0
 
COBOLdinosaurCommented:
Well we can't see enough to determine the structure.  Images don't tell us anything.  We need a link to the page, or more complete css/html.

Cd&
0
 
jeffiepooAuthor Commented:
I figured it out, one of my invisible divs as too wide.

IF you can tell me why the white background doesn't wrap around the elements in the page after I 'float' them I will give you points for this question, since this was also in the original post.

Thanks!
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
jeffiepooAuthor Commented:
Is there a way to float it without taking it out of the flow? Just make a large margin-left?
0
 
COBOLdinosaurCommented:
Yeah you could do that, but if you do, you should do the margin with a percentage so the content moves to the left if the page is resized.

Cd&
0
 
jeffiepooAuthor Commented:
Well I guess I'm looking at something similar...

For example..
https://twitter.com/MLARBand

Do you see how the semi-translucent background follows all of the floated elements to the bottom of the page?

How do they do this?

The center of my page is 950px and it won't change, it will be fixed.

What are good methods to do this?

Thanks for your help!

-Jeff
0
 
COBOLdinosaurCommented:
I don't use twitter and I'm not going to create an account just so I can look at that page.  

The way to learn how something works is to copy the code and play with it.  Being able to do an effect without understanding how it works is just a time waster. You won't be able to do anything creative with it until you understand how it works.  

Cd&
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.