Can't Get 3-Column Liquid Layout to Work

**Landslyde** · 02-17-2015, 08:21 PM

Been fighting this for 2 days. I got the layout code online, made a few changes to the column widths and am trying to get my stuff to display. Left and Middle columns work fine, but the right column drops all the way down between the Middle and Left columns (and an unused Right column) and the Footer. There's plenty of room for the right column info, but it won't go there. Will someone please view my code and tell me what in the world I'm doing wrong?

Here is the php page (less the working php) where my form is:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<title>My Web Site Login</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="generator" content="Bluefish 2.2.6" >
<meta name="author" content="Floyd" >
<meta name="date" content="2015-02-17T13:59:52-0600" >
<meta name="copyright" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="expires" content="0">
<link href="style/ws2.css" rel="stylesheet">
<!--[if lt IE 9]>
<script scr="html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>

.subform {
	font-size: 1em;
	color: #000;
	font-family: Tahoma, Geneva, sans-serif;
	background: #2F4F4F;
	border-bottom: 1px solid #000;
	#border-left: 1px solid #000;
	border-top: none;
}

.topspace {
	margin-top: 60px;
}

.subform .label {
	text-transform: uppercase;
	display: inline;
	width: 180px;
	vertical-align: top;
	text-align: right;
	margin-right: 10px;
	font-weight: bold;
	color: #000;
}

.subform input[type="submit"] {
	margin-left: 46%;
	padding: 10px 25px;
	font-size: 1em;
	color: #000;
	background: rgb(0,102,153);
	background: -webkit-linear-gradient(rgba(0,0,0,.1) 40%, 
		rgba(255,255,255,.5));
	background: -moz-linear-gradient(rgba(0,0,0,.1) 40%, 
		rgba(255,255,255,.5));
	background: -o-linear-gradient(rgba(0,0,0,.1) 40%, 
		rgba(255,255,255,.5));
	background: linear-gradient(rgba(0,0,0,.1) 40%, 
		rgba(0,0,0,.5));
	border: 1px solid #000;
	border-radius: 20px;
	box-shadow: 0 0 4px white;
}

.subform input[type="submit"]:hover {
	background-color: #FFF5EE;
}

.subform select {
	font-size: 1.2em;
}

.subform input[type="text"] {
	border-radius: 5px;
	border: 1px solid #000;
	background-color: rgba(255,255,255,.7);
	color: #000;
	font-size: 1em;
	box-shadow: inset 0 0 10px rgba(0,0,0,.75);
	width: 300px;
	padding: 5px;
}

