Сделать DIV контейнер между двумя колоннами

Вот мой код http://jsfiddle.net/BxQ8n/2/ `Сделать DIV контейнер между двумя колоннами

body 
{ 
    background:url('http://i42.tinypic.com/2e5pbbc.jpg'); 
    margin: 0; 
    padding: 0; 
    color: white; 
} 

div.container 
{ 
    border: 1px solid white; 
    width: 800px; 
    margin: auto; 
} 

div.container img#logo 
{ 
    border: 1px solid yellow; 
    height: 200px; 
    width: 800px; 
} 

div.container div.top20 
{ 
    border: 1px solid green; 
    width: 200px; 
    height: 400px; 
} 

div.container div.menu 
{ 
    border: 1px solid blue; 
    height: 50px; 
    width: 796px; 
} 

div.container div#login 
{ 
    border: 1px solid orange; 
    width: 200px; 
    height: 150px; 
    float: right; 
    clear: right; 
} 

div.container div#search 
{ 
    border: 1px solid purple; 
    width: 200px; 
    height: 80px; 
    float: right; 
    clear: right; 
} 

input 
{ 
    width: 180px; margin: 0.5em 0 0 0.55em; 
} 

input.btn 
{ 
    margin: 0.5em 0 0 0.4em; 
    width: 190px; 
    font-family: Arial, Helvetica, sans-serif; 
    color: #555555; 
    font-weight: bold; 
} 

div.container div#other 
{ 
    border: 1px solid cyan; 
    width: 200px; 
    height: 570px; 
    float: right; 
    clear: right; 
}

Вот полный результат экран http://jsfiddle.net/BxQ8n/2/embedded/result/

То, что я хочу, нужно:

создать другой DIV, что будет находиться между моими двумя столбцами
Устранение пробелов между логотипом и меню

источник

2013-05-01 a1204773

Чтобы логотип отображался правильно, оберните изображение в div и установите определенную высоту. Для 3-х столбчатых макетов вам нужно будет создать 3 divs, div1, div2 и div3. Все эти divs потребуют float: left с шириной, которая будет складываться до ширины контейнера.

Вот неподвижная скрипку: http://jsfiddle.net/7zqhb/4/

#left{ 
float: left; 
width: 200px; 
} 

#middle{ 
float: left; 
width: 400px; 
} 

#right{ 
    float: left; 
    width: 200px; 
}

Это не чистый и семантический любыми средствами, но вы получите точку я думаю.

источник

2013-05-01 15:03:53 Monokh

Спасибо это работает ... Вы можете также удалить '' float' и clear' от других div и напишите 'float: right', а не left в' # right', и он работает так же хорошо. Логотип исправлен. – a1204773

Кладет их там собственный контейнер так что-то вроде этого

<div id="Containerleft"> 
    <div id="top 20 songs"></div> 
    <div id="top 20 artists"></div> 
</div> 
<div id="Containermiddle"> 
    <div id="content"></div> 
</div> 
<div id="Containerright"> 
    <div id="login"></div> 
    <div id="other"></div> 
</div>

Float все налево и это должно решить вашу проблему Это также установить ширину, чтобы соответствовать основной контейнер, так что если ваш главный контейнер был 100 сделайте свой левый контейнер 20, средний 60 и правый 20 пикселей.

Надеюсь, что это имеет смысл

источник

2013-05-01 15:09:00 MaxwellLynn

Убедитесь, что вы float:left ваши DIV, это, на мой взгляд, самый простой способ для создания веб-сайта. После этого вы можете дать вашему диву другому Height & Width.

<div id="Containter"> 
    <div id="LeftPart"> 
     <div id="T20Songs">top 20 songs</div> 
     <div id="T20Artists">top 20 artists</div> 
    </div> 
    <div id="MiddlePart"> 
     <div id="MainContent">MainContent</div> 
    </div> 
    <div id="RightPart"> 
     <div id="Login">Login</div> 
     <div id="Other">Other</div> 
    </div> 
</div>

Css:

Containter { 
    width:900px; 
    } 
    LeftPart { 
    float:left; 
    width:200px; 
    } 

    MiddlePart { 
    float:left; 
    width:500px 
    } 

    RightPart { 
    float:left; 
    width:200px; 
    }

Обратите внимание на ширину & Высота основного контейнера

источник

2013-05-01 15:26:37 Lobato

Сделать DIV контейнер между двумя колоннами

ответ

Смежные вопросы