Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Floats in Razor Views ASP.NET

Posted on 2012-09-12
7
Medium Priority
?
341 Views
Last Modified: 2012-09-13
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
0
Comment
Question by:jeffiepoo
  • 4
  • 3
7 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38392947
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
 
LVL 6

Author Comment

by:jeffiepoo
ID: 38392966
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
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 2000 total points
ID: 38392987
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 6

Author Comment

by:jeffiepoo
ID: 38393024
Is there a way to float it without taking it out of the flow? Just make a large margin-left?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38393055
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
 
LVL 6

Author Comment

by:jeffiepoo
ID: 38393068
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38395103
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

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article shows how to deploy dynamic backgrounds to computers depending on the aspect ratio of display
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Suggested Courses

572 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question