Connecting Tech Pros Worldwide Help | Site Map

Two Column Layout Issue

  #1  
Old November 17th, 2008, 08:55 PM
ZZ
Guest
 
Posts: n/a

I am having a bugger of a time figuring out why firefox won't
recognize my faux two-column layout. When the content column
("contcol") gets filled in with more content than the "menucol", both
"expand" properly in IE (it recognizes the background from "page" and
makes the column look expanded). In forefox (3) it doesn't do it -
the "menucol" ends with the content and the white box of the "contcol"
continues by itself. Here is the setup and CSS I am using:

<div id="page">
<div id="menucol"></div>
<div id="contcol"></div>
</div>


CSS:

#page{
width: 975px;
background-color: #CECC99;
}
#menucol{
float: left;
width: 290px;
background-color: #CECC99;
padding-top: 10px;
text-align: center;
}
#contcol{
float: right;
width: 684px;
background: #fff;
border-left: 1px solid #000;
}

Any help would be appreciated!

Thanks ahead;

Tom

  #2  
Old November 17th, 2008, 09:25 PM
dorayme
Guest
 
Posts: n/a

re: Two Column Layout Issue


In article <okl3i49o169rjegdpt95rl2luoqvv50tht@4ax.com>,
ZZ <noway@wpenewon.orgwrote:
Quote:
I am having a bugger of a time figuring out why firefox won't
recognize my faux two-column layout. When the content column
("contcol") gets filled in with more content than the "menucol", both
"expand" properly in IE (it recognizes the background from "page" and
makes the column look expanded). In forefox (3) it doesn't do it -
the "menucol" ends with the content and the white box of the "contcol"
continues by itself.
IE (at least 6) behaves differently to FF in this matter. FF is strictly
correct. You need to either put overflow: hidden; or overflow: auto; on
your container or else style a clear into a last element in the
container. Even going so far as to create an element for this purpose:
<div style="clear: both"></div>

You might get something out of:

<http://netweaver.com.au/floatHouse/>

--
dorayme
  #3  
Old November 18th, 2008, 05:35 AM
ZZ
Guest
 
Posts: n/a

re: Two Column Layout Issue


On Tue, 18 Nov 2008 08:16:46 +1100, dorayme
<doraymeRidThis@optusnet.com.auwrote:
Quote:
>In article <okl3i49o169rjegdpt95rl2luoqvv50tht@4ax.com>,
ZZ <noway@wpenewon.orgwrote:
>
Quote:
>I am having a bugger of a time figuring out why firefox won't
>recognize my faux two-column layout. When the content column
>("contcol") gets filled in with more content than the "menucol", both
>"expand" properly in IE (it recognizes the background from "page" and
>makes the column look expanded). In forefox (3) it doesn't do it -
>the "menucol" ends with the content and the white box of the "contcol"
>continues by itself.
>
>IE (at least 6) behaves differently to FF in this matter. FF is strictly
>correct. You need to either put overflow: hidden; or overflow: auto; on
>your container or else style a clear into a last element in the
>container. Even going so far as to create an element for this purpose:
><div style="clear: both"></div>
>
>You might get something out of:
>
><http://netweaver.com.au/floatHouse/>
Thanks, I am looking at it with the newest IE7.

I did fail to mention that I have a footer div after the container
with a clear:both in it.

However, I did user oveflow: hidden, and it worked great to fix the
issue in FF.

Thanks for all of your help,

Tom


  #4  
Old November 18th, 2008, 07:15 PM
dorayme
Guest
 
Posts: n/a

re: Two Column Layout Issue


In article <agk4i4db06m0suld4n9s2vn2knos3nnro9@4ax.com>,
ZZ <noway@wpenewon.orgwrote:
Quote:
On Tue, 18 Nov 2008 08:16:46 +1100, dorayme
<doraymeRidThis@optusnet.com.auwrote:
>
Quote:
In article <okl3i49o169rjegdpt95rl2luoqvv50tht@4ax.com>,
ZZ <noway@wpenewon.orgwrote:
Quote:
I am having a bugger of a time figuring out why firefox won't
recognize my faux two-column layout. When the content column
("contcol") gets filled in with more content than the "menucol", both
"expand" properly in IE (it recognizes the background from "page" and
makes the column look expanded). In forefox (3) it doesn't do it -
the "menucol" ends with the content and the white box of the "contcol"
continues by itself.
IE (at least 6) behaves differently to FF in this matter. FF is strictly
correct. You need to either put overflow: hidden; or overflow: auto; on
your container or else style a clear into a last element in the
container. Even going so far as to create an element for this purpose:
<div style="clear: both"></div>

