CSS: "float" issues.

[Nine Toes]

I'm building the following website for my employer. Something to put in my portfolio: http://www.jgeier-it.com/semester_project/week09/home.php  ...oh yeah, it's also a semester project for two of my classes.

If you view this page in the most current version of Firefox, it looks just fine - minus all of the things I haven't finished working on.

If you view it in Internet Explorer, it doesn't work properly - no big surprise there... You will see that the navigation on the left side of the screen spills over into the footer of the page.

Just to save you some thinking power, I'll explain what's going on behind the scenes on this page: the middle section of the page is a DIV, which contains 2 more DIVs, one for the navigation, which is an element that floats on the left, and the other being the content of the page.

Now, to get the middle section to resize itself to contain all of the floating navigation, or all of the content, should it exceed the height of the navigation, I've tried using the "clear" selector on all three of these elements, but I don't recall it having any effect.  Then I found something online, telling me to use "overflow:auto;" on the middle container itself.  That worked like a charm, and I could have swore I had it working perfectly in IE and FF, but I changed a few things, and somehow I must have cut something important, and now I don't remember what I changed.  ...yeah, I know... dummy!  Obviously, you can look at the source of the page, and the stylesheet itself for more info.

I'd like to know if anybody else has any ideas to solve the problem?  I'm not gonna go picking anything apart or changing anything until I figure out what I screwed up.

[Peder 🚀]

Simply adding for example <div style="clear:both;"></div> before ending <div id="midcontain"> will sort your problem.
Not sure if there is a even better way of doing this code (anyone?) but at least it works .

Code: ags

<div id="midcontain">
 <div id="nav">
 ......
 </div>
 
 <div id="content">
 ......
 </div>

 <div style="clear:both;"></div>  <----- HERE!
</div>

Offcourse using a CSS class will probably be better

[Nine Toes]

Sorry it took me so long to respond.

I see what you mean, I do believe that I came across something online telling me to do that.  I haven't had a chance to implement it yet - I'm actually not looking forward to that, I will have to change that on EVERY single page - but I'll give it a try.

That "float" selector is so funny, you know?  I've used the "overflow:auto;" trick before, and as far as I know, it works great.  Here is another website I did where I used floating images and columns within a DIV set as "overflow:auto;": http://deptcis7.fvtc.edu/120520318/assignments/portfolio/index.htm

See, that works in both IE and Firefox.  No problems with floating elements spilling out onto other DIVs.  I'm trying to figure out what it is that I may be doing differently with my employer's new website.

Offcourse using a CSS class will probably be better

Is this what you mean?:
CSS stylesheet:

Code: ags

.clearer  {clear:both;}

HTML document:

Code: ags

<div id="midcontain">
 <div id="nav">
 ......
 </div>
 
 <div id="content">
 ......
 </div>

 <div class="clearer"></div>  <----- This?
</div>

While I'm at it, I may even be open to trying things differently - a way to do this without the use of floating content.  So far, floats have been nothing but a pain in the rear.  I've got a few ideas, but I'd like to hear if anyone else has any input.

[Peder 🚀]

Yeah thats what I meant about css .
I'll have a look at what you did on that other site later today and get back to you.

[edit]
Hmm strange..
I am unsure why it wont work on this site what you did on that other site..
I hate when things like this happen.

I will let you know if I figure it out, let me know if you do before me