Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

0

Equal Div heights

Started by _*Creative Insanity_*, Jun 10 2007 06:37 PM

You cannot reply to this topic
Go to first unread post

5 replies to this topic

#1 _Creative Insanity_

Guests

Posted 10 June 2007 - 06:37 PM

I am sitting here trying things and scratching the old noodle and nothing is working.

I am trying to set to divs the same height depending what is in the right div.
The image attached is what I have to date and it looks horrid, as I don't like the links dropping below the image div.
Posted Image

This is the image div:

.panel_image{
	background-color:#eee;
	padding:5px;
	text-align:center;
	width:80px;
	float:left;
	border-right:#fff 2px solid;
	height:100%;
}

and this is the link div:

.panel_body{
		background-color:#eee;
		margin:auto;
		height:100%;
}

These are all within the content div and I tried setting the height to that to 100% as well and it done nothing.
What I am after is for the left image div to grow depending on the content in the right div.
I could save all the headaches and use a table, but that would be giving up ah.. no like giving up.

ta muchly

Back to top

#2 albinoAZN

Albinos Are Extinct!!!

Members
1,139 posts

Gender:Male
Location:Mississippi, USA

Posted 10 June 2007 - 08:05 PM

try putting float:right; in .panel_body

and then, if needed, put a <div style="clear:both"></div> underneath the two divs.

Back to top

#3 _Creative Insanity_

Guests

Posted 10 June 2007 - 08:46 PM

Ta but tried that and it never work. I have seen a tut on it somewhere but do you think I can find it now.. naa not on your nelly hehe.

Back to top

#4 albinoAZN

Albinos Are Extinct!!!

Members
1,139 posts

Gender:Male
Location:Mississippi, USA

Posted 10 June 2007 - 08:54 PM

well, you might as well take off the height:100%; that doesn't do anything yet...

I'll take a look into your problem..
------------------------------

I got it to work with this

<!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">
#box{
width:181px;}
.panel_img{
background:#FFF;
width:80px;
text-align:center;
border-right: 1px solid #FFF;
float:left;}
.panel_text{
background:#eee;
width:100px;
text-align:left;
float:right;}
</style>
</head>

<body>
<div id="box">
<div class="panel_img">
<img src="file:///HDD/Users/jake/Pictures/misc/test.gif" width="75" height="75" /></div>
<div class="panel_text">
link<br />
link<br />
link<br />
link<br />
link<br />
link<br />
link<br />
link<br />
link
</div>
<div style="clear:both"></div>
</div>
</body>
</html>

hope that helps

Edited by albinoAZN, 10 June 2007 - 09:04 PM.

Back to top

#5 _Creative Insanity_

Guests

Posted 11 June 2007 - 03:39 AM

Ok thanks for the help I will try that

Back to top

#6 _Creative Insanity_

Guests

Posted 11 June 2007 - 03:11 PM

Well I tried it and couldn't get it to work so I closed my eyes and used a table for now because I needed to get the site up.
But in IE there is a weird display factor on one of the pages. I never noticed because I use a mac, but a friend told me about it. The top one is doing something really weird. I does not matter what one is at the top either.
Happens on anyone that is at the top.

Anyone know why this would be happening to the first table? I have tried everything just about but nothing fixes the problem.

Ta muchly

I have solved this one thanks.

Edited by Creative Insanity, 11 June 2007 - 10:38 PM.