CSS - strange browser issues with 100% width fluid layout, why?

Question

Hi folks!

OK, so if you go check out http://furnace.howcode.com you'll see the example. [The site is in active development so pardon the mess/comments between devs ;) ]

To recreate the issue: Click the 'Top Rated' tab. Click the 'PHP Array Looping' result (it's the best example. Note that data is fetched via Ajax and may take a moment to load).

In the third column space the entry will be returned*.

Despite the fact that the total widths of #col1 + #col2 + #col3 = 100%, the browser still adds a kind of 30px margin to the right. Presumably this is where a scrollbar would go but if is there any way to reliably fill that space? Sadly overflow-x: hidden; on the body tag makes no difference.

---

I have a further issue which I presume is related to the problem here. I want the #col3 result to have padding-left: 10px; applied. Now in the box model I understand that padding does not alter the space outside but rather the space inside - sadly when I set padding-left: 10px; to #col3 it disappears off the page. It's late, I'm tired and have hit a caffeine low but I can't work out why...! :)

Thanks, really appreciate the help! Browsers I've tested on: Google Chrome, Firefox 3.6 (both on Mac)

Jack

.

*sorry for the hideous styling, we've completely rethought the design and I haven't been able to restyle it yet)

Answer 1

You have max-width set for the 3 columns:

#col1
    max-width: 124px
#col2
    max-width: 529px
#col3
    max-width: 729px

these are set in http://furnace.howcode.com/scaffold/index.php?f=/stylesheets/master.css from row 349.

I suggest you check with "Inspect Element" in Google Chrome - there you easily can change the CSS on the fly to try out and see if it is overwritten with any other style as I guess is happening with your padding.