Enforcing two columns - no flow?

[SeK612]

I'm working on a page with two colums, a standard layout with a small navigation column to the left and a larger content column to the right.

I've set it up o.k but I'm finding problems when the content of the larger right coloum exceeds that of the left. Instead of retaining it's restricted shape the content drops beneath the left column.

I haven't come across this problem before but, from Googling, it seems it may be related to the flow of the page.

I don't know how to fix or change this though.

[SeK612]

Still struggling with this :(

Imposing a fixed height on the left column fixes it but it's not practical and it has to be greater than the height of the content in the right column otherwise the problem continues.

[collymellon]

Could you post some code? the html + CSS of the 2 columns. Also are the columns floated left?

[SeK612]

CSS for the two columns is below. They're implimented using div's <div class="Column">content</div>. They're both held in a third containing column.

.Navigation
{
width:30%;
margin:0px auto;
float:left;
padding-left:3px;
}
.Main
{
width:70%;
margin:0px auto;
float:right;
}

[SeK612]

I could really do with help on this.

[Robin_reala]

Padding goes on the outside of width so what you're saying here is that the width of the two columns should equal 3px + 30% + 70% - this obviously is over 100%. With the current lack px/% calculation in CSS you're going to have to do with yourself. I suggest dropping the % of the left column to 29%. This will then work fine as long as the total width is greater than 300px.

[SeK612]

Thanks, the problem still seems to occur though. Heres the altered css (including the containing box this time).

.Content
{
width:760px;
background-color:#FFFFFF;
margin:0px auto;
border-left:2px solid #000000;
border-right:2px solid #000000;
border-bottom:2px solid #000000;
}
.Navigation
{
width:29%;
margin:0px auto;
float:left;
padding-left:3px;
}
.Main
{
width:70%;
margin:0px auto;
float:right;
}

I'm still at a loss of how to sort this. The only way I've gotten anywhere so far is to manually enforce a height attibute to the two sections, but this breaks down when this height figure is exceeded.

[Robin_reala]

If your container has a fixed width it makes sense to work in fixed widths for the children as well. By my calculations here's the code you want to be using:

.Content
{
width:760px;
background-color:#FFF;
margin:0px auto;
border:2px solid #000;
border-top: 0;
}
.Navigation
{
width:225px;
margin:0;
float:left;
padding-left:3px;
}
.Main
{
width:532px;
margin:0;
float:right;
}

(I made a few changes as well to reduce overall code size)

[SeK612]

Thanks. It's still not sorting the problem though :(

The CSS file doesn't contain much else (some body attributes, a h2 class and a header class which is similar to the container posted above).

The html file is pretty standard to. There is a include file for the navigation bit and several others in the page. <div style="clear:both"></div> is also used to fix some border problem but I'm not sure that it's this causing the problem.

[SeK612]

Fixed it! There wasn't a problem with the css code after all. The class name entered for the right column content was wrong so there was no class effecting it. This left it to take on the default alignment (so it wrapped beneath the left column if it was greater) :)

Thanks for all the help :)

[Robin_reala]

Ah, it's always something simple :)