CSS <td> ширина не покрывает 100% таблицы

Question

Я пытаюсь форматировать таблицу с использованием CSS. Таблица имеет три <td>, которые будут покрывать 20%/60%/20% от ширины таблицы, но последний тд переходит на следующую строку вместо того, чтобы оставаться в одной строке.

Вот CSS для таблицы:

table{ 
    width: 100%; 
    height: 100%; 
    float: left; 
} 
#left_menu{ 
    width: 20%; 
    height: 100%; 
    float: left; 
    border-style:solid; 
    border-width:1px; 
    border-color:#000000; 
} 
#content{ 
    width: 60%; 
    height: 100%; 
    float: left; 
    border-style:solid; 
    border-width:1px; 
    border-color:#000000; 
} 
#right_menu{ 
    width: 20%; 
    height: 100%; 
    float: left; 
    border-style:solid; 
    border-width:1px; 
    border-color:#000000; 
} 

Сайт http://homeworkwizzard.com, если вы хотите увидеть, как это выглядит. Любая помощь в том, почему это происходит, пожалуйста?

Answer 1

Я согласен с комментариями, вы действительно НЕ должны использовать таблицы для проектирования. Если вы учитесь, то вам следует учиться с самого начала, чтобы вы не попадали в плохие привычки.

Это сказало, чтобы ответить на ваш вопрос. Вопрос с float:left вы используете для всего, я предполагаю, что вы пытаетесь выровнять текст по левому краю, в этом случае вы должны использовать text-align: left;

jsFiddle Demo

HTML:

<table> 
    <tr id="banner"> 
     <th colspan="3">Banner</th> 
    </tr> 
    <tr id="body"> 
     <td id="left_menu">Left Menu</td> 
     <td id="content">Content</td> 
     <td id="right_menu">Right Menu</td> 
    </tr> 
    <tr id="footer"> 
     <td colspan="3">Footer</td> 
    </tr> 
</table> 

CSS:

html{ 
    padding: 5% 10%; 
    margin: 0px; 
    border: 0px; 
    background-color: #FEFFAF; 
    background-size: 100%; 
} 
body { 
    width: 100%; 
    box-shadow: 5px 5px 500px #888888; 
    background: #e3e0c0; 
    opacity: 0.85; 
} 
table{ 
    width: 100%; 
    height: 100%; 
} 
#banner{ 
    width: 100%; 
    height: 15%; 
    text-align: left; 
} 
#body{ 
    width: 100%; 
    height: 70%; 
} 
#footer{ 
    width: 100%; 
    height: 15%; 
} 
#left_menu{ 
    width: 20%; 
    height: 100%; 
    border-style:solid; 
    border-width:1px; 
    border-color:#000000; 
} 
#content{ 
    width: 60%; 
    height: 100%; 
    border-style:solid; 
    border-width:1px; 
    border-color:#000000; 
} 
#right_menu{ 
    width: 20%; 
    height: 100%; 
    border-style:solid; 
    border-width:1px; 
    border-color:#000000; 
}