Results 1 to 9 of 9

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

  1. #1
    Join Date
    Feb 2015
    Location
    Dallas, TX
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Can't Get 3-Column Liquid Layout to Work

    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.

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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.
    DD Admin

  3. #3
    Join Date
    Feb 2015
    Location
    Dallas, TX
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Will do, ddadmin. Much apprecited.

  4. #4
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    262
    Thanks
    42
    Thanked 24 Times in 24 Posts

    Default

    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.

  5. #5
    Join Date
    Feb 2015
    Location
    Dallas, TX
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by auntnini View Post
    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.

  6. #6
    Join Date
    Feb 2015
    Location
    Dallas, TX
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  7. #7
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    2,259
    Thanks
    96
    Thanked 104 Times in 102 Posts

    Default

    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.
    To choose the lesser of two evils is still to choose evil. My personal site

  8. #8
    Join Date
    Feb 2015
    Location
    Dallas, TX
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  9. #9
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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.
    DD Admin

Similar Threads

  1. Replies: 14
    Last Post: 11-04-2012, 07:51 PM
  2. CSS Liquid Layout - (Fixed-Fluid) Auto Height of left column
    By Rajan Thought in forum Submit a DHTML or CSS code
    Replies: 1
    Last Post: 01-23-2012, 05:27 PM
  3. Replies: 2
    Last Post: 06-17-2010, 06:01 PM
  4. 2 Column Liquid Layout IE FF issue
    By kevin_dalby in forum CSS
    Replies: 2
    Last Post: 05-04-2008, 10:50 AM
  5. Adding a column to 3-column fixed layout
    By slobjones in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 10-21-2007, 03:51 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •