homepage Welcome to WebmasterWorld Guest from 23.20.61.85
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, Moderators: not2easy

CSS Forum

    
Enforcing two columns - no flow?
SeK612

5+ Year Member



 
Msg#: 7891 posted 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

5+ Year Member



 
Msg#: 7891 posted 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

5+ Year Member



 
Msg#: 7891 posted 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

5+ Year Member



 
Msg#: 7891 posted 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

5+ Year Member



 
Msg#: 7891 posted 2:13 am on Nov 13, 2005 (gmt 0)

I could really do with help on this.

Robin_reala

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 7891 posted 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

5+ Year Member



 
Msg#: 7891 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 7891 posted 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

5+ Year Member



 
Msg#: 7891 posted 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

5+ Year Member



 
Msg#: 7891 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 7891 posted 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