12 replies [Last post]
Kolyana
Offline
Regular
Last seen: 17 years 1 day ago
Timezone: GMT-8
Joined: 2005-07-06
Posts: 19
Points: 0

I'm using something similar to this:
http://webhost.bridgew.edu/etribou/layouts/2col_footer/

It's essentially a header, footer and 2 columns, the left being of a fixed width and the content area being set to 'auto' with a left margin to allow room for the left 'nav bar'.

The problem that I have is that this works GREAT until there's a floated element in the content area, and then I get a result like this:

I have multiple pages on my site doing this and they always boil down to the same problem and pattern: If the content area contains a float, it will float beneath whatever is in the left column ... even if this is simple text with no formatting.

Despite the left margin on the main content, it appears that it's occupying the entire width of the screen invisibly, so the left column's contents are influencing the main column's content as if they shared the same div or physical space. Multiple browsers are doing this.

I have posted an example here:
http://cleanvia.com/cssTest/css_test.htm

Removing the image from the top left of the page does nothing. Removing the links on the left and replacing them with just text does nothing ... the content on the right still floats beneath whatever is in the left column.

The problem occurs in Opera, Netscape and Firefox but not, oddly, Internet Explorer. Any ideas?

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 10 weeks 13 hours ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Header, Footer, 2 Columns, Fluid ... content problem

I can't seem to load your page; any chance of posting the HTML and CSS?

Verschwindende wrote:
  • CSS doesn't make pies

Kolyana
Offline
Regular
Last seen: 17 years 1 day ago
Timezone: GMT-8
Joined: 2005-07-06
Posts: 19
Points: 0

Header, Footer, 2 Columns, Fluid ... content problem

Odd, it works fine for me (although, granted, comcast has stunningly slow servers!). There's a lot of CSS, so let me strip this down:

Layout (CSS):

/* Template [3]: No colors or images */

body {
	font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
}

div
{
	/* this is for netscape 4's sake */
	padding: 0;
	margin: 0;
}
#pageFrame
{
	border: solid 0px #000;
	background-color: #fff;
	color: #000;
	min-width: 500px;
}
#outerfooter, #masthead, #innerLeftColumn, #contentColumn
{
	border: solid 0px #000;
}

								/* header */
* html #masthead
{
	position: relative;
}
#masthead {
	height: 20px;
	padding: 10px;
	z-index: 10;
}
#leftColumn
{
	margin-right: -200px;	/* IE 4 fix */
	float: left;
	width: 200px;
	/*/*/ /*/margin: 0 0 0 2px; /* Silly Netscape hack to get the borders to line up */
}
#innerLeftColumn
{
	border-right-width: 1px;
	border-right-style: dotted;
}






#contentColumn
{
	width: auto;
	margin-left: 199px;
	border-left-width: 1px;
	border-left-style: dotted;
}
#innerLeftColumn, #innerContentColumn
{
	padding: 10px;
}

#innerContentColumn
{
	overflow: visible;
	height: 100%;	/* fix the Win32 IE float bug */
}
#contentColumn>#innerContentColumn
{
	height: auto;	/* fix Opera 5 which breaks with the above IE fix */
}
#innercontentcolumn
{
	height: 100%;	/* fix IE 5.0 which parse the Opera fix, note the selector is all lower case */
}
#outerfooter
{
	border-top-width: 1px;
	clear: left;
	z-index: 10;
}


								/* complex css */

#innerLeftColumn img
{
	display: block;
	margin: 0 auto;
	text-align: center;	/* IE 5 centering hack */
}
#innerLeftColumn, #innerContentColumn
{
	overflow: visible;	/* fix the Win32 IE italics bug */
	height: 100%;		/* ditto */
}
#innerleftcolumn, #innercontentcolumn
{
	overflow: hidden;	/* IE5.0 fix the Win32 IE italics bug */
	width: 100%;
	height: auto;
}
#innerleftcolumn/* hide from IE5.0 */, #innercontentcolumn/* hide from IE5.0 */
{
	overflow: visible;	/* reset IE5.0 fix for 5.5 */
	height: 100%;		/* ditto */
	width: auto;		/* reset Safari after picking up the above IE5.0 fix : it's case insensitive to CSS selectors */
}

Page (html):

