Welcome to WebmasterWorld Guest from 54.167.46.29

Forum Moderators: not2easy

Message Too Old, No Replies

Enforcing two columns - no flow?

     
12:16 am on Nov 11, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Apr 12, 2005
posts:64
votes: 0


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.

10:33 am on Nov 11, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Apr 12, 2005
posts:64
votes: 0


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.

11:18 am on Nov 11, 2005 (gmt 0)

Full Member

10+ Year Member

joined:Feb 18, 2005
posts:262
votes: 0


Could you post some code? the html + CSS of the 2 columns. Also are the columns floated left?
11:38 am on Nov 11, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Apr 12, 2005
posts:64
votes: 0


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

2:13 am on Nov 13, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Apr 12, 2005
posts:64
votes: 0


I could really do with help on this.
10:58 am on Nov 13, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 26, 2004
posts:1497
votes: 0


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.
11:38 am on Nov 13, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Apr 12, 2005
posts:64
votes: 0


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.

12:42 pm on Nov 13, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 26, 2004
posts:1497
votes: 0


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)

4:17 pm on Nov 13, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Apr 12, 2005
posts:64
votes: 0


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.

1:16 am on Nov 14, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Apr 12, 2005
posts:64
votes: 0


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 :)

7:20 am on Nov 14, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 26, 2004
posts:1497
votes: 0


Ah, it's always something simple :)