Coding two column layout without floats?

xxangel
avatar
rank Regular

Regular


Posts: 43
Joined: 2006-03-14

Posted: Wed, 2008-07-23 13:24

Is there a way to code a two column layout without using floats? For some reason, with my server, floats sometimes load and it sometimes do not. When it doesn't load, the layout looks messed up.

The basic problem is that the left column is not loading the "float: left;" which forces the right column to go under the left column.

Is there a way to fix this problem through stylesheets (if the floats do not load)? Just like a backup method.

David Laakso
David Laakso's picture
rank Enthusiast

Enthusiast


Posts: 248
Joined: 2008-07-18
Location: US

Let's see what you got. Put

Posted: Wed, 2008-07-23 13:33

Let's see what you got. Put it on your server and provide a clickable link to it in your post.

xxangel
xxangel's picture
rank Regular

Regular


Posts: 43
Joined: 2006-03-14

I'm sorry, but I'm away from

Posted: Wed, 2008-07-23 13:56

I'm sorry, but I'm away from my personal computer right now, so I can't upload. However, here's the coding:

style.css

body {
	text-align: center;
	background-color: #164F59;
	font-family: arial, geneva, helvetica;
	color: #474747;
}

#container {
	width: 795px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	margin-top: 0px;
	background-color: white;
	position: relative;
}

#containerinner {
	padding: 15px;
}


#leftcolumn {
	width: 160px;
	float: left;
	font-size: 11px;
	font-weight: bold;
	line-height: 20px;
	text-align: left;
}

	#sidenav {
		color: white;
		background-color: #93917F;
		margin-top: 8px;
		padding-bottom: 4px;
	}
	
	#sidenav h2 {
		background-color: #613923;
		color: #BFB77E;
		padding-left: 15px;
		margin: 0px;
		padding-top: 8px;
		padding-bottom: 8px;
		line-height: 100%;
	}
	
	#sidenav ul {
		padding: 0px;
		margin: 0px;
	}
	
	#sidenav li {
				margin: 0px;
				padding: 0px;
				list-style-type: none;
				padding-top: 4px;
				padding-bottom: 4px;
				line-height: 130%;
				padding-left: 15px;
			}
	
	
	#sidenav li.sidenavon {
		background-color: white;
		color: #9E4322;
	}	
	
	#sidenav li.sidenavon a {
		color: #9E4322;
	}
	
	#sidenav a {
		color: white;
		text-decoration: none;
	}
	
	#sidenav a:hover {
		text-decoration: none;
		color: #CCC98B;
	}
	
	#sidefeaturestory {
		margin-top: 5px;
		background-color: #7A7A7A;
		width: 160px;
		color: white;
		font-size: 11px;
		line-height: 125%;
		text-align: left;
		font-weight: normal;
	}
	
	#sidefeaturestoryinner {
		padding: 8px;
	}
	
	#sidefeaturestoryinner h2 {
		font-weight: bold;
		font-size: 12px;	
	}
	
	#sidefeaturestoryinner a {
		color: white;	
	}
	
#maincolumn {
	width: 588px;
	float: right;
	margin-right: 1px;
	}

#maincolumn a {
	text-decoration: underline;
}

#maincolumn a:hover {
	text-decoration: none;
}


#maincolumn h2{
	font-size: 18px;
}

#maincolumn p{
	font-size: 12px;
	line-height: 14px;
}

#print {
	padding-left: 16px;
	padding-right: 15px;
	text-align: right;
	padding-bottom: 0px;
	margin-bottom: 0px;
}

#maincolumnsolo {
	background-color: #EFEFEF;
	border-left: 1px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
	border-top: 8px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	padding-top: 10px;
	margin-top: 5px;
}


.maincolumnsoloinner1, .maincolumnsoloinner2 {
	margin-left: 30px;
	margin-right: 15px;
	padding-bottom: 20px;
	margin-bottom: 5px;
	margin-top: 0px;
	padding-top: 0px;
}

#maincolumnsolo h2 {
	font-size: 20px;
	font-weight: bold;
	line-height: 22px;
	padding-top: 0px;
	margin-top: 0px;
}

#maincolumnsoloh2 {
	font-size: 20px;
    width: 455px;
	padding-top: 0px;
	margin-top: 0px;
}

#maincolumnsolo h5 {
	font-size: 16px;
	font-weight: bold;
	line-height: 22px;
	padding-top: 0px;
	margin-top: 0px;
}

#maincolumnsoloh5 {
	font-size: 16px;
    width: 455px;
	padding-top: 0px;
	margin-top: 0px;
}


#maincolumnsolo p {
	font-size: 14px;
	line-height: 16px;
}

#maincolumnsolo a {
	color: #9E4322;
}

