Using float in css

Question

Possible Duplicate:
html and css syntax

I am trying to make a 3 column page

this is the CSS:

#left {
float: left;
width: 150 px;
background-color: blue;
height: 400px;
}

#center {
margin-left: auto;
margin-right: auto;
margin-top: 0px;
width: 600 px;
background-color: yellow;
height: 400px;
clear: none;
}

#right {
float: right;
width: 150px;
background-color: red;
height: 400px;
}

When I view the html file in my browser, the right column just drops down below the left column, what am I doing wrong?

What is the width of the parent element? It must be +900px wide. — Sawny, Nov 06 '11 at 16:27

score 1 · Answer 1 · answered Nov 06 '11 at 16:27

1

Usually you don't have enough width. Check your body width if it's less then the sum of this 3 columns change the body width to this sum. I hope this helped. If not ask again. : )

answered Nov 06 '11 at 16:27

Bankin

777
1
16
31

It did help thank you! :) Now, If I want the center to expand when there is more content in it, what do I make the height? :) – matt morris Nov 06 '11 at 17:00
Leave the height to auto it will grow according to your information : ) – Bankin Nov 18 '11 at 20:59

score 1 · Answer 2 · answered Nov 06 '11 at 16:28

Width is irrelevant in this case. You need a float on your center column to make your right column not wrap. But your margin: auto will not work when you do that. Best is to use a standard pattern for this.

Here's one: http://matthewjamestaylor.com/blog/perfect-3-column.htm

Here's what it looks like with float: left. I made the columns narrow to show that width isn't the issue and to fit in the frame.:

http://jsfiddle.net/ThinkingStiff/RPRQD/

Using float in css

2 Answers2