Вопрос по float:left + clear:both и двухколоночной верстке

вопрос

Много разглагольствовать не буду, предлагаю сразу обратить внимание на скрины:

Как есть

Как надо

HTML код всего этого безобразия

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Тест</title>
<style>
*{margin:0;padding:0;border:none;}
body{font:normal 12px Arial;color:#333;}

#wrapper{width:900px;padding:10px;margin:20px auto;background:#f3f5f7;border:1px solid #ccc;}
    #side{float:right;width:290px;}
        .block{padding:20px 0;background:#f7fafa;}
            .block h4{font-size:14px;font-weight:bold;padding-bottom:15px;text-align:center;}
    #content{margin-right:300px;}
        .story{padding:0 10px 10px;margin-bottom:20px;background:#f0f0f0;border:1px solid #e0e0e0;}
            .story h1{font-size:16px;padding:10px 0;font-weight:bold;}
            .story img{width:200px;height:120px;float:left;}
            .story p{margin-left:220px;}
.clr{clear:both;overflow:hidden;height:0;}
</style>
</head>
<body>
<div id="wrapper">
    <div id="side">
        <div class="block">
            <h4>Навигация</h4>
            <p>Какой-то текст блока</p>
        </div>
        <div class="block">
            <h4>Голосование</h4>
            <p>Какой-то текст блока</p>
        </div>
        <div class="block">
            <h4>Архив</h4>
            <p>Какой-то текст блока</p>
        </div>
    </div>
    <div id="content">
        <div class="story">
            <h1>Заголовок новости</h1>
            <img src="" alt="" />
            <p>Тут какой-нибудь текст к новости</p>
            <div class="clr"></div>
        </div>
        <div class="story">
            <h1>Заголовок новости</h1>
            <img src="" alt="" />
            <p>Тут какой-нибудь текст к новости</p>
            <div class="clr"></div>
        </div>
    </div>
</div>
</body>
</html>

Ответил: ПафНутиЙ

CSS

* {
    margin: 0;
    padding: 0;
}
header, nav, section, article, aside, footer {
    display: block;
}
body {
    font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
    width: 100%;
}
a {
    color: blue;
    outline: none;
    text-decoration: underline;
}
a:hover {
    text-decoration: none;
}
p {
    margin: 0 0 18px
}
img {
    border: none;
}
input {
    vertical-align: middle;
}
#wrapper {
    width: 960px;
    margin: 0 auto;
}
 
 
/* Header
-----------------------------------------------------------------------------*/
#header {
    height: 150px;
    background: #FFE680;
}
 
 
/* Middle
-----------------------------------------------------------------------------*/
#middle {
    width: 100%;
    height: 1%;
    position: relative;
}
#middle:after {
    content: '.';
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}
#container {
    width: 100%;
    float: left;
    overflow: hidden;
}
#content {
    padding: 0 320px 0 0;
}
 
.story{padding:0 10px 10px;margin-bottom:20px;background:#f0f0f0;border:1px solid #e0e0e0;}
.story h1{font-size:16px;padding:10px 0;font-weight:bold;}
.story img {
    float: left;
    padding: 0 10px 10px 0;
    overflow: hidden;
    width:200px;
    height:120px;
}
 
 
/* Sidebar Right
-----------------------------------------------------------------------------*/
#sideRight {
    float: left;
    margin-right: -3px;
    width: 300px;
    margin-left: -300px;
    position: relative;
    background: #FFACAA;
}
 
 
/* Footer
-----------------------------------------------------------------------------*/
#footer {
    height: 100px;
    background: #BFF08E;
}
 
.clearfix:before,
.clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <title></title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
 
</head>
 
<body>
 
