Floating without specifying all widths

DazzlingD · Oct 17, 2009

I am trying to get a page to work in Firefox, Safari and Google Chrome. It works fine in IE. I have already done several thing that fixed the issue at one point or another, but to get everything working, it keeps breaking.

The page is at

http://marysappliance.dazzlingdesign.com/bio-penny.html

Look at it in IE, and you'll see what I'm trying for.

The code that I believe is relavent is below:
XHTML

Code:

<div id="WholePage">
 {Top navigation stuff - all works, leaving out code}
   <div id="Container">
      <div id="SubNavigation">
         <a href=''>Mary</a>
         <a href=''>Penny</a>
         <a href=''>Jeff</a>
      </div>

      <div id="MainContent">
         Images, text, etc.... blah, blah.
      </div>
      <div class="ClearFloats"></div>
   </div>
</div>

CSS

Code:

#WholePage {
   width: 100%;
   margin: 0 auto;
}

#Container {
   background: url('Images/Navigation/sidebkgd.jpg') repeat-y left;
}

#SubNavigation {
   float: left;
   width: 150px;
   padding: 20px;
}

#SubNavigation a {
   color: #ffffff;
   font-size: 10pt;
   font-weight: bold;
   text-decoration: none;
   display: block;
}

#MainContent {
   float: left;
   padding: 20px;
}

DIV {
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
   box-sizing:border-box;
}

.ClearFloats {
   clear: both;
}

I can fix the problem by simply specifying a width in the CSS under #MainContent. If I specify something like 650, it works fine - that is - on my screen, but a smaller resolution, it won't. If there aren't 800 pixels, then it still looks like it does now. If I don't specify a size on either #MainContent or #SubNavigation, it looks like it does now as well. I believe that if the width is not specified, it must be assuming 100% instead of fitting in it's space. I want it to take up whatever space is left, not a set amount of space. Any ideas how to fix this problem?

Vragabond · Oct 17, 2009

Actually, floated elements have the same width as the content inside them. However, since in your case, the content inside is just continuous text, the container will expand to 100%. I am not sure why IE is not honoring this specific request, but it might be due to the most important element your code is missing:

A complete and valid doctype. Please see a list of good doctypes to use here:

http://www.w3.org/QA/2002/04/valid-dtd-list.html

Based on your code, I would suggest HTML 4.01 Transitional.

After you add doctype to your code, you should first remove your box-sizing property. Why ignore the standards and try to break functionality in browsers that adhere to them? Just work with how box model is supposed to work. Today, there are no more browsers in popular use that mess up the box model.

Then you should unfloat the #MainContent and just give it enough margin-left to not cover the #SubNavigation. Based on your code, this would be any number larger than 150px.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

DazzlingD · Oct 18, 2009

Thank you Vragabond.

I actually did have

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

in the header of the html file, just didn't think to include that in the snippet of code I gave.

I don't know why I didn't think of the left margin - I guess it was just because I was searching the internet on making columns, and that's how everyone was saying to make the columns.

It works great now, thanks!!

johnwm · Oct 20, 2009

Your doctype is in the wrong place - it needs to be at the top, not half way through the head section. Check your website against a validator, which will pick up these simple errors. See

http://validator.w3.org/check?verbose=1&uri=http://marysappliance.dazzlingdesign.com/bio-penny.html

for details.

If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Floating without specifying all widths

DazzlingD

Programmer

Vragabond

Programmer

DazzlingD

Programmer

johnwm

Programmer

Similar threads

Part and Inventory Search

Sponsor