I'm struggling to get a css three column layout to work and wondered if anyone had any idea why this is happening to help me resolve the issue?

 

The 3 boxes are annoyingly appearing like the attached image of the layout rather than all in line with each other...

 

My HTML is set as:

<div id="infocontainer">

<div id="left">left test</div>

<div id="middle">middle test</div>

<div id="right">right test</div>

</div>

 

and my css file is set as:

 

#infocontainer {

margin: 350px auto;

padding: 0px;

}

 

#left {

float: left;

width: 230px;

margin: 0;

}

 

#middle {

margin-left: 260px;

margin-right: 260px;

}

 

#right {

float: right;

width: 230px;

margin: 0;

padding: 0;

}

 

any advice would be great. Thanks

try this

 

html

<div id="infocontainer">
<div class=column" id="left">left test</div>
<div class="column" id="middle">middle test</div>
<div class="column" id="right">right test</div>
</div>

 

css

#infocontainer {
width:800px;
margin:0 auto;
}
.column {
float:left;
width:230px;
}
#left {
margin:0 35px 0 0;
}
#middle {
margin:0 35px 0 0;
width:260px;
}
#right {
margin:0;
}

 

What I have done is included a class to each div, called column, and I use this to cust down the amount of css code. The column class sets the width of the column and floats them all left.

Now the left, middle and right div's just have their margins in the css, i have set the middle and left and 35px to the right, change this to suit your needs.

I also added a width of 260px to the middle column.

 

That should work, just change the margins and widths to suit your needs.

 

It's never ideal to have 3 columns and float them left, right and stick on to the middle, unless you use an absolute positioning on the middle column.

Thanks for this Faevilangel. That's done the trick.

 

A

I normally do a fixed with div id, say 800 wide,

and div 3 classes, say 200 wide, the first 2 float left and the 3rd floats right.