<div id="wrapper">
 
    <header id="header">
        <strong>Header:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tortor. Praesent dictum, libero ut tempus dictum, neque eros elementum mauris, quis mollis arcu velit ac diam. Etiam neque. Quisque nec turpis. Aliquam arcu nulla, dictum et, lacinia a, mollis in, ante. Sed eu felis in elit tempor venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ultricies porttitor purus. Proin non tellus at ligula fringilla tristique. Fusce vehicula quam. Curabitur vel tortor vitae pede imperdiet ultrices. Sed tortor.
    </header><!-- #header-->
 
    <section id="middle">
 
        <div id="container">
            <div id="content">
                <div class="story clearfix">
                    <h1>Заголовок новости</h1>
                    <img src="" alt="" />
                    <p>Тут какой-нибудь текст к новости</p>
                </div>
                <div class="story clearfix">
                    <h1>Заголовок новости</h1>
                    <img src="" alt="" />
                    <p>Тут какой-нибудь текст к новости Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati quasi reiciendis amet odio esse laborum tempora corporis cupiditate maiores aliquam qui sequi earum veritatis iusto unde. Ipsa aut velit omnis possimus eum dolores eius ea doloremque dicta natus voluptate nulla ratione earum id nihil consectetur sunt rem. Corrupti alias impedit quisquam facere molestias voluptatibus sit ipsum aspernatur libero fugit error dicta nam numquam assumenda aut sunt delectus nisi aperiam quaerat pariatur nobis adipisci quia est odio ullam deserunt architecto maxime sequi recusandae optio temporibus soluta consequatur iste nostrum eligendi tempora enim dolor. Quis et recusandae pariatur commodi placeat rerum aperiam quaerat dolore impedit necessitatibus voluptatum veritatis porro tempore facilis dolores cumque deserunt ipsa incidunt accusantium assumenda tenetur explicabo optio asperiores excepturi temporibus praesentium veniam soluta itaque reiciendis quos obcaecati odit minima error! Placeat neque eos maiores blanditiis nesciunt quod perspiciatis distinctio accusantium necessitatibus at facilis dolores voluptates omnis alias reiciendis.</p>
                </div>
                <div class="story clearfix">
                    <h1>Заголовок новости</h1>
                    <img src="" alt="" />
                    <p>Тут какой-нибудь текст к новости</p>
                </div>
                <div class="story clearfix">
                    <h1>Заголовок новости</h1>
                    <img src="" alt="" />
                    <p>Тут какой-нибудь текст к новости</p>
                </div>
            </div><!-- #content-->
        </div><!-- #container-->
 
        <aside id="sideRight">
            <strong>Right Sidebar:</strong> Integer velit. Vestibulum nisi nunc, accumsan ut, vehicula sit amet, porta a, mi. Nam nisl tellus, placerat eget, posuere eget, egestas eget, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In elementum urna a eros. Integer iaculis. Maecenas vel elit.
        </aside><!-- #sideRight -->
 
    </section><!-- #middle-->
 
    <footer id="footer">
        <strong>Footer:</strong> Mus elit Morbi mus enim lacus at quis Nam eget morbi. Et semper urna urna non at cursus dolor vestibulum neque enim. Tellus interdum at laoreet laoreet lacinia lacinia sed Quisque justo quis. Hendrerit scelerisque lorem elit orci tempor tincidunt enim Phasellus dignissim tincidunt. Nunc vel et Sed nisl Vestibulum odio montes Aliquam volutpat pellentesque. Ut pede sagittis et quis nunc gravida porttitor ligula.
    </footer><!-- #footer -->
 
</div><!-- #wrapper -->
 
</body>
</html>

* {
    margin: 0;
    padding: 0;
}
header, nav, section, article, aside, footer {
    display: block;
}
body {
    font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
    width: 100%;
}
a {
    color: blue;
    outline: none;
    text-decoration: underline;
}
a:hover {
    text-decoration: none;
}
p {
    margin: 0 0 18px
}
img {
    border: none;
}
input {
    vertical-align: middle;
}
#wrapper {
    width: 960px;
    margin: 0 auto;
}

/* Header
-----------------------------------------------------------------------------*/
#header {
    height: 150px;
    background: #FFE680;
}