.txtarea {
	font-size: 1.3em;
	border-radius: 5px;
	border: none;
	background-color: rgba(255,255,255,.7);
	color: #000;
	box-shadow: inset 0 0 10px rgba(0,0,0,.75);
	width: 300px;
	padding: 5px;
}
</style>
</head>
<body>
<div id="container">
	<div id="header">
		<h1>My Web Site</h1>
	</div>
	<div id="navigation">
		<ul>
  			<li><a href="index.html"><span>Home</span></a></li>
  			<li><a href="about.html"><span>About Us</span></a></li>
  			<li><a href="services.html"><span>Services</span></a></li>
  			<li><a href="register.php"><span>Register</span></a></li>
  			<li><a href="client.php" class="active"><span>Client Area</span></a></li>
  			<li><a href="contact.php"><span>Contact Us</span></a></li>
		</ul>
	</div>
	<h2 id="h2">Add New Attendee</h2>
	<!--div id="content-container"-->
		<form method="post" class="subform" action="<?php echo htmlentities($_SERVER['PHP_SELF']);?>">
		<div id="left">
			<p>
				<label for="fname" class="label">first name:</label><br>
				<input type="text" name="fname" placeholder="First Name" value="<?php if (isset($_POST['fname'])) { echo $fname; } ?>">
					<span class="error"> <?php echo $fnameErr;?></span>
			</p><br>
			<p>
				<label for="lname" class="label">last name:</label><br>
				<input type="text" name="lname" placeholder="Last Name" value="<?php if (isset($_POST['lname'])) { echo $lname; } ?>">
					<span class="error"><?php echo $lnameErr;?></span>
			</p><br>
			<p>
				<label for="add1" class="label">address 1:</label><br>
				<input type="text" name="add1" placeholder="Address 1" value="<?php if (isset($_POST['add1'])) { echo $add1; } ?>">
					<span class="error"> <?php echo $add1Err;?></span>
			</p><br>
			<p>
				<label for="add2" class="label">address 2:</label><br>
				<input type="text" name="add2" placeholder="Address 2" value="<?php if (isset($_POST['add2'])) { echo $add2; } ?>">
					<span class="error"><?php echo $add2Err;?></span>
			</p><br>
			<p>
				<label for="city" class="label">city:</label><br>
				<input type="text" name="city" placeholder="City" value="<?php if (isset($_POST['city'])) { echo $city; } ?>">
					<span class="error"> <?php echo $cityErr;?></span>
			</p><br>
		</div>
			<div id="middle">
				
				<p>
					<label for="state" class="label">state:</label><br>
					<input type="text" name="state" placeholder="State" value="<?php if (isset($_POST['state'])) { echo $state; } ?>">
						<span class="error"><?php echo $stateErr;?></span>
				</p><br>
				<p>
					<label for="zip" class="label">zipcode:</label><br>
					<input type="text" name="zip" placeholder="Zipcode" value="<?php if (isset($_POST['zip'])) { echo $zip; } ?>">
						<span class="error"> <?php echo $zipErr;?></span>
				</p><br>
				<p>
					<label for="phone" class="label">phone number:</label>
					<input type="text" name="phone" placeholder="000-000-0000" value="<?php if (isset($_POST['phone'])) { echo $phone; } ?>">
						<span class="error"><?php echo $phoneErr;?></span>
				</p><br>
				<p>
						<label for="dojid" class="label">doj id:</label><br>
						<input type="text" name="dojid" placeholder="000000000" value="<?php if (isset($_POST['dojid'])) { echo $dojid; } ?>">
							<span class="error"> <?php echo $dojidErr;?></span>
					</p><br>
					<p>
						<label for="po" class="label">parole officer:</label><br>
						<input type="text" name="po" placeholder="Parole Officer" value="<?php if (isset($_POST['po'])) { echo $po; } ?>">
							<span class="error"><?php echo $poErr;?></span>
					</p><br>
			</div>
				<div id="right">
					
					<p>
						<label for="cr" class="label">Restrictions:</label><br>
						<input type="radio" name="cr" value="Yes" checked><strong>Yes</strong>
						<input type="radio" name="cr" value="No"><strong>No</strong>
							<span class="error"> <?php echo $crErr;?></span>
					</p><br>
					<p>
						<label for="disdate" class="label">discharge date:</label><br>
						<input type="text" name="disdate" placeholder="YYYY-MM-DD" value="<?php if (isset($_POST['disdate'])) { echo $disdate; } ?>">
							<span class="error"><?php echo $disdateErr;?></span>
					</p><br>
					<p>
						<label for="details" class="label">case details:</label><br>
						<textarea class="txtarea" rows="10" cols="50" name="details" placeholder="Case Details" value="<?php if (isset($_POST['details'])) { echo $details; } ?>">
						</textarea>
							<span class="error"><?php echo $detailsErr;?></span>
					</p><br>
					<input type="submit" value="Submit"><br /><br>
				</div>
				</form>
				<!--/div-->
		<div id="footer">
			<p>Copyright © My Web Site, 2015</p>		
		</div>
</div>
</body>
</html>

And here is the style sheet for the 3-column liquid layout:

Code:

#container {
	width: 100%;
	margin: 10px auto;
	background-color: #fff;
	color: #333;
	border: 1px solid gray;
	line-height: 130%;
}

#header {
	padding: .5em;
	background-color: #ddd;
	border-bottom: 1px solid gray;
}

#header h1 {
	padding: 0;
	margin: 0;
}

#navigation {
	font-family: ambleregular;
	float: left;
	width: 100%;
	background-color: #000;
}

#navigation ul {
	margin: 0;
	padding-left: 55px;
}

#navigation ul li {
	list-style-type: none;
	display: inline;
}

