4 replies [Last post]
Cham
Cham's picture
Offline
newbie
Last seen: 12 years 17 weeks ago
Timezone: GMT+1
Joined: 2010-01-22
Posts: 3
Points: 4

Hey everyone.

I have a problem with 3 colums of div tags that should be more like Tabels!

If i set a static height it works fine, however if i set height to auto or 100% it wont work, how can i get it to follow so all colums are exactly the same height?

html, body {
	background-color: #4f584a;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 10px;
	font-style: normal;
	font-weight: normal;
	margin-left:0px;
	margin-right:0px;
	margin-top:10px;
}
 
a:link {
	text-decoration:none;
	color:#5f7950;
}
 
a:visited {
	text-decoration:none;
	color:#5f7950;
}
 
a:active {
	text-decoration:none;
	color:#8d5227;
}
 
a:hover {
	color:#8d5227;
	text-decoration:none;
}
 
div#content {
	background-color:#4f584a;
	width: 996px;
	margin-left:auto;
	margin-right:auto;
}
 
div#content #TOP {
	background-image: url(images/pool_03.jpg);
	background-repeat: no-repeat;
	height: 177px;
	width: 993px;
	border: 1px solid #000;
}
 
div#content #TOP #MENUBAR {
	background-image:url(images/dot.jpg);
	position:relative;
	height: 25px;
	width: 993px;
	left: -1px;
	top: 140px;
	border: 1px solid #000;
	z-index:1;
	/* for IE */
  	filter:alpha(opacity=50);
	/* CSS3 standard */
  	opacity:0.5;
}
 
div.MENU {
	width: 990px;
	left: 10px;
	font-family: Arial Black, Gadget, sans-serif;
	font-size:18px;
	text-transform: uppercase;
}
 
a#MENU {
	padding:10px;
}
 
div#content #SPACE {
	height:10px;
	display:block;
}
 
div#content #LEFT {
	float:left;
	background-image: url(images/gradient.jpg);
	background-color: #4c5c44;
	background-repeat: repeat-x;
	padding: 10px;
	border: 1px solid #000;
	width:180px;
}
 
div#content #LEFT #SPONSOR {
	background-image:url(images/pool_07.jpg);
	height:88px;
	width:175px;
	border:1px;
	border-bottom-color:#000;
	border-style:solid;
}
 
div#content #LEFT #SPONSOR #SPONSOR_BOX {
	position:relative;
	background-image:url(images/dot.jpg);
	border-style:solid;
	border-color:#000000;
	border-width:1px;
	top: 60px;
	width:175px;
	left: -1px;
	height: 20px;
	z-index:1;
	/* for IE */
  	filter:alpha(opacity=50);
	/* CSS3 standard */
  	opacity:0.5;
}
 
div#content #LEFT #SPONSOR #SPONSOR_HEADLINE {
	font-family:"Arial Black", Gadget, sans-serif;
	color: #b2bfaa;
	font-size: 14px;
	text-transform: uppercase;
	text-align: center;
	position:relative;
	left: -1px;
	top: 40px;
	z-index:2;
}
 
img#SPONSOR_LINK {
	border-color:#000000;
	border-style:solid;
	border-width:1px;
}
 
div#content #LEFT #LINKS {
	background-image:url(images/links.jpg);
	height:88px;
	width:175px;
	border:1px;
	border-bottom-color:#000;
	border-style:solid;
}
 
div#content #LEFT #LINKS #LINKS_BOX {
	float:left;
	background-image:url(images/dot.jpg);
	border-style:solid;
	border-color:#000000;
	border-width:1px;
	position:relative;
	width:175px;
	top:62px;
	left: -1px;
	height: 20px;
	z-index:1;
	/* for IE */
  	filter:alpha(opacity=50);
	/* CSS3 standard */
  	opacity:0.5;
}
 
div#content #LEFT #LINKS #LINKS_HEADLINE {
	position:relative;
	float:left;
	font-family:"Arial Black", Gadget, sans-serif;
	color: #b2bfaa;
	font-size: 14px;
	text-transform: uppercase;
	text-align: center;
	left: -1px;
	width: 175px;
	top: 41px;
	z-index:2;
}
 
div#content #MIDDLE {
	float:left;
	background-image: url(images/gradient.jpg);
	background-color: #4c5c44;
	background-repeat: repeat-x;
	width: 495px;
	margin-right: 10px;
	margin-left: 10px;
	padding: 10px;
	border: 1px solid #000;
}
 
div#content #RIGHT {
	float:left;
	background-image: url(images/gradient.jpg);
	background-color: #4c5c44;
	background-repeat: repeat-x;
	padding: 10px;
	border: 1px solid #000;
	width:234px;
}
 
div#content #RIGHT #RANK {
	background-image:url(images/pool_10.jpg);
	height:154px;
	width:232px;
	border:1px;
	border-bottom-color:#000;
	border-style:solid;
}
 
div#content #RIGHT #RANK #RANK_BOX {
	position:relative;
	background-image:url(images/dot.jpg);
	border-style:solid;
	border-color:#000000;
	border-width:1px;
	top: 125px;
	left: -1px;
	width:232px;
	height: 20px;
	z-index:1;
	/* for IE */
  	filter:alpha(opacity=50);
	/* CSS3 standard */
  	opacity:0.5;
}
 
div#content #RIGHT #RANK #RANK_HEADLINE {
	font-family:"Arial Black", Gadget, sans-serif;
	color: #b2bfaa;
	font-size: 14px;
	text-transform: uppercase;
	text-align: center;
	position:relative;
	top: 104px;
	left: -1px;
	z-index:2;
}
div#RIGHT #TEST {
	position:relative;
	background-image:url(images/dot.jpg);
	border-style:solid;
	border-color:#000000;
	border-width:1px;
	top: 1px;
	width:232px;
	height: 100px;
	z-index:3;
	/* for IE */
  	filter:alpha(opacity=50);
	/* CSS3 standard */
  	opacity:0.5;
	display:inline-table;
	table-layout:auto;
}
 
#OVERSKRIFT {
	font-family: "Arial Black", Gadget, sans-serif;
	font-size: 30px;
	font-weight: bold;
	text-transform: uppercase;
	color: #4c5c44;
	position:relative;
	z-index:3;
	left: 5px;
}
 
#DATO {
	font-size: 10px;
	text-transform: uppercase;
	color: #000000;
	position:relative;
	top: -7px;
	left: 5px;
	border-top-style:solid;
	border-top-color:#181d16;
	border-top-width:1px;
	width:350px;
	z-index:2;
}
 
#OVERSKRIFT_KASSE {
	position:absolute;
	background-image:url(images/dot.jpg);
	border-style:solid;
	border-color:#000000;
	border-width:1px;
	width:494px;
	height: 50px;
	z-index:1;
	/* for IE */
  	filter:alpha(opacity=50);
	/* CSS3 standard */
  	opacity:0.5;
}
 
div#BUND {
	float:left;
	text-align:center;
	font-size:12px;
	font-weight:bold;
	background-color: #4c5c44;
	top: 520px;
	padding: 10px;
	margin-top:10px;
	margin-bottom:30px;
	border: 1px solid #000;
	width:973px;
}

<body>
<div id="content">
  <div id="TOP">
    <div class="MENU" id="MENUBAR">
      <a href="index.php?site=nyheder" id="MENU">Nyheder</a>
      <a href="index.php?site=medlemmer" id="MENU">Medlemmer</a>
      <a href="index.php?site=rangliste" id="MENU">Rangliste</a>
    </div>
  </div>
  <div id="SPACE">
  </div>
  <div id="LEFT">
    <div id="SPONSOR">
      <div id="SPONSOR_BOX">
      </div>
      <div id="SPONSOR_HEADLINE">
        Sponsors
      </div>
    </div>
    <br />
    <a href="http://link.dk" target="_blank" _fcksavedurl="http://link.dk">
    <img id="SPONSOR_LINK" src="http://link.dk/images/nyebannere3.jpg" _fcksavedurl="http://link.dk/images/nyebannere3.jpg" alt="" width="175" /></a>
    <br />
    <br />
    <div id="LINKS">
      <div id="LINKS_BOX">
      </div>
      <div id="LINKS_HEADLINE">
      Links
      </div>
      <p>&nbsp;</p>
    </div>
  </div>
  <div id="MIDDLE">
    <div ID="OVERSKRIFT_KASSE" >
    </div>
    <div ID="OVERSKRIFT">
      Klub Hjemmeside
    </div>
    <div id="DATO">
      Fredag den 22. Januar 2010 - af (NAME)
    </div>
    <p>TEST TEST TEST TEST TEST<br />
      TEST TEST TEST.</p>
    <p>TEST TEST TEST TEST TEST</p>
    <p>TEST TEST</p>
    <p>TEST TEST  </p>
  </div>
  <div id="RIGHT">
    <div id="RANK">
      <div id="RANK_BOX">
      </div>
      <div id="RANK_HEADLINE">
        top 3
      </div>
    </div>
    <div id="TEST"></div>
 
  </div>
  <div id="BUND">
    CONTACT INFO
  </div>
</div>
</body>
</html>

tmharsh
Offline
Regular
Owosso, MI
Last seen: 12 years 12 weeks ago
Owosso, MI
Timezone: GMT-5
Joined: 2009-06-22
Posts: 27
Points: 26

The issue with columns is

The issue with columns is that they grow according to what's in them. Without being able to actually see your design, the best suggestion I would have would be to check out this tutorial on faux columns.

Cham
Cham's picture
Offline
newbie
Last seen: 12 years 17 weeks ago
Timezone: GMT+1
Joined: 2010-01-22
Posts: 3
Points: 4

tnx

Tnx for the help, I've looked into it, but couldn't really find your suggested site helpful. I think I do not completely understand the suggested idea.

here is a link to the problem:
Homepage
You can see the columns is not the same length.

best regards
Cham

tmharsh
Offline
Regular
Owosso, MI
Last seen: 12 years 12 weeks ago
Owosso, MI
Timezone: GMT-5
Joined: 2009-06-22
Posts: 27
Points: 26

Basically, your columns will

Basically, your columns will be created by a background image that is tiled down a containing div that holds all three columns. This way, the tiled background will go all the way down based on the column with the most content. Which will then give the appearance that the other two columns are the same height. In reality, the columns are different heights, you just can't tell because they're invisible. You do have gradients within your columns, so you can just put those backgrounds in as you normally would. You also have the issue of having bottom borders to the columns, so you'll have to also address that some how. If you want a better explanation of this method I would suggest you get "Bulletproof Web Desgin" by Dan Cederholm.

Cham
Cham's picture
Offline
newbie
Last seen: 12 years 17 weeks ago
Timezone: GMT+1
Joined: 2010-01-22
Posts: 3
Points: 4

tnx

arrr ok, I know exactly what you mean, tnx for the help. But yes the borders are a problem in this case.