Hi ! Guys, I have searcj for a long time about flexible height and width website. But I did not fine any solution. It could be solved through JavaScript only to have flexible height and width. But I need pure css to make liquid design. in 2008 I have found pure css liquid design on css creator forum but it was also so complected to understand. From there, I got some idea but I have not tested any more forever.

My office friend “Grikshmi” got problem with liquid designs. She asked me to give solution for her issue. So, I tried to give solve for liquid web site sketch. Finally, I give her solution. Please follow below solution. I have tested on FF3 and IE7 only. I have not tested on another browser. Any way lets go see below.

CSS Code

body,html,.leftPanel,.rightPanel{
	height:100%;
	margin:0px;
	padding:0px;
	font-size:12px;
}

.leftPanel{
	width:30%;
	float:left;
	background:#CC9966;
}

.rightPanel{
	width:68%;
	float:right;
	background:#00CCFF;
}

.leftPanelInner,.rightPanelInner{
	padding:50px 0 0 0;
}

h1,h2,h3{
	margin:0px;
	padding:10px 0;
}
.footer{
	position:absolute;
	top:100%;
	left:0px;
	width:100%;
	height:25px;
	line-height:25px;
	display:block;
	margin:-25px 0 0 0;
	clear:both;
	overflow:hidden;
	background:red;
 }

.header{
	position:absolute;
	top:0%;
	left:0%;
	display:block;
	height:50px;
	background:#999966;
	width:100%;
	clear:both;
}

.rightTop{
	background:#009933;
	color:#fff;
}

HTM Code


  <div class="header"><h1>HEADER </h1></div>
  <div class="leftPanel">
  <div class="leftPanelInner">
  <h3>Navigation</h3>
  <ul>
  <li>home</li>
  <li>Our service</li>
  <li>contact</li>
  </ul>
  </div>
  </div>
  <div class="rightPanel">
  <div class="rightPanelInner">
  <div class="rightTop">
   Home > Uieiseli > KSjeusoe </div>
  <h2>Cras lacinia adipiscing ligula. 
Sed ut ante </h2> <p> . Pellentesque habitant morbi tristique senectus et netus etmalesuada fames ac turpis egestas.
Donec facilisis commodo enim. Proin bibendum,urna at dignissim venenatis, diam tortor consequat libero, varius sollicitudin quam lectus in velit. Pellentesque rhoncus sapien ac nisl. Etiam pellentesque enim sit amet sapien. Ut quam. Donec augue metus, tristique in, pellentesque id, molestie at, metus. Suspendisse blandit bibendum turpis. Nam mi arcu, gravida vitae, ullamcorperut, congue ac, quam. Ut facilisis lobortis neque.Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris facilisis malesuada metus. Suspendisse purus. Infelis lorem, aliquet in, condimentum vitae,porta eget, nisl. In vitae leo vel libero sollicitudin viverra. Nunc euismod faucibus erat. Cras ultrices mauris ac dui. Integer vel magna sed dolor tempus convallis. </p> </div> </div> <div class="footer"> Copyright &copy;2009. </div>

Important Task:

1) height:

body,html,.leftPanel,.rightPanel{
height:100%;
margin:0px;
padding:0px;
font-size:12px;
}
Note : For height 100%, we have to specify for body, html and related div

2) Footer

.footer{
position:absolute;
top:100%;
left:0px;
width:100%;
height:25px;
line-height:25px;
display:block;
margin:-25px 0 0 0;
clear:both;
overflow:hidden;
background:red;
}

Note : Here, whatever height of footer we have to give negative top margin for it. Here height of footer is 25px and top margin is -25px;

3) header

.header{
position:absolute;
top:0%;
left:0%;

display:block;
height:50px;
background:#999966;
width:100%;
clear:both;
}

Note : Just hang in top and set height

4) Panels

.leftPanelInner,.rightPanelInner{
padding:50px 0 0 0;
}

Note : What ever height is specified on header give sample padding on panels (flexible blocks). Here header have 50px height and padding top on left and right panel is 50px;

Advertisements