HTML Layout, CSS align divs

Question

У меня есть расположение в 3 столбцах, и я стараюсь сделать его более чувствительным к размеру экрана, а не стандартным заданным пикселям для каждого div.

поэтому у меня есть левый, центральный и правый div, в контейнере шириной 90%. Левые и правые плавающие divs - это 200px peice, но есть ли способ затем расширить центр div, чтобы заполнить пробел между ними?

Если нет, есть ли лучший способ сделать 3-х столбчатую компоновку в зависимости от размера экрана?

HTML

<div id="leftCol">Content for id "leftCol" Goes Here</div> 
<div id="mainCol">Content for id "mainCol" Goes Here</div> 
<div id="rightCol">Content for id "rightCol" Goes Here</div> 

CSS

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

#mainCol { 
margin-right: 20px; 
margin-left: 20px; 
width: /* WHAT DO I PUT HERE ??? */ 
float: left; 
} 

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

Answer 1

Там в Severa Я подхожу к этой «проблеме». Возможно, вам захочется взглянуть на существующие решения и использовать один из них или адаптировать их и сделать что-то, что сработает для вас.

Существующие структуры CSS, ориентированные на адаптивные сайты являются:

• Skeleton
• Bootstrap
• Много больше ...

Dynamic Drive также имеет ряд макетов, которые предлагают жидкости/вы можете проверить их и посмотреть, поможет ли вам ваш текущий случай: http://www.dynamicdrive.com/style/layouts/category/C10/

Answer 2

CSS

#left + #right + #center { 
    MARGIN-LEFT: 203px; 
} 
#left + #content { 
    MARGIN-LEFT: 203px; 
} 
#right + #center { 
    MARGIN-RIGHT: 203px 
} 

#left 
{ 
    float:left; 
    width:200px; 
    background:#00CC99; 
    height:300px; 
} 
#right 
{ 
    float: right; 
    width:200px; 
    background:#33FF66; 
    height:400px; 
} 
#center 
{ 
    height:550px; 
    padding:10px; 
    background:#006666; 
    color:#fff; 
} 

HTML

<div id="left"></div> 
<div id="right"></div> 
<div id="center">here you can place your text</div> 

Answer 3

Вы можете использовать ширину в процентах, а не в пикселях.

Answer 4

Я думаю, вы могли бы использовать что-то вроде этого:

HTML

<div id="wrap"> 
    <div id="leftCol">Content for id "leftCol" Goes Here</div> 
    <div id="mainCol"> 
    <div id="content">Content for id "mainCol" Goes Here</div> 
    </div> 
    <div id="rightCol">Content for id "rightCol" Goes Here</div> 
</div>​ 

CSS

#wrap { display: table } 
#wrap > div {display: table-cell} 
#leftCol { width: 200px; background-color: red; } 
#mainCol { background-color: green; } 
#rightCol { width: 200px; background-color: blue; } 
#mainCol #content { margin-left: 20px; } 

проверить его на http://jsfiddle.net/6DP5F/