#navigation li a {
	display: block;
	float: left;
	padding: 5px 10px;
	color: #fff;
	text-decoration: none;
	border-right: 1px solid #fff;
}

#navigation li a.active {
	display: block;
	float: left;
	padding: 5px 10px;
	color: #fff;
	background: #696969;
	text-decoration: none;
	border-right: 1px solid #fff;
}

#navigation li a:hover { 
	background: #2F4F4F; 
}

#navigation li a:active { 
	background: #C0C0C0; 
}

#left {
	float: left;
	width: 360px;
	margin: 0;
	padding: 2em;
	padding-bottom: 8em;
}

#middle {
	margin-left:500px;
	border-left: 1px solid gray;
	margin-right: 500px;
	border-right: 1px solid gray;
	padding: 2em;
	padding-bottom: 8em;
}

#right {
	float: right;
	width: 360px;
	margin: 0;
	padding: 2em;
	padding-bottom: 8em;
}

#footer {
	clear: both;
	background: black;
	text-align: right;
	padding: 10px;
	height: 1%;
}

#footer p {
	font-family: arial;
	color: white;
	font-size: .75em;
	padding: 2px;
}

.error {
	display: inline-block;
	color: red;
	font-size: .8em;
	font-weight: bold;
}

If you copy/paste this, you'll see that the right column refuses to be used. Please advise this old man on the err of his ways. Many thanks.

**ddadmin** · 02-17-2015, 09:38 PM

You might want to study the source of CSS Liquid Layout #3.1- (Fixed-Fluid-Fixed) to get a better understanding of how floats and negative margins work to create a liquid layout. Looking at your source, the only way to get the right column to appear horizontally inline with the other columns as far as my understanding goes is to move it to above the left column in the markup, since you're floating the former "right". But even then there are still kinks. Look at the URL I posted above for an example of a fool proof layout.

**Landslyde** · 02-17-2015, 09:41 PM

Will do, ddadmin. Much apprecited.

**auntnini** · 02-17-2015, 11:25 PM

An aside trick. Since float: ___ property partially takes element out of HTML flow, you have 3 divs: one float: left; and another float: right; then a third center div -- with its CSS style rule placed AFTER the floated ones in the CSS listing -- can have margin-right: auto; and margin-left: auto; to center it in remaining space. If there is not enough room, the centered div will drop down.

**Landslyde** · 02-18-2015, 03:09 AM

Originally Posted by auntnini

An aside trick. Since float: ___ property partially takes element out of HTML flow, you have 3 divs: one float: left; and another float: right; then a third center div -- with its CSS style rule placed AFTER the floated ones in the CSS listing -- can have margin-right: auto; and margin-left: auto; to center it in remaining space. If there is not enough room, the centered div will drop down.

With your suggestion, my problem is now solved. Thank you auntini.

**Landslyde** · 02-18-2015, 03:15 AM

I've never been in a forum where new users were treated like children like it is done here. I can't even reply to a user who helped me solve an issue without my words first being approved by a moderator. I hope your way of doing things doesn't catch on; how repulsive it wld be to have to go through this on every post in every forum.

**james438** · 02-18-2015, 06:26 AM

Our spam filters catch a great deal of spam, but occasionally we get false positives like yours. This does not happen very often and we try to approve such posts as soon as we see them. This may take as long as a couple of hours if no moderator is on at the moment, but please be patient with us.

**Landslyde** · 02-18-2015, 07:33 AM

I can't even edit my profile. Says I'm not allowed to access it. Nice filtering, guys.

**ddadmin** · 02-18-2015, 09:57 PM

Landslyde, the spam filters were put in place at a time when spamming was running amok on the forums. I've just revisited the settings and toned things down for new registrants.

Thread: Can't Get 3-Column Liquid Layout to Work

Thread Tools

Search Thread

Can't Get 3-Column Liquid Layout to Work

Similar Threads

Liquid CSS 3 column Header Layout - fixed, liquid, fixed

CSS Liquid Layout - (Fixed-Fluid) Auto Height of left column

5 column liquid header, can't make it work

2 Column Liquid Layout IE FF issue

Adding a column to 3-column fixed layout

Bookmarks

Bookmarks

Posting Permissions