проблема с Div`ами

[Gr1n4]

Добрый день, у меня следующая проблема: есть главный div container (на картинке в синей рамке) в нем расположены еще два div`a content (тот что слева обведен зеленой рамкой) и sidebar (обведен красной).

1. главный div контейнер почему-то по высоте меньше чем div content.

2. sidebar занимает место не справа, а на всю ширину страницы (по сути он сейчас равен по размерам container).

Надеюсь на помощь, т.к. только начал разбираться в верстке.

Так выглядит html:

<div id="container">
            <div id="content">    
                <div class= "slider">
                    <img src ="img/slider.png" alt= "Слайдер"/>
                </div>            
                <div class= "news">    
                              	 <!-- тут новость -->
                </div><!-- end news-->
       	 </div> <!-- end content-->

            <div id="sidebar">
                <div class="reklama">
                    <img src= "img/reklama_img.png" width="265px" height="360px" alt= "реклама"/>
                    <p><a href="#">Реклама</a></p>
                </div>
                <div class = "section">
                    <h3>Еще читают</h3>                  
                </div>            
            </div>  <!-- end sidebar-->
        </div> <!-- end container-->

Вот css:

#container {
    border-color: blue;
    border-style: solid;	
    border-width: 1px;
    background:#ccc;    
    padding-top: 25px;
}

#content {

    border-color: green;
    border-style: solid;
    border-width: 1px;          
    background:#ccc;
    padding:4px;

    width: 617px;
    float:left;
    padding: 0 15px 0 50px;
}
#sidebar {
    padding:0 10px 0 50px;
    border-color: red;
    border-style: solid;   	
    border-width: 2px;
    background:#ccc;

}

Подскажите что нужно дописать или что я не так указал.

[RomanF]

Привет , а почему sidebar-у не задал размеры ? Ширину и высоту . Можно задать

body { width:1200;

height:650px; /*например*/

}

.container {

width:100%; /* займет всю ширину тела страницы*/

height:___ px % ; /*какая нужна и в чем выражается , решай сам*/

}

.content {width: ; /*Какой ширины хочешь ... */

height: ; /* Сколько нужно */

.sidebar{

} /* таже песня с высотой и шириной*/

[code]

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

Не красиво ответил , извините , еще не разобрался с системой , надеюсь все понятно.

[caprella]

Почитайте о версте двухколоночных макетов http://htmlbook.ru/layout