homepage Welcome to WebmasterWorld Guest from 54.204.141.129
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Enforcing two columns - no flow?
SeK612




msg:1191138
 12:16 am on Nov 11, 2005 (gmt 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.

 

SeK612




msg:1191139
 10:33 am on Nov 11, 2005 (gmt 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.

collymellon




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

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

SeK612




msg:1191141
 11:38 am on Nov 11, 2005 (gmt 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;
}

SeK612




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

I could really do with help on this.

Robin_reala




msg:1191143
 10:58 am on Nov 13, 2005 (gmt 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.

SeK612




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

Robin_reala




msg:1191145
 12:42 pm on Nov 13, 2005 (gmt 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)

SeK612




msg:1191146
 4:17 pm on Nov 13, 2005 (gmt 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.

SeK612




msg:1191147
 1:16 am on Nov 14, 2005 (gmt 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 :)

Robin_reala




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

Ah, it's always something simple :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved