Проблема макета CSS с тремя полями, плавающими внутри контейнера, а не соприкасающимися

Question

Я создаю макет с использованием HTML. У меня проблема с тремя коробками, плавающими внутри контейнера, я не хочу, чтобы они касались.

Вот мой код CSS:

/************************** Portfolio Section ***********************************/

#portfolio-container 
{
background: darkgreen;
height: 100px;
}

#portfolio1
{
    background: blue;
    height: 100px;
    width: 330px
}

#portfolio2
{
    background: lightgreen;
    height: 100px;
    width: 330px
}

#portfolio3
{
    background: red;
    height: 100px;
    width: 330px
}

#main-content 
{
background: green;
height: 100px;
}

Хорошо, я хочу, чтобы портфель 1, 2 и 3 находился внутри контейнера портфеля. вот HTML

<div id="portfolio-container">
    portfolio-container
</div>

<div id="portfolio1">portfolio 1</div>

<div id="portfolio2">portfolio 2</div>

<div id="portfolio3">portfolio 3</div>

<div id="main-content">
    main-content
</div>

Я знаю, что это, пожалуй, немного базово, но я изо всех сил пытаюсь найти конкретную информацию по этой проблеме. Должен ли я использовать li для составления списка или я могу сделать что-то необычное в CSS?

Спасибо за помощь. Любые материалы для чтения всегда приветствуются, если вы знаете полезные учебники?

Answer 1

Вам нужно разместить свои DIV.

Я сделал пример кода о том, как это сделать:

http://jsfiddle.net/g5xCk/

Answer 2

У вас есть напишите html как этот

<div id="portfolio-container">
<div id="portfolio1">portfolio 1</div>
<div id="portfolio2">portfolio 2</div>
<div id="portfolio3">portfolio 3</div>
</div>

и css как

#portfolio-container 
{
background: darkgreen;
height: 100px;
width:1000px;
float:left;
}

#portfolio1
{
    background: blue;
    height: 100px;
    width: 330px;
float:left;
}

#portfolio2
{
    background: lightgreen;
    height: 100px;
    width: 330px;
float:left;
}

#portfolio3
{
    background: red;
    height: 100px;
    width: 330px;
float:left;
}

Answer 3

Я не понимаю, вы хотите, чтобы они были внутри с такой же высотой, но с переливом или рядом друг с другом? Быть конкретными.

Один под другим : http://jsfiddle.net/qBwC4/4/

Бок о бок : http://jsfiddle.net/gVd8F/1/

Примечание. Число с плавающей запятой - это вводящий в заблуждение термин.