Floating content doesn't work right

HTML & CSS
1

I’ve tried to fix this page but it seems that the FAQ content always wants to sit below the sidebar when actually it should be floating right.
http://westfest.ca/index.php?option=com_content&view=article&id=59&Itemid=61

2

This is a guess:

custom.css, Line 229


#leftblock {
    [color=blue]float: left;[/color]    /* ADD ME */
    margin: 2px;
    width: 21.5% !important;
}

layout.css, Line 38


#leftblock, #midblock, #rightblock, #insetblock, #insetsholder_2t, #insetsholder_2b, #insetsholder_3t, #insetsholder_3b {
    [color=red]float: left;[/color]    /* DELETE ME */
    height: 100% !important;
    margin: 2px;
    [color=red]overflow: hidden;[/color]    /* DELETE ME */
    text-align: left;
}
3

The reason you are having this issue is because “#holder” has a fixed with of 975px; and between #leftblock and #midblock the grand total width exceeds it’s parent element (#holder) width. To compensate the #midblock will be positioned underneath #leftblock to fit your content inside the width you specified; that being 975px. Basically you exceeded the parents width by 62px.

4

Brandon’s observation is spot on.

Changing the inline width of id midblock will solve the problem easily enough.


FROM:
<div id="midblock" style="width:[color=red]85%[/color];">

TO:
<div id="midblock" style="width:[color=blue]77%;[/color]">

Realize that padding and margins that are occupying the additional 8% of the width (the box model thing).

5

Thanks for your help!!