Resolved Layout probs - liquid

quartzy · 11-14-2010, 10:45 PM

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

Excavator · 11-14-2010, 11:26 PM

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.

quartzy · 11-14-2010, 11:32 PM

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.

Excavator · 11-15-2010, 01:17 AM

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

quartzy · 11-15-2010, 01:36 AM

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.

quartzy · 11-15-2010, 02:37 PM

I have now sorted it out, thanks so much.

Excavator · 11-15-2010, 02:50 PM

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%;
}