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
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
ASKER
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!
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!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Is there a way to float it without taking it out of the flow? Just make a large margin-left?
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&
Cd&
ASKER
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
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
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&
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&
Cd&