Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    Layout probs - liquid

    I have a liquid layout and now need to add some content divs to a one column. I have tried to split the columns into 2 the leftside and the rightside. The first div I have started on, is sitting underneath the main content box instead of two the side, I have checked the div endings and they seem fine.
    Can anyone say where I am going wrong?

    Link is: puddypaws.co.uk/test.html
    puddypaws.co.uk/test/css I have not provided a proper hyperlink as it is adopting another site until the server works.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="keywords" content="furniture project, recycled furniture, recycle furniture" />
    <meta name="description" content=" HomePage" />
    <title> Homepage</title>
    <link href="test.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="container">
    <div id="header">
    <div id="left_header"><h1><a href="index.html" title="Header"> Furniture Project<em title="Furniture Project"></em></a></h1>
    <h1 id="logo"><a href="www.leeoasis.org.uk" title=" Furniture Project"></a></h1>
    </div><!--left_header-->
    <div id="right_header">
    <p class="logtitle">Recycle and donate<br />unwanted furniture<br/><br /><span class="caps">Lewisham Area</span></p></div><!--right_header--></div><!--header--><div class="clear"></div><!--clear-->
    <div id="nav">
    <ul class="nav">
    <li><a href="index.html">Home</a></li>
    <li><a href="index.html">Drop-in</a></li>
    <li><a href="index.html">Furniture</a></li>
    <li><a href="news.html">News/Events</a></li>
    <li><a href="index.html">Appeals</a></li>
    
    <li id="last"><a href="contacts.html">Contact</a></li>
    </ul>
    </div><!--nav-->
    <div class="clear"></div><!--clear--><div id="main_textarea">
    <div class="textbox_outer">
    <div class="textbox_inner">
    <div class="leftside"><h2>Our Services</h2><p>We re-home donated furniture, household goods 
    and baby equipment free to families leaving hostels and disadvantaged people of all ages around Lewisham.</p></div>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo 
    ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis 
    parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, 
    pellentesque eu, pretium quis, sem. </p></div><div class="rightside"><h2></h2><p></p></div><!--textbox_inner-->
    </div><!--textbox_outer--></div><!--main_textarea--><div class="clear"></div><!--cleardiv-->
    <div id="footer"><p>Copyright &copy; 2010 </p>
    </div><!--footer--></div><!--container-->
    </body>
    </html>
    the css is:
    Code:
    html body #container {
    	height: 99.5%;
    	width: 75%;
    }
    html {
    	
    	margin: 0;
    	padding: 0;
    }
    body {
    	text-align: center;
    	font-size: 1em;
    	font-family: Helvicta, Arial, Sans Serif;
    	line-height: 1.5;
    	background: #fff;
    	text-align: center;/*Hack to fix IE6 to center*/
    }
    #container {
    	margin: 0 auto;
    	position: relative;
    	padding: 0 30px;
    	text-align: left; /*Hack to fix IE6 to center*/
    }
    
    img, img a {
    	border: 0px;
    }
    a:link {
    	color: #00CC00;
    	font-weight: bold;
    	text-decoration: none;
    }
    a:visited {
    	color: green;
    	font-weight: bold;
    	text-decoration: none;
    }
    a:hover, a:active {
    	color: navy;
    	font-weight: bold;
    	text-decoration: underline;
    }
    #nav {
    	float:left;
    	width: 100%;
    	height: 30px;
    	background-color: #666666;
    }
    #nav ul {
    margin: 0; padding: 0;
    	
    }
    #nav ul li {display: inline; list-style: none; }
    
    #nav ul li a{
    	display: block;
    	float: left;
    	text-align: center;
    	text-decoration: none;
    	margin: 0;
    	padding: 5px 10px;
    	border-right: 1px solid white;
    	font-size: 0.88em;
    	font-weight: bold;
    	color: white;	
    	text-transform: uppercase;
    }
    	
    #nav a:hover {text-decoration: underline;}
    	
    #nav ul li#last a{border-right: 0;}
    
    #header {
    	background: #fff;
    	margin:0; padding-top: 30px; padding-left: 30px;}
    #left_header {position: relative; float:left; width: 35%; padding-left: 50px;}
    
    #right_header {background-image: url('recycle_cm1.jpg'); background-repeat: no-repeat;
    		background-position: top right;
    		font-family: Arial, sans-serif, Verdana;
    		color: #666666;
    		width: 50%;
    		height: 110px;
    		margin-left: 45%;
    		padding: 0; 
    }
    #right_header p.logtitle {
    font-family: Arial, Verdana, sans-serif; 
    font-size: 90%; 
    font-weight:bold; 
    color: gray; 
    position: absolute; top: 30px; left: 63%; 
    padding: 0;
    margin: 0;
    }
    
    #left_header {position: relative; float:left; width: 231px; height: 86px; margin:0; padding: 0;}
    #left_header h1   {height: 86px; width: 231px; position: relative; font-size: .75em; margin: 0; padding: 0;}
    #left_header h1 {overflow: hidden;}
    
    #left_header h1 em {background-image: url('lee_oasis.jpg'); 
    background-repeat: no-repeat;                
    background-position: left center; 
    position: absolute; 
    left: 0; 
    top: 0; 
    display: block; 
    height: 86px; 
    width: 231px;}
    
    .caps {text-transform: uppercase; font-weight: bold; color:navy}
    
    h2 {color: #3B6B9C;}
    h3 {color: #3399CC;}
    
    #main_textarea {float:left; position: relative; margin: 0; padding: 0;}
    
    .clear {
    clear:both;
    font-size:0;
    line-height:0px;
    }
    
    .textbox_outer {
    	background: #33CC33; 
    	border: 1px solid #CCC;
    	margin: 0;
    	padding: 0;
    	
    }
    .textbox_inner {background: #fff;
    	margin: 30px;
    	padding: 5px;}
    
    .leftside {
    position: absolute;
    margin: 235px 0px 0px 0px;
    width: 199px;
    background: gray;
    }
    
    .rightside {
    	width: 65%;
    	height: auto;
    	float: right;
    }
    #footer 
    {
    padding: 5px;
    background:#9900CC;
    color: white;
    text-align: right;
    font-weight: bold;
    }
    Any pointers much appreciated. Very raw with liquid layouts
    Last edited by quartzy; 11-15-2010 at 12:57 AM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,694
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    Hello quartzy,
    You probably don't need ap to accomplish this. Try this instead -
    Code:
    .leftside {
    /*position: absolute;
    margin: 235px 0px 0px 0px;*/
    width: 199px;
    float: left;
    background: gray;
    }
    .rightside {
    	/*width: 65%;
    	height: auto;
    	float: right;*/
    margin: 0 0 0 199px;
    }
    Have a look at a basic two column layout that illustrates that method.

    And here's another two column with equal height columns.
    Last edited by Excavator; 11-15-2010 at 12:30 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    re

    hi
    What's ap ?
    I tried your way but it was worse than ever, think I am learning on the web now, though hoped someone could explain why it was not in the box.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,694
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    ap is Absolute Positioning. Sorry about that.

    The way you have it now, the .leftside is dropped out of it's containing .textbox_inner because of your ap. An ap positioned element is outside the normal flow of the document and can't expand it's container. Well, that and the 235px top margin you put on .leftside. Take that off and it moves up but still doesn't expand .textbox_inner.



    Your .leftside and .rightside can be laid out the same way you did your left and right header divs.

    Float the one and margin the other.
    That's the same method shown in that first link I gave you - http://nopeople.com/CSS/simple_2-column/index.html
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    quartzy (11-15-2010)

  • #5
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    Re

    I am getting in a right state, it has jumped out of the inner box and I dont know what to do. I now have this:

    Code:
    .textbox_inner {background: #fff;
    	margin: 1.88em;
    	padding: .31em;}
    
    .leftside {
    width: 200px;
    height: 400px;
    background: #9999CC;
    float: left;
    margin: 0; padding:0;
    }
    
    .rightside {
    	margin: 0 0 0 200px;
    	float: right;
    	padding: 0;
    }
    I just so tired I will have to leave it until tomorrow.

  • #6
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    I have now sorted it out, thanks so much.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,694
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    The online version does not look to be quite sorted yet.
    Your .rightside is closed too soon -
    Code:
    <div class="textbox_inner">
    <div class="leftside">
    <h2>Our Services</h2><p>We re-home donated furniture, household items and baby equipment free to families leaving hostels and disadvantaged people of all ages around Lewisham.</p>
    </div>
    <div class="rightside"> <!--this closing tag is too soon</div>--> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo 
    ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis 
    parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, 
    pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede 
    justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus 
    ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis 
    pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean 
    vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, 
    eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, 
    tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean 
    imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. 
    Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, 
    sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, 
    blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante 
    tincidunt tempus. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, 
    sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Curabitur 
    ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus 
    eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque 
    sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. 
    Maecenas nec odio et ante tincidunt tempus. Nam eget dui. Etiam rhoncus. 
    Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit 
    amet adipiscing sem neque sed ipsum.</p>
    <!--end .rightside belongs here--></div>
    </div><!--textbox_inner-->

    And some CSS to go along with that -
    Code:
    .textbox_inner {background: #fff;
    	margin: 1.88em;
    	padding: .31em;
    overflow: auto;/*to clear the floats*/
    }
    .leftside {
    /*position: absolute;  ...float OR ap, not both*/
    width: 21%;
    /*height: auto;*/
    background: #9999CC;
    float: left;
    margin: 0; 
    padding:0.40em;
    }
    .rightside {
    	/*width: 71%;*/
    	padding: 0.40em;
    	/*height: auto;
    	float: left;
    	position: relative;*/
    	margin-left: 27%;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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