Две колонки div. Динамическая ширина одного

Question

То, что я пытаюсь достичь, - это добраться до divs, рядом друг с другом. Одним из них будет меню, ширина 150 пикселей, слева от экрана, а вторая - заполнение остальной части контейнера.

Вот что я придумал: http://jsfiddle.net/Ln49F/3/

Но, то бороться ДИВ также «под» меню и работа с текстом, перемещая его немного вправо невозможно. Возможно ли сделать div-контент «широким» для «100% - 150 пикселей» каким-то образом и разместиться рядом с меню div?

Чтобы добиться чего-то вроде этого: http://jsfiddle.net/Ln49F/4/ Float слева, ставит DIV «рядом с» меню DIV и отступы работает хорошо, но я не знаю, как сделать это, чтобы быть широко для остальной части контейнера дел.

Answer 1

Выньте width:100% (просто оставить его auto, который по умолчанию) и использовать это:

div.content{ 
    margin-left:150px; 
    background: green;   
} 

jsfiddle.

Answer 2

Написать так:

CSS

.wrapper{ 
    overflow:hidden; 
    padding-bottom:10px; 
} 
.first{ 
    float:left; 
    height:200px; 
    width:150px; 
    background:red; 
} 
.second{ 
    overflow:hidden; 
    height:200px; 
    background:green; 
} 

HTML

<div class="wrapper"> 
    <div class="first">first</div> 
    <div class="second">second</div> 
</div> 

Проверить это http://jsfiddle.net/TbRuB/10/

ИЛИ

Вы также можете достичь этого с display:table собственности, но это работа до IE8 & выше.

Проверить этот http://jsfiddle.net/TbRuB/12/

Answer 3

Проверить this fiddle аут. В основном, используя box-sizing, некоторые отступы и отрицательный запас, вы можете выровнять два элемента до верхней части их контейнера. и окно содержимого растягивает пространство его родителя.

Answer 4

div.container{ 
width: 90%; 
background: red; 
    display: inline-block;  
} 

div.menu{ 
width: 150px; 
float: left; 
background: blue; 
display: inline;  
} 

div.content{ 
    display: inline; 
    float: left; 
    width: 65%; 
    background: green; 
    padding-left: 20px;  
} 

look at this

я надеюсь, что это помогает

Answer 5

Вы можете просмотреть свою первую скрипку, но обновляется, чтобы работать в соответствии с вашей спецификации, здесь: http://jsfiddle.net/ramsesoriginal/Ln49F/12/

Это работает, указав правый край на втором div, и просто оставляя ширину на авто.

в HTMLis без изменений:

<div class="container"> 
    <div class="menu">Menu to the left</div> 
    <div class="content">Content of site<br>x<br><br><br><br><br></div> 
</div> 

И CSS очень похожи на ваши:

div.container{ 
     width: 90%; 
     height: 150px; 
     background: red;   
    } 

    div.menu{ 
     width: 150px; 
     height: 100px; 
     float: left; 
     background: blue;   
    } 

    div.content{ 
     margin-left: 150px; 
     background: green;   
    } 

Я забрал width: 100%; из div.content и заменил его margin-left: 150px; Как вы можете видеть, вы почти все было правильно!

EDIT: BONUS: (поддельные) Столбцы равной высоты!

Я обновил скрипку с помощью некоторого кода, чтобы создать «faux columns» с CSS3, чтобы он выглядел так, как будто оба div расширяются до нижней части контейнера. Вы можете увидеть его здесь: http://jsfiddle.net/ramsesoriginal/Ln49F/13/ Я не знаю, действительно ли это вам нужно, но это общее требование для подобных сценариев.

Я просто помещен градиент фона на контейнере, с помощью одного жесткого упора в середине:

background: linear-gradient(left, blue 150px, green 150px); 

А потом я расширил, что с различными поставщиками префиксов:

background: -moz-linear-gradient(left, blue 150px, green 150px); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, right top, color-stop(150px,blue), color-stop(150px,green)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(left, blue 150px, green 150px); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(left, blue 150px, green 150px); /* Opera 11.10+ */ 
background: -ms-linear-gradient(left, blue 150px, green 150px); /* IE10+ */ 
background: linear-gradient(left, blue 150px, green 150px); /* W3C */ 

Я не» Знаете, если вам это нужно, но иногда это может быть очень полезно!

Answer 6

Используйте простое решение

<div class="container"> 
<div class="menu">Menu to the left</div> 
<div class="content">Content of site<br>x<br><br><br><br><br></div> 
</div> 

div.container{ 
width: 90%; 
height: 150px; 
background: red;   
} 

div.menu{ 
width: 150px; 
height: 100px; 
float: left; 
background: blue;   
} 

div.content{ 
background: green;   
margin-left: 150px; 
} 

http://jsfiddle.net/thirtydot/Ln49F/16/