изменить порядок div в html

#css #html

#css #HTML

Вопрос:

У меня есть htm-файл с этими htm-кодами :

 <div id="masthead">
    <div id="logo">
        #logo<br />
        #logo<br />
        #logo</div>
    <div id="header">
        #header<br />
        #header<br />
        #header</div>
</div>
<div id="container">
    <div id="right_col">
        #right_col<br />
        #right_col<br />
        #right_col<br />
        #right_col<br />
        #right_col</div>
    <div id="top_banner">
        #top_banner<br />
        #top_banner<br />
        #top_banner<br />
        #top_banner</div>
    <div id="left_col">
        #left_col<br />
        #left_col<br />
        #left_col<br />
        #left_col<br />
        #left_col</div>
    <div id="page_content">
        #page_content<br />
        #page_content<br />
        #page_content<br />
        #page_content</div>
</div>
<div id="footer">
    #footer <br />
    #footer <br />
    #footer <br />
    #footer </div>
  

и иметь для этого файл css :

 /* CSS layout */
body {
    margin: 0;
    padding: 0;
    background-color:silver;
    font-family:tahoma;
}

#masthead {
    min-width: 1000px;
}

#logo {
    float: right;
    background-color:lime;
    width: 250px;
}

#header {
    margin-right:250px;
    background-color:aqua;
}

#container {
    clear: both;
    min-width: 1000px;
}

#left_col {
    float: left;
    width: 200px;
    background-color:fuchsia;


}

#right_col {
    float: right;
    width: 200px;
    background-color:orange;
    }

#page_content {
    margin-left: 200px;
    margin-right: 200px;
    background-color:red;


}

#top_banner {
    margin-right: 200px;
    background-color:maroon;

}

#footer {
    clear: both;
    background-color:yellow;
}
  

мой стиль файла html загружается правильно. но теперь мне нужно изменить HTML-код и переместить разделы left_col и page_content . Мне нужно, чтобы left_col загружался после page_content в html.

это новый порядок этих двух разделов.

     <div id="page_content">
    #page_content<br />
    #page_content<br />
    #page_content<br />
    #page_content</div>
        <div id="left_col">
    #left_col<br />
    #left_col<br />
    #left_col<br />
    #left_col<br />
    #left_col</div>
  

но теперь мои HTML-страницы загружаются некорректно, а left_col загружается как это изображение :

http://i56.tinypic.com/2z9cn6q.png

Комментарии:

1. если вы переставите эти div. вы должны отредактировать css на основе этого.

Ответ №1:

Взгляните на эту скрипку:http://jsfiddle.net/anish/FzfwG /

Комментарии:

1. большое тебе спасибо. но мне нужно, чтобы #page_content имел полный размер и заполнял страницу. не фиксирует ширину