Форум

gordon freeman · #1 (**permalink**) 13.03.2013, 20:31

Чет в интернете школота и говнокодеры предлагают очень кривые решения

Особенно взбесило вот это говно
http://htmlbook.ru/content/dve-kolon...igatsiya-sleva

стоит только прописать в коненете clear:both; как все нахрен разъезжается

Предлагаю свой вариант

Кому не лень протестируйте в различных браузерах, старых и новых и отпишитесь

В новых пашет везде

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
 .main {
        padding: 0 0 0 237px;
        border: 1px solid #ff0000;
 }
.pageLeft {
    float: left;
    margin-left: -237px;
    overflow: visible;
    padding-top: 15px;
    width: 237px;
    border: 1px solid #000000;
    position: relative;
}
.pageContent {
    float: left;
    margin-right: -100%;
    padding-top: 18px;
    width: 100%;
    border: 1px solid #000000;
    position: relative;
}
.clear {
    border: none;
    clear: both;
    float: none;
    font-size: 0;
    height: 0;
    line-height: 0;
}
.block {
    float: left;
    width: 150px;
    height: 50px;
    border: 1px solid #0000ff;
}
</style>
    </head>
    <body>
        
        
        <div class="main">
            <div class="pageLeft">1230</div>
            <div class="pageContent">123
                <div class="block">
                    123000
                </div>
                <div class="block">
                    123000
                </div>
                <div class="block">
                    123000
                </div>
                <div class="block">
                    123000
                </div>
                <div class="clear"></div>
            </div>
            
            <div class="clear"></div>
        </div>
        
    </body>
</html>

Песочница

http://learn.javascript.ru/play/toRDN

Deff · #2 (**permalink**) 13.03.2013, 20:46

gordon freeman,
run поставьте в теге
[HTML run height=800]

Nanto · #3 (**permalink**) 14.03.2013, 23:22

Дорогой ТС, я за свою жизнь много видел говнокода, но Вы явный кандидат в лидеры!
Вам ещё много надо прочитать по этой теме, но несколько совсем уже очевидных моментов:
1) использование "clear:both" должно быть крайне осмысленным! это не свойство которое можно бездумно пихать куда угодно. И уж конечно нужно иметь представление о том, КАК и в КАКИХ СЛУЧАЯХ оно работает.
2) можете не прописывать блочным элементам "width:100%", блоки и без Вас это сделают. И кстати, с подобной записью и всякими там проставленными бордерами/паддингами (что мы и наблюдаем в Вашем коде) Ваша структура скорее всего и "развалится".
3) Ну это рановато, видимо - но на будущее... Есть такая штука "семантика" - так вот мало того, что использование пустого элемента в HTML-коде для стилевых целей не "семантично", оно ещё и бессмысленно! Если уж Вам нужно "вычистить поток", то и делайте это тем блоком (элементом), который как раз уже и не должен "обтекать".

danik.js · #4 (**permalink**) 15.03.2013, 10:45

Сообщение от gordon freeman

стоит только прописать в коненете clear:both; как все нахрен разъезжается

В 99% случаев можно прописать overflow: hidden для контента. Либо вообще не использовать clear:both в контенте
Способ кстати не новый, я уже давно такой прием видел. Сам не пользуюсь им, небыло нужды. div.clear тоже никогда не использовал - небыло нужды (я верстальщик со стажем)

Способ интересен тем, что позволяет разместить сайдбар в разметке после контента. Есть другие способы? С удовольствием посмотрю на них.

Nanto, смотри монитор слюнями не забрызгай.

Сообщение от Nanto

можете не прописывать блочным элементам "width:100%", блоки и без Вас это сделают

Может твои блоки и делают что-то за тебя, а мои по дефолту имеют width: auto. И в случае когда у блока float:left, его ширина не будет равна ширине контейнера.

Сообщение от Nanto

с подобной записью и всякими там проставленными бордерами/паддингами (что мы и наблюдаем в Вашем коде) Ваша структура скорее всего и "развалится"

Это да, тут беда. Но если забить на IE7, то box-sizing нас спасет.

Сообщение от Nanto

Ну это рановато, видимо - но на будущее... Есть такая штука "семантика" - так вот мало того, что использование пустого элемента в HTML-коде для стилевых целей не "семантично", оно ещё и бессмысленно! Если уж Вам нужно "вычистить поток", то и делайте это тем блоком (элементом), который как раз уже и не должен "обтекать".

Пока css с текущим уровнем поддержки просто вынуждает нас использовать экстра-разметку. Хотя я обычно ее избегаю. Но это все костыли как не крути. Ждем новых плюшек css.

Nanto · #5 (**permalink**) 16.03.2013, 03:50

в 99% случаев для "хомяка". А если куча менюшек, попапов и прочих финтилюшек? Которые надо спозиционировать и вывести за пределы родителя?
Float - вообще не рекомендуют применять для форматирования основной структуры.

danik.js · #6 (**permalink**) 16.03.2013, 04:03

А что рекомендуют?

Nanto · #7 (**permalink**) 16.03.2013, 23:41

inline-block, хотя как по мне - тут ещё больше подводных камней

gordon freeman · #8 (**permalink**) 18.03.2013, 11:16

Nanto,
напишите свой пример по теме "грамотный" как вам кажется
я заценю

Форум

Справочник

Discord чат

Курсы javascript