Welcome to WebmasterWorld Guest from 50.19.53.104

Forum Moderators: not2easy

Message Too Old, No Replies

Enforcing two columns - no flow?

     

SeK612

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

10+ Year Member



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

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

10+ Year Member



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

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

10+ Year Member



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

SeK612

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

10+ Year Member



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

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

10+ Year Member



I could really do with help on this.

Robin_reala

10:58 am on Nov 13, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

11:38 am on Nov 13, 2005 (gmt 0)

10+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



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

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

10+ Year Member



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

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

10+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



Ah, it's always something simple :)
 

Featured Threads

Hot Threads This Week

Hot Threads This Month