/* Middle
-----------------------------------------------------------------------------*/
#middle {
    width: 100%;
    height: 1%;
    position: relative;
}
#middle:after {
    content: '.';
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}
#container {
    width: 100%;
    float: left;
    overflow: hidden;
}
#content {
    padding: 0 320px 0 0;
}

.story{padding:0 10px 10px;margin-bottom:20px;background:#f0f0f0;border:1px solid #e0e0e0;}
.story h1{font-size:16px;padding:10px 0;font-weight:bold;}
.story img {
    float: left;
    padding: 0 10px 10px 0;
    overflow: hidden;
    width:200px;
    height:120px;
}

/* Sidebar Right
-----------------------------------------------------------------------------*/
#sideRight {
    float: left;
    margin-right: -3px;
    width: 300px;
    margin-left: -300px;
    position: relative;
    background: #FFACAA;
}

/* Footer
-----------------------------------------------------------------------------*/
#footer {
    height: 100px;
    background: #BFF08E;
}

.clearfix:before,
.clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    
    <title></title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />

</head>

<body>

<div id="wrapper">

    <header id="header">
        <strong>Header:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tortor. Praesent dictum, libero ut tempus dictum, neque eros elementum mauris, quis mollis arcu velit ac diam. Etiam neque. Quisque nec turpis. Aliquam arcu nulla, dictum et, lacinia a, mollis in, ante. Sed eu felis in elit tempor venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ultricies porttitor purus. Proin non tellus at ligula fringilla tristique. Fusce vehicula quam. Curabitur vel tortor vitae pede imperdiet ultrices. Sed tortor.
    </header>

    <section id="middle">

        <div id="container">
            <div id="content">
                <div class="story clearfix">
                    <h1>Заголовок новости</h1>
                    <img src="" alt="" />
                    <p>Тут какой-нибудь текст к новости</p>
                </div>
                <div class="story clearfix">
                    <h1>Заголовок новости</h1>
                    <img src="" alt="" />
                    <p>Тут какой-нибудь текст к новости Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati quasi reiciendis amet odio esse laborum tempora corporis cupiditate maiores aliquam qui sequi earum veritatis iusto unde. Ipsa aut velit omnis possimus eum dolores eius ea doloremque dicta natus voluptate nulla ratione earum id nihil consectetur sunt rem. Corrupti alias impedit quisquam facere molestias voluptatibus sit ipsum aspernatur libero fugit error dicta nam numquam assumenda aut sunt delectus nisi aperiam quaerat pariatur nobis adipisci quia est odio ullam deserunt architecto maxime sequi recusandae optio temporibus soluta consequatur iste nostrum eligendi tempora enim dolor. Quis et recusandae pariatur commodi placeat rerum aperiam quaerat dolore impedit necessitatibus voluptatum veritatis porro tempore facilis dolores cumque deserunt ipsa incidunt accusantium assumenda tenetur explicabo optio asperiores excepturi temporibus praesentium veniam soluta itaque reiciendis quos obcaecati odit minima error! Placeat neque eos maiores blanditiis nesciunt quod perspiciatis distinctio accusantium necessitatibus at facilis dolores voluptates omnis alias reiciendis.</p>
                </div>
                <div class="story clearfix">
                    <h1>Заголовок новости</h1>
                    <img src="" alt="" />
                    <p>Тут какой-нибудь текст к новости</p>
                </div>
                <div class="story clearfix">
                    <h1>Заголовок новости</h1>
                    <img src="" alt="" />
                    <p>Тут какой-нибудь текст к новости</p>
                </div>
            </div>
        </div>

        <aside id="sideRight">
            <strong>Right Sidebar:</strong> Integer velit. Vestibulum nisi nunc, accumsan ut, vehicula sit amet, porta a, mi. Nam nisl tellus, placerat eget, posuere eget, egestas eget, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In elementum urna a eros. Integer iaculis. Maecenas vel elit.
        </aside>

    </section>

    <footer id="footer">
        <strong>Footer:</strong> Mus elit Morbi mus enim lacus at quis Nam eget morbi. Et semper urna urna non at cursus dolor vestibulum neque enim. Tellus interdum at laoreet laoreet lacinia lacinia sed Quisque justo quis. Hendrerit scelerisque lorem elit orci tempor tincidunt enim Phasellus dignissim tincidunt. Nunc vel et Sed nisl Vestibulum odio montes Aliquam volutpat pellentesque. Ut pede sagittis et quis nunc gravida porttitor ligula.
    </footer>