#maincolumnsolo li {
    font-size: 14px;
    line-height: 16px;
}

#footer {
	margin-top: 10px; 
	border-top: 1px solid #CCCCCC; 
	padding-top: 8px;
	padding-bottom: 20px;
	font-size: 10px;
	color: #999999;
}

#footercopyright {
	width: 450px;
	float: left;
	font-size: 10px;
}

#footerlinks {
	width: 300px;
	text-align: right;
	float: right;
	font-size: 10px;
}
	#footerlinks a {
		color: #999999;
		text-decoration: none;
	}
	
		#footerlinks a:hover {
		color: #999999;
		text-decoration: underline;
	}

index.html 

<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>

				
<div id="container">
	<div id="containerinner">
		<div id="leftcolumn">
			<div id="sidenav">
			<h2><a href="#"><img src="/images/work.gif" width="124" height="12" border="0"></a></h2>
			<ul>
				<li><a href="#">Test</a></li>
				<li><a href="#">Test</a></li>
				<li><a href="#">Test</a></li>
				<li><a href="#">Test</a></li>
				<li><a href="#">Test</a></li>
				<li><a href="#">Test</a></li>
				<li><a href="#">Test</a></li>
				<li><a href="#">Test</a></li>																		
			</ul>
			</div>
	  		<div id="sidefeaturestory">
				<div id="sidefeaturestoryinner">
					<img src="/images/story.gif">
					<h2>Test</h2>
					<p>Test even more</p>
					</div>
					<a href="/donate"><img src="/images/support.gif" width="160" height="23" border="0" style="background-color: white;"></a>
	 		</div>
		</div>
				
		<div id="maincolumn">
			<div id="maincolumnsolo">
			<div id="print"><a href="?print=true"  target="_blank"><img src="/images/print.gif" alt="print" border="0"></a></div>  
				<div class="maincolumnsoloinner1">
					<div id="maincolumnsoloh2">

      					<h2>Projects</h2>
    				</div>
					<p>Text goes here</p>
   				</div>
			</div>
		</div>
<br clear="all">
		
<div id="footer">
	<div id="footercopyright">Copyright area</div>
	<div id="footerlinks">Links area</div>
</div>
<br clear="all">
	</div>
</div>
</body>
</html>

Thanks!

The code is a bit bloated right now, because I'm adding more styling in later.

David Laakso
David Laakso's picture
rank Enthusiast

Enthusiast


Posts: 248
Joined: 2008-07-18
Location: US

The above shows no doctype.

Posted: Wed, 2008-07-23 15:00

The above shows no doctype. Is there a doctype and character encoding on the file that is on your server?

Anyway, validating to a doctype shows 30 markup errors. Additionaly, you have a clearing element several places in the markup with no css for it in the CSS file. BTW, there is no such thing as clear "all," please see: 9.5.2 --
http://www.w3.org/TR/CSS21/visuren.html#flow-control

xxangel
xxangel's picture
rank Regular

Regular


Posts: 43
Joined: 2006-03-14

There is a doctype and

Posted: Wed, 2008-07-23 15:38

There is a doctype and character encoding on the server.

What do you mean by clearing element? br clear="all"?

Also, I've done the

<div style="clear: all;"></div>

to replace the breaks, but even so, without a left float, the right column gets pushed down. My question is if there's a method, considering that everything is validated and going all right, that the right column can still remain in the correct position even if the left column's "float: left" does not load?

David Laakso
David Laakso's picture
rank Enthusiast

Enthusiast


Posts: 248
Joined: 2008-07-18
Location: US

Your page on my server

Posted: Wed, 2008-07-23 22:30

Your page on my server [1] (minus your images, since I do not know the path) shows no issues other than being invalid. The left column loads fine. Checked in XP IE/6 & IE/7; and, in Mac FF/3.01, and latest Mac versions of Camino, Safari, and Opera.

I have no idea what the problem is on your end, other than an unlikely off-the-wall possibility the images are wider than their containers (and causing the float to drop) or that one or more of them is corrupt.

[1] http://www.chelseacreekstudio.com/ca/cssd/e.html

With regard to your question about this inline and invalid bit of trivia:

 <div style="clear: all;"></div>

see the link to the CSS specs in my previous reply.

xxangel
xxangel's picture
rank Regular

Regular


Posts: 43
Joined: 2006-03-14

My mistake! I had used

Posted: Thu, 2008-07-24 13:33

My mistake! I had used clear: both; in the actual copy.

Actually, I don't really know what the exact problem is. The layout loads perfectly for me, but I have been receiving a few complaints that it isn't loading properly for other people. I thought it may be because the floats do not load completely, which would force the content to be skewed. I was just wondering if there was a way to code such a layout without using floats.