Как выровнять дивы внутри родительского DIV и заполнить его

Question

Я использую самозагрузки, и я хотел бы, чтобы выровнять три DIV внутри одного из родителей без каких-либо границ:

<div id="parent" class="col-lg-12"> 
     <div id="main"> ... </div> 
     <div id="leftside"> ... </div> 
     <div id="bottom"> ... </div> 
    </div> 

ДИВ #bottom: заполнить дно родительский DIV слева направо с высотой: 100px

Дива #leftside: заполнить левую сторону от верха до Div # дна с 100px

сНу #main: заполнить остальную часть родительского DIV

UPDATE: Мой вопрос не был достаточно точным. Я хотел бы что-то вроде этого: jsfiddle.net/kvs72e2j но без фиксированного имущества. Я бы хотел, чтобы divs заполнили родительский элемент, а родительский элемент должен заполнить его, но не окно.

Answer 1

HTML:

<div id="parent" class="col-lg-12"> 
<div id="top"> 
    <div id="leftside"> ... </div> 
    <div id="main"> ... </div> 
</div> 
    <div id="bottom"> ... </div> 

CSS:

#parent { 
    position: relative; 
    background-color: black; 
} 

#top { 
    padding-bottom: 100px; 
} 

#leftside { 
    background-color: red; 
    float: left; 
    width: 100px; 
} 

#main { 
    background-color: blue; 
} 

#bottom { 
    background-color: green; 
    position: absolute; 
    bottom: 0; 
    height: 100px; 
    width: 100%; 
} 

Я просто понял, что я сделал это излишне сложным. Вот простое решение: HTML:

<div id="parent" class="col-lg-12"> 
    <div id="leftside"> ... </div> 
     <div id="main"> ... </div> 
     <div id="bottom"> ... </div> 
    </div> 

CSS:

#parent { 
    background-color: black; 
} 

#leftside { 
    float: left; 
    min-width: 100px; 
    background-color: red; 
} 

#main { 
    background-color: blue; 
} 

#bottom { 
    clear: both; 
    background-color: green; 
    height: 100px; 
}