</div>

</body>
</html>

Fancybox.bind("[data-highslide]", { groupAttr: 'data-highslide', idle:2000, Thumbs: false, caption: (fancybox, slide) => { if( slide.thumbEl && slide.thumbEl.alt ) { return slide.thumbEl.alt } } });

12 комментариев

Юзер

324

TheImDim - 2015-05-1310 декабря 2012 19:27 - #9427

Не совсем понятно что тебе нужно, если тебе нужно чтобы новости в одном блоке выводились, а меню в другом как например на этом сайте, то просто делаешь так:


#wrapper{width:900px;padding:10px;margin:20px auto;background:#f3f5f7;border:1px solid #ccc; float:left}
#content{ {float:left;}

и поменяй местами блоки #content и #wrapper, а то как-то по китайски

PHP-developer

1783

Sander - 2015-05-1310 декабря 2012 19:40 - #9430

Стиль clear:both опускает блок первой новости до нижней полосы правого блока.

наверно имел ввиду #content и #side ?

BR0kEN, в твоем варианте исключается резиновость контента...

SanDev.pro - мой блог.

Telegram: @sandev
Skype: Sander8804

Эксперт

235

BR0kEN - 2015-05-1310 декабря 2012 19:55 - #9431

Sander, исправил код.

Sander - 2015-05-1310 декабря 2012 20:12 - #9432

width:65%;
width:33%;

>_>
Я ж не "на глаз" разбиваю колонки.
Ширина правой фиксированная, 300px. Правая занимает все оставшееся место, автоматически.

Админ

3457

ПафНутиЙ - 2015-05-1310 декабря 2012 20:25 - #9433

CSS:

Каков вопрос - таков и ответ. Просто помните об этом.

ПафНутиЙ - 2015-05-1310 декабря 2012 20:25 - #9434

HTML:

ПафНутиЙ - 2015-05-1310 декабря 2012 20:27 - #9435

http://csstemplater.com/ - на будущее )) с этим сервисом на раздва получаешь готовую основу для вёрстки.

ПафНутиЙ - 2015-05-1310 декабря 2012 20:27 - #9436

figure зачем? без caption этот тег не несёт ровным счётом никакой пользы.

BR0kEN - 2015-05-1310 декабря 2012 20:28 - #9437

На всякий случай отредактировал еще раз.

Sander - 2015-05-1310 декабря 2012 23:12 - #9440

Все, всем огромное спасибо.
Сделал по этому варианту, только без тегов header, section и т.п.

german2802 - 2015-05-1318 декабря 2012 16:38 - #9744

Извените но куда этот код вставлять? что бы такое добавление новостей было?

Sander - 2015-05-1318 декабря 2012 17:31 - #9745

Вы походу темой ошиблись

Вопрос по float:left + clear:both и двухколоночной верстке

Ответил: ПафНутиЙ

12 комментариев

Похожие вопросы

Масштабируемая картинка через допполе

Вывод title под соответствующей картинкой

Не отображается модальное окно в IE 10

Картинка в javascript

Как прописать в ajax/freedback.php значение выбранное в календаре?

не работают подгруженные шрифты

Как ограничить параметр стиля?

Сначала видео потом HTML. Как?

Как сделать кнопки слайдеру?

Как перевести табличную вёрстку в html5 ?