CODEWITHSUNDEEP
htmlcsscss-float
ragebunny
ragebunny

Reputation: 1760

CSS layout issue with three boxes floating inside a container, not 'touching'

I'm creating a layout using HTML. I have a problem with three boxes floating inside a container, I don't want them touching.

Here is my CSS code:

/************************** 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;
}

Okay, so I want the portfolio1, 2 and 3 to be inside the portfolio container. here is the 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>

I know this is probably a little basic, but I'm struggling to find specific info on this problem. Should I be using li to make a list or could I do something fancy in the CSS?

Thanks for the help. Some reading material is always welcome if you know of useful tutorials?

Upvotes: 1

Views: 1567

Answers (3)

Ashwin Krishnamurthy
Ashwin Krishnamurthy

Reputation: 3758

I dont get you, you want them inside with the same height but with an overflow or side by side positioning? Be specific.

One below the other : http://jsfiddle.net/qBwC4/4/

Side By Side : http://jsfiddle.net/gVd8F/1/

Note : Float is quite a misleading term.

Upvotes: 1

MicBehrens
MicBehrens

Reputation: 1798

You need to float your DIVs.

I have made a code example on how to do it:

http://jsfiddle.net/g5xCk/

Upvotes: 2

Sonal Khunt
Sonal Khunt

Reputation: 1894

You have Write html like this

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

and css like

#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;
}

Upvotes: 2

Related Questions