2 replies [Last post]
bemania
bemania's picture
Offline
newbie
Switzerland
Last seen: 10 years 23 weeks ago
Switzerland
Timezone: GMT+2
Joined: 2009-06-03
Posts: 7
Points: 0

i'm trying to make a 2 column layout and at the same time the 2 columns should be 100% display height each.

as soon as i add position: relative; float: left; to the div:colleft and colright, the height of the cols isn't 100% display height anymore.

can anybody help me out?

<!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">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <style type="text/css">
	html,body {
		margin:0;
		padding:0;
		height:100%;
		background:black;
		color:#666;
        }
        #container {
		position:relative;
		margin:0 auto;
		width:700px;
		background:#f0f0f0;
		min-height:100%;
	}
        #colleft {
                height: 100%;
		width: 300px;
                background:#00FF00;
		position: relative;
		float:left;
        }
	#colright {
		height: 100%;
		width: 300px;
                background: #FF0000;
		position: relative;
		float:left;
		}
    </style>
</head>
 
<body>
	<div id="container">
		<div id="colleft">
        	      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </div>
                <div id="colright">
        	      Cras dapibus blandit egestas.
                </div>
	</div>
</body>
</html>

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 9 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

research Faux Columns

research Faux Columns

hizuka007
hizuka007's picture
Offline
Regular
Last seen: 8 years 8 weeks ago
Timezone: GMT-7
Joined: 2008-06-09
Posts: 22
Points: 0

for me, there two ways to do

for me, there two ways to do that:
-using javascript
-using pure css

*using pure css:

ok first, define a wrap of the two columns. example:
#whole-column-wrap{
width: 800px;
}
then define a background-color or image in that wraper that looks like it is a two column div.
#whole-column-wrap{
width: 800px;
background: url(images/bg.jpg) repeat-y;
}

NOTE: go to photoshop and create new then set it as 800px width.. then at the left side color it GREEN with a width of 300px and the rest color it RED. then crop it with a width of 800px and a height of 1px. then save it as bg.jpg

and see what I mean.

TAKE NOTE: the GREEN color represents your left column and the RED one represents you right column.

*using javascript:
copy and paste this code and save it as js.js

window.onload = init;
 
function init(){
  var leftcol_height = getElementById("LeftCol").offsetHeight;
  var rightcol_height = getElementById("RightCol").offsetHeight; 
  if(leftcol_height > rightcol_height)
      rightcol_height.style.height=leftcol_height.offsetHeight + "px";
  else
      leftcol_height.style.height=rightcol_height.offsetHeight + "px";
}

NOTE: You can change "LeftCol" and "RightCol" to the ID of your left and right colum.

then in your html file before the tag put this

Smiles open closed doors