You might get something out of:

<http://netweaver.com.au/floatHouse/>
>
Thanks, I am looking at it with the newest IE7.
>
It is not really advisable, see the preamble! But at least it is better
than reading it with IE 6. <g>
Quote:
I did fail to mention that I have a footer div after the container
with a clear:both in it.
>
That will not work. The clearing element, if it is to make the container
grow height, must be in the container itself and generally be the last
thing before the container says goodnight.
Quote:
However, I did user oveflow: hidden, and it worked great to fix the
issue in FF.
>
And many other modern browsers too.

--
dorayme
  #5  
Old November 19th, 2008, 02:55 AM
ZZ
Guest
 
Posts: n/a

re: Two Column Layout Issue


On Wed, 19 Nov 2008 06:11:47 +1100, dorayme
<doraymeRidThis@optusnet.com.auwrote:
Quote:
>In article <agk4i4db06m0suld4n9s2vn2knos3nnro9@4ax.com>,
ZZ <noway@wpenewon.orgwrote:
>
Quote:
>On Tue, 18 Nov 2008 08:16:46 +1100, dorayme
><doraymeRidThis@optusnet.com.auwrote:
>>
Quote:
>In article <okl3i49o169rjegdpt95rl2luoqvv50tht@4ax.com>,
ZZ <noway@wpenewon.orgwrote:
>
>I am having a bugger of a time figuring out why firefox won't
>recognize my faux two-column layout. When the content column
>("contcol") gets filled in with more content than the "menucol", both
>"expand" properly in IE (it recognizes the background from "page" and
>makes the column look expanded). In forefox (3) it doesn't do it -
>the "menucol" ends with the content and the white box of the "contcol"
>continues by itself.
>
>IE (at least 6) behaves differently to FF in this matter. FF is strictly
>correct. You need to either put overflow: hidden; or overflow: auto; on
>your container or else style a clear into a last element in the
>container. Even going so far as to create an element for this purpose:
><div style="clear: both"></div>
>
>You might get something out of:
>
><http://netweaver.com.au/floatHouse/>
>>
>Thanks, I am looking at it with the newest IE7.
>>
>
>It is not really advisable, see the preamble! But at least it is better
>than reading it with IE 6. <g>
>
Quote:
>I did fail to mention that I have a footer div after the container
>with a clear:both in it.
>>
>
>That will not work. The clearing element, if it is to make the container
>grow height, must be in the container itself and generally be the last
>thing before the container says goodnight.
>
Quote:
>However, I did user oveflow: hidden, and it worked great to fix the
>issue in FF.
>>
>And many other modern browsers too.


And just to follow-up for anyone else who encounters this - having
your doctype at the top of your page is important for the browser.

Thanks again for your help,

Tom

  #6  
Old November 19th, 2008, 04:55 AM
Bergamot
Guest
 
Posts: n/a

re: Two Column Layout Issue



ZZ wrote:
Quote:
>
And just to follow-up for anyone else who encounters this - having
your doctype at the top of your page is important for the browser.
It's not just the DOCTYPE, but which DOCTYPE. They are not all created equally.

--
Berg
Closed Thread


Similar Threads
Thread Thread Starter Forum Replies Last Post
firefox, ie put different padding in two-column-with-footer layout Edward answers 2 August 4th, 2006 09:45 AM
2 column layout Jef Driesen answers 16 July 19th, 2006 09:25 AM
CSS layout frustration Diane Wilson answers 30 August 25th, 2005 03:15 PM
Help with Firefox in a two-column float layout Matt Bostock answers 5 July 21st, 2005 02:00 AM