Two column tableless design, content DIV wrapping floated menu

I have spent many hours working on a tableless design that works across most browsers. It is a lot more difficult than I bargined for. Right now, everything looks great in IE7. The problem arrises in IE6, the current version of Firefox (3.0.3), and the current version of Opera (9.60).

I am basically working on a 2 column layout, the column that is floated left is the menu. The column on the right is the main body of the page. There are also header and footer sections but they are not giving me problems. The problem is the way the text in the content wraps around the floated menu. I do not want this to happen. I've given the menu a height of 100% to combat this but it only solved my problem in IE7. The other browsers do not appear to make the DIV containing the menu 100%. Therefore, the DIV containing the text in the body of the page will wrap.

Here is a link to my template to see for yourself:
http://www.ieinternetsolutions.com/new_site/index.php


My style sheet is located at:
http://www.ieinternetsolutions.com/new_site/css/style.css


Any advice that can be thrown my way would be great appreciated!

 

You need to give your main content a margin-left of 250px; then it shouldn't wrap. Forget all the 100% height stuff I don't think you really need it.
Also there's no need to specify a width on everything, for example where you have put width: auto; there is no need for this.

Also in addition there is no real need for <hr size="1" > in your layout as you can control everything via CSS and a hr is merely presentational.

Also try to speicfy your widths and heights inside the CSS rather than the HTML doc, as it would be considered more efficent, for example where you have:
<img src="images/left_banner.jpg" width="250" height="100" border="0" alt="H2L logo">
Could easily be:
HTML: <img src="" alt="Logo">
CSS: img { width: 250px; height: 100px; border: none; }

Lastly if you really want to cut down on your markup, where you have stated:

<div class="nav"> 
    <ul>
      <li><a href="/" title="Return to the the frontpage"> Home </a></li>
      <li><a href="/about" title="About"> About </a></li>
      <li><a href="contactus.php" title="Contact"> Contact </a></li>

      <li><a href="/testimonials" title="Client testimonials"> Forums </a></li>
      <li><a href="/featured-articles" title="Featured articles"> Freelance </a></li>
    </ul>
  </div>

Code (markup):

There's no real need to wrap the unordered list inside a DIV, as you can just style the UL, and also add the class the the UL.

 

Thank you so much for all of the pointers. Regarding your advice to set the left margin for the content area to 250px, it didn't work. I am seeing the same results in Firefox and Opera. If you shrink the width of your browser you will see what I'm talking about, the text starts to break "past" the float and hugs the left side of the screen.



I will definately implement your other suggestions as well.

 

Sorry, you should get rid of display: inline; from your main content DIV also, let me know if that fixes it.

 

Thank you - that worked like a charm. I would have bet money that putting a 250px left margin on the main content DIV would have moved the content 250px from the floated menu on the left and not the left most part of the screen? Does margin not care about distance from a floated object? Instead it just looks at margin from parent? Man this is kind of confusing!

 

Nice i'm glad it worked. To be honest I don't actually know the answer, as i'm relatively unexperienced myself, but I think it's because the sidebar is floated that it is not taken into consideration, hence why the margin is taken from the body.
So if you wanted a 10px margin in-between the sidebar and main content, you would add a margin left of the whole sidebar width plus 10px.
I'm assuming the fact it's floated that it is not taken into consideration. However if you set a width or height on the main content DIV it seems to bug IE into not wrapping it around the sidebar.
Don't hesitate if you need any other help.

 

It's one of the more difficult things to grasp at first, but once you understand it, it does make a degree of sense.

Normally your text wraps around a float, that's the normal behavior. All block level 'containers' in your markup are 'boxes', they have to contain all of their content. In order for text in a box that's 'kin' to a float to be able to do that, the box itself has to be pushed all the way around the float in order for the text that runs past the length of your float to wrap over.

So basically a non-floating box will ignore a floating one when calculating it's size, even when it's inline-level content does not.