No replies
hsaladar
Offline
newbie
Philippines
Last seen: 9 years 46 weeks ago
Philippines
Timezone: GMT+7
Joined: 2011-10-28
Posts: 1
Points: 2

Hi guys.

this is my first post.. Party
I am improving my css layout and i have encountered a certain problem with it..
I have a 3 column site all my side navs are in the left (.side1 and .side2) and the content is in the right (.content) wrapped with a container (.container).

What i want in my template is if my content overflows both side navs should follow the height of the content.

I used overflow:auto; in my container in order it will not cut my content area and the container will follow the height of the content and i used height:100% in my side navs but it didn't follow the height of my container. i also used height:auto; in side navs but id didn't work either.. Puzzled

Any ideas guys if you encountered the same problem? and any ideas how could i improve my css base in my prob.. thank you in advance!

here is a sample of my code.

HTML

<html>
<head>
<title>My CSS Layout Problem</title>
<link rel="stylesheet" type="text/css" href="css.css" />
</head>
 
<body>
<div class="container">
 
	<div  class="side1"> 
    <h1> Side bar 1 </h1>
<p>	sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample </p>
    </div>
 
  	<div class="side2">
    <h1> Side bar s </h1>
<p>  sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample </p>
    </div>
 
    <div class="content">
    <h1> CONTENT </h1>
    <p>  sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample  </p>
    <p>  sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample  </p>
    <p>  sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample  </p>
 
 
	</div>
</div>
 
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */
body {
	height:100%;
	}
.container{
	width:1000px;
	margin: 0 auto;
	background-color:#C00;
	border: 1px solid #000;
	min-height:500px;
	overflow:auto;
 
	}
 
.side1{
	width:25%;
	margin: 0 auto;
	background-color:#06F;
	float:left;
	height:100%;
	position: relative;
	overflow:auto;
	}
 
.side2{
	width:25%;
	margin: 0 auto;
	background-color:#0F3;
	float:left;
	height:100%;
 
	position: relative;
	}
 
.content{
	width:49%;
	margin: 0 auto;
	background-color:#969;
	float:left;
	height:100%;
	position: relative;
	overflow:auto;
 
 
	}