<div id="pageFrame">
	<div id="masthead"><span class="title2">Kolyana : templates &amp; themes</span></div>	<div id="leftColumn">
		<div id="innerLeftColumn">
			<div class="sn_menu">
	<span class="title3">Links</span>
	
	<a href="http://www.kolyana.com/v2/t/3/home.asp?sid=DJpC8AFNqe3SE84v4Q" title="www.kolyana.com home">Home</a>
	<a href="http://www.kolyana.com/v2/t/3/forums.asp?sid=DJpC8AFNqe3SE84v4Q" title="www.kolyana.com forums">Forums</a>
	<a href="http://www.kolyana.com/v2/t/3/archive.asp?sid=DJpC8AFNqe3SE84v4Q" title="News Archive">Archive</a>
	<a href="http://www.kolyana.com/v2/t/3/games.asp?sid=DJpC8AFNqe3SE84v4Q" title="Games">Games</a>

	<span class="title3">Account</span>
	
	<a href="http://www.kolyana.com/v2/t/3/account.asp?sid=DJpC8AFNqe3SE84v4Q" title="Access your account.">Account</a>
	<a href="http://www.kolyana.com/v2/t/3/register.asp?sid=DJpC8AFNqe3SE84v4Q" title="Register an account to personalize this site and post in the forums.">Register</a>

	
	<a href="http://www.kolyana.com/v2/logout_process.asp?sid=DJpC8AFNqe3SE84v4Q&amp;fid=&amp;tid=" title="Log out of www.kolyana.com">Log-Out</a>
	

</div>
<div class="sn_menu">

	<span class="title3">Profile Options</span>
	
	<a href="http://www.kolyana.com/v2/t/3/account_profile.asp?sid=DJpC8AFNqe3SE84v4Q" title="Edit information about you; your contact details, etc.">Profile</a>
	<a href="http://www.kolyana.com/v2/t/3/avatar_library.asp?sid=DJpC8AFNqe3SE84v4Q" target="_blank" title="Open your Avatar Library: Upload new, remove old, assign a new avatar.">Avatar Library</a>
	<a href="http://www.kolyana.com/v2/t/3/account_messages.asp?sid=DJpC8AFNqe3SE84v4Q" title="View and reply to private messages.">Messages</a>
	<a href="http://www.kolyana.com/v2/t/3/account_subscriptions.asp?sid=DJpC8AFNqe3SE84v4Q" title="Threads you are watching and are subscribed to.">Subscriptions</a>
	<a href="http://www.kolyana.com/v2/t/3/account_bl.asp?sid=DJpC8AFNqe3SE84v4Q" title="Edit your Buddy list.">Buddy List</a>
	<a href="http://www.kolyana.com/v2/t/3/account_il.asp?sid=DJpC8AFNqe3SE84v4Q" title="Edit your Ignore list.">Ignore List</a>
	<a href="http://www.kolyana.com/v2/t/3/account_password.asp?sid=DJpC8AFNqe3SE84v4Q" title="Change your password and main registered email address.">Password</a>

	<span class="title3">Site Options</span>
	
	<a href="http://www.kolyana.com/v2/t/3/account_preferences.asp?sid=DJpC8AFNqe3SE84v4Q" title="Edit your preferences regarding www.kolyana.com; forum preferences, etc.">Preferences</a>
	<a href="http://www.kolyana.com/v2/t/3/account_themes.asp?sid=DJpC8AFNqe3SE84v4Q" title="www.kolyana.com forums">Themes</a>

</div>

<!-- generic login form for inclusion in side barsor main page (alter css accordingly) -->


		</div>
	</div>

	<div id="contentColumn">
		<div id="innerContentColumn">
			
<form id="frm_themes" name="frm_themes" method="post" action="../../account_themes_process.asp?sid=DJpC8AFNqe3SE84v4Q">
	
	<span class="blurb">
		<em>Templates</em> are different site <em>structures</em> and <em>page layouts</em>. Each will have one or more <em>Themes</em>. 
		<em>Themes</em> are combinations of colors, fonts and font-sizes and even within the same template thet can offer a wide variety
		of looks, feel and site ambience.
		
		<p>Select a Template or Theme by selecting the radio button beneath it and then clicking the <em>Submit</em>
button or click on the associated thumbnail. Note that different
templates have different themes, so select your template first to see
what themes are available.</p>
	</span>
	
	<div class="autoclear" id="templates">
	
	<div class="theme_imgWrapper">
		<div class="subtitle">V2.0 New</div>
		<a href="http://www.kolyana.com/v2/account_themes_process.asp?sid=DJpC8AFNqe3SE84v4Q&amp;teid=0" title="Select this template">
		<img src="css_test_files/thumbnail.gif" alt="V2.0 New" border="2" hspace="2" vspace="2"></a>
		<br>
		<input name="frm_templateid" value="0" type="radio">
	</div>
	
	<div class="theme_imgWrapper">
		<div class="subtitle">Traditional</div>
		<a href="http://www.kolyana.com/v2/account_themes_process.asp?sid=DJpC8AFNqe3SE84v4Q&amp;teid=2" title="Select this template">
		<img src="css_test_files/thumbnail_003.gif" alt="Traditional" border="2" hspace="2" vspace="2"></a>
		<br>
		<input name="frm_templateid" value="2" type="radio">
	</div>
	

	
	<div class="clear"></div>
	</div>
	<div class="clear" align="center"><input name="bTemplate" id="bTemplate" value="Pick Template" type="submit"></div>
	
	<div class="autoclear" id="themes">
	
	<div class="theme_imgWrapper theme_checked">
		<div class="subtitle">Exploding Dog</div>
		<a href="http://www.kolyana.com/v2/account_themes_process.asp?sid=DJpC8AFNqe3SE84v4Q&amp;thid=0" title="Select this theme">
		<img src="css_test_files/0.gif" alt="Exploding Dog" border="2" hspace="2" vspace="2"></a>
		<br>
		<input name="frm_themeid" value="0" checked="checked" type="radio">
	</div>
	
	<div class="theme_imgWrapper">
		<div class="subtitle">Anime</div>
		<a href="http://www.kolyana.com/v2/account_themes_process.asp?sid=DJpC8AFNqe3SE84v4Q&amp;thid=1" title="Select this theme">
		<img src="css_test_files/1.gif" alt="Anime" border="2" hspace="2" vspace="2"></a>
		<br>
		<input name="frm_themeid" value="1" type="radio">
	</div>
	
	<div class="clear"></div>
	</div>
	
	<div class="clear" align="center"><input name="bTheme" id="bTheme" value="Pick Theme" type="submit"></div>
	
</form>

		</div>
	</div>
	
		<div id="outerfooter">
		<div id="footer">
<a href="http://www.kolyana.com/v2/t/3/about.asp?sid=DJpC8AFNqe3SE84v4Q" title="About www.kolyana.com">About</a> | 
<a href="http://www.kolyana.com/v2/t/3/terms.asp?sid=DJpC8AFNqe3SE84v4Q" title="Terms, Conditions and your Privacy">Privacy Policy</a> | 
<a href="http://www.kolyana.com/v2/t/3/disclaimer.asp?sid=DJpC8AFNqe3SE84v4Q" title="www.kolyana.com Disclaimer">Disclaimer</a> | 
<a href="http://www.getnetwise.org/" title="Get wise, stay safe" target="_Blank">GetNetWise</a>
<p>
© Copyright Kolyana.com 1998 - 2005, All Rights Reserved.<br>
All images © copyright their original owners. All Rights reserved. 
</p></div>
	</div>
	
</div>

<div id="minimalist_mainPicture"><img src="css_test_files/1_002.gif" alt="" border="0"></div>

CSS (Additional):

div.theme_imgWrapper {
	float: left;
	padding: 4px;
	margin: 2px;
	border: 1px dotted;
	text-align: center;
}
div.theme_imgWrapper div.subtitle {
	font-size: smaller;
}
div.theme_imgWrapper a {
	border: 0px;
}
div.theme_checked {
	background: #F2F2F2 none;
}
#bTemplate, #bTheme {
	margin: 5px auto;
}

CSS (Visual):

								/* ExplodingDog Theme */
body {
	background-color: #E8F6FF;				/* sky */
	background-image: url(../../../../images/T/3/footer0.gif);
	background-repeat: repeat-x;
	background-position: bottom left;
}
#pageFrame
{
	background-image: url(../../../../images/T/3/clouds.gif);
	background-repeat: no-repeat;
	background-position: 0 0;
	background-color: transparent;
}
#masthead {
	border-bottom: 1px dotted #9FD8FC;
	padding-left: 210px;
}
#masthead span.title2 {
	background-color: #fff;
}

#minimalist_mainPicture {
	position: absolute;
	z-index: 100;
	left: 0;
	top: 0;
	
}

.bold {
	font-weight: normal;
}
.important {
	background-image: url(../../../../images/trans_50.png);
	padding: 5px;
}
li {
	list-style-type: circle;
	color: #555555;
}
span.blurb, span.notice {
	background-image: url(../../../../images/trans_50.png);
}
.subcontent_wrapper {
	border: 1px dotted;
	border-color: #6699FF;
	background-image: url(../../../../images/trans_50.png);
}
.subcontent_wrapper .title, div#content div.title {
	background-color: #BBE5FF;
	border: 0px;
}

form#register {
	margin-bottom: 10px;
}
#contentColumn .subcontent_wrapper .title2 {
	font-weight: bold;
	text-transform: lowercase;
	text-align: center;
	margin-bottom: 5px;
	padding: 5px 10px;
	letter-spacing: 0.2em;
	display: block;
	background-color: #BBE5FF;
	border: 1px solid #9FD8FC;
}
#contentColumn .subcontent_wrapper .title3 {
	font-weight: normal;
	text-transform: lowercase;
	text-align: center;
	padding: 5px 10px;
	letter-spacing: 0.2em;
	display: block;
	background-color: transparent;
	border: 0px;
}


#innerLeftColumn, #contentColumn, #outerfooter {
	border-color: #A9D2EA;
}
#innerLeftColumn {
	padding-top: 201px;
}
#footer {
	color: #7C7782;
	font-size: 0.9em;
}


span.title3 {
	font-weight: bold;
	letter-spacing: 0.3em;
}

								/* side navigation */
div.sn_menu {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-transform: lowercase;
	font-size: 0.8em;
	line-height: 1.3em;
}
div.sn_menu span.title2 {
	font-weight: bold;
	margin-top: 10px;
	margin-bottom: 5px;
	padding: 5px 10px;
	letter-spacing: 0.2em;
	display: block;
	background-color: #BBE5FF;
	border: 1px solid #9FD8FC;
}
div.sn_menu span.title3 {
	margin-top: 10px;
	margin-bottom: 5px;
	padding: 5px 10px;
	letter-spacing: 0.2em;
	display: block;
	background-color: #BBE5FF;
	border: 1px solid #9FD8FC;
}
div.sn_menu a {
	color: #6488D0;
	display: list-item;
	list-style-type: circle;
	margin-left: 20px;
}
div.sn_menu a:hover {
	color: #176DA3;
	text-decoration: none;
}
								/* login */
div.sn_menu form span.title3 {
	margin-top: 0px;
	padding: 5px 10px;
	text-align: center;
	letter-spacing: 0.2em;
	display: block;
	background-color: transparent;
	border: 0px solid #9FD8FC;
	font-weight: normal;
}
div.sn_menu form {
	text-align: center;
}
div.sn_menu form input#frm_un, div.sn_menu form input#frm_pw {
	border: 1px solid #9FD8FC;
	background-color: #DAF0FD;
	text-align: center;
	padding: 3px auto;
}
div.sn_menu form div span {
	display: block;
	margin-top: 7px;
}
div.sn_menu form input#remember {
	margin-top: 3px;
}
div.sn_menu form a.subnote {
	display: inline;
	margin: 2px 0 0 0;
	padding: 0;
	line-height: normal;
	font-style: normal;
	font-size: inherit;
}
div.sn_menu form a.subnote:hover {
	border-bottom: 0;
}


								/* main content */
#contentColumn span.title3 {
	padding: 5px 10px;
	display: block;
	background-color: #BBE5FF;
	border: 1px solid #9FD8FC;
}

#outerfooter {

}
div#footer {
	height: 150px;
	color: #0000FF;
}
#footer a:hover {
	color: #0066FF;
}



								/* form elements */
input, select, option {
	font-family: Verdana, Arial, Helvetica, sans-serif;
}


div.error {
	background-image: url(../../../../images/T/3/error0.gif);
	background-repeat: no-repeat;
	background-color: #D5A75E;
}
#contentColumn input, #contentColumn select, #contentColumn option {
	font-size: smaller;
}

The Problem Code?

.clear{clear:both;}
.autoclear:after {
	display: block;
	position:relative; /*added so it works better with IE5 */
	height: 0;
	clear: both;
	visibility:hidden;
	content: ".";
	}

In all instances of this problem occuring, it's the above code that causes it.

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 3 years 38 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

Header, Footer, 2 Columns, Fluid ... content problem

Can't load the page either... but I guessing you're probably not clearing your floats?

Kolyana
Offline
Regular
Last seen: 17 years 1 day ago
Timezone: GMT-8
Joined: 2005-07-06
Posts: 19
Points: 0

Header, Footer, 2 Columns, Fluid ... content problem

Well I grabbed this off the internet some time ago and I've been using it on my float-containers:

.autoclear:after {
	display: block;
	position:relative; /*added so it works better with IE5 */
	height: 0;
	clear: both;
	visibility:hidden;
	content: ".";
	}

I'm guessing that this is why the page layout is not disrupted in IE ... autoclear:after doesn't work in that browser?

It's also the single piece of css that is causing this problem.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 10 weeks 13 hours ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Header, Footer, 2 Columns, Fluid ... content problem

See here's the thing; without posting your entire HTML I can't be sure whether you have a Doctype in place Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

Kolyana
Offline
Regular
Last seen: 17 years 1 day ago
Timezone: GMT-8
Joined: 2005-07-06
Posts: 19
Points: 0

Header, Footer, 2 Columns, Fluid ... content problem

Sorry, I always forget the doctype!

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="VI60_defaultClientScript" content="JavaScript">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="generator" content="© 1998 - 2005: Hand Coded By Natalya Faden">
<meta name="author" content="natalya faden">
<meta name="copyright" content="Copyright © 1998-2005 Natalya Faden, All Rights Reserved">
<meta name="owner" content="Natalya Faden.">
<meta name="revisit-after" content="30 Days">

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 10 weeks 13 hours ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Header, Footer, 2 Columns, Fluid ... content problem

Sorry to be a bit naff - I can;t actually help with the problem Tongue I just wanted to see if the dtd was there, forcing IE into standards mode.

Thanks! You've made my day Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

Kolyana
Offline
Regular
Last seen: 17 years 1 day ago
Timezone: GMT-8
Joined: 2005-07-06
Posts: 19
Points: 0

Header, Footer, 2 Columns, Fluid ... content problem

hehehehe, I see you're the "doc type nazi" so that's okay ... it's your job to police that sort of thing Tongue

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 17 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Header, Footer, 2 Columns, Fluid ... content problem

The first major problem is that you're using frames. Why? Use server side includes to template the header, images, etc..

The problem you wrote about is that when you clear to bring the second row of images down, it clears the left nav column, #leftinnercontent(?).

If you don't want to give the form a fixed width that would force a new row, leave the images and form controls inline and use a <br> to force the new line.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Kolyana
Offline
Regular
Last seen: 17 years 1 day ago
Timezone: GMT-8
Joined: 2005-07-06
Posts: 19
Points: 0

Header, Footer, 2 Columns, Fluid ... content problem

Gary, I'm not actually using frames - that's just my free hosting location and only where I've posted an example, not actually the working code.

The 'problem' with your solution, while valid, is that this issue occurs on three pages and all when a containing div has the autoclear CSS applied to it, and this div happens to contain floated elements.

The above example - with the images - is but one instance; another is a div with two div within it that are floated, when the autoclear style is applied to this container it then floats down the content column and beneath whatever is in the left 'nav' column.

The only way I can stop this behavior is to omit the autoclear style or remove it's "display:block" property (both of which cause display problems, obviously) or use a table for the left/right columns rather than the divs.

I have to assume that the posted CSS for two columns is flawed when combined with the autoclear css.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 18 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Header, Footer, 2 Columns, Fluid ... content problem

I wouldn't assume that. The CSS is working per spec. The items should clear all previous floats. To make it work, you could either float the main column as well, or add overflow: hidden to #contentColumn.

Why have you posted the link with the frames? Why not just use the comcast link? We're only asking for a direct link to better help you. We can't see the page source or CSS through the frames (actually we can with some work).

You have a mild case of divitis. You're over doing things. You don't need so many divs...

Kolyana
Offline
Regular
Last seen: 17 years 1 day ago
Timezone: GMT-8
Joined: 2005-07-06
Posts: 19
Points: 0

Header, Footer, 2 Columns, Fluid ... content problem

Sorry about the link ... it wasn't intended and I didn't realize that there was an option ... I thought the frame was non-negotiable, as it were Tongue

As for the divs .... yes, yes, perhaps i do. I'm a big fan of continually trying to improve and clean my structure, html and css and often take a few days out to scrub things up a little: I'd love to know a few suggestions if you have any?

Regarding the content area overflow: Bearing in mind that this isn't my CSS, I changed the overflow to :hidden and the entire content area expanded across the left column which was not the expected result.

I can see why you'd suggest this, but I'm not sure why it didn't work.