[SOLVED] DIV match size

[s1yman]

Does anyone know if there is a way for div tag to match the height of the one(s) besides it (e.g. when they are stretched by text) to make things look more tidy

 

Thanks.

[Dada78]

Assign a CSS Class to it. I.E. <div class="YOURCLASS"> </div> Then wrap those tags around what you what to be uniform with the other content.

 

Then in your css add this

 

YOURCLASS {

   height: 10px;

}

 

Or what every height you need whether in %, px, em etc. Just make sure you change YOURCLASS to what you what to call it, and you can add whatever other attributes you need to it as well.

[s1yman]

I tried wrapping the three I have on one line in another div

like;

<div class="main"><div class="one"></div><div class="two"></div><div class="three"></div></div>

 

but that didn't seem to help?

[akitchin]

are those DIVs set to 100% height?  while i'm not a CSS guru, that SHOULD, in principle, stretch them to the size of their container, which itself will be stretched by the biggest DIV within it.

[Dada78]

Can you post the snippet of code you are actually working with and the CSS for it?

 

 

[s1yman]

nice theory akitchin, but unfortunately is doesn't work 

 

Give me a second Dada, its within php, so I'll just get it and post

[s1yman]

Can you post the snippet of code you are actually working with and the CSS for it?

 

Ok, the html;

<div class="divmain">
<div class="div0"><p></p><input name="one" type="file" class="text" value="" /><p><br /></p></div>
<div class="div1"><p></p><input name="two" type="file" class="text" value="" /><p></p></div>
<div class="div2"><p></p><textarea rows="5" name="three" class="text"></textarea><p></p></div>
</div>
<div class="divmain">
<div class="div3"><p></p><textarea rows="5" name="four" class="text"></textarea><p></p></div>
<div class="div4"><p></p><input name="five" type="file" class="text" value="" /><p></p></div>
<div class="div4"><p></p><textarea rows="5" name="five" class="text"></textarea><p></p></div>
</div>

And the CSS;

.divmain
	{
	width:100%;
	position:relative;
	}

.div0
	{
	height:100%;
	width:33%;
	float:left;
	text-align:center;
	position:relative;
	border-style:solid;
	border:solid 1px #0066FF;
	margin:1px;
	overflow:hidden;
	clear:both;
	}

.div1
	{
	height:100%;
	width:33%;
	float:left;
	text-align:center;
	position:relative;
	border:solid 1px #0066FF;
	margin:1px;
	overflow:hidden;
	}

.div2
	{
	height:100%;
	width:33%;
	float:left;
	text-align:center;
	position:relative;
	border:solid 1px #0066FF;
	margin:1px;	
	overflow:hidden;	
	}

 

(3, 4, 5 are identical to 0, 1, 2)

 

It works somewhat better in IE than FF, but for example here div 2 is text area, so it is going to be bigger than div 0 & 1, however I want them to be the same size (without restricting them in the css) to make it look neater. . . Or even if you could suggest a way to make the file input to be bigger but maintain it's normal looking looks - lol

 

I appreciate the time you taking for me on this.

[Dada78]

Can you post a link so I can see what it is you are trying to do. What I can see is you have two divs that are the same (div1 & div 2) so remove one of them since they are the same. Also div3 and div4 what are those? Keep in mind you can use the same div multiple times to achieve the same look. That is the simplicity of CSS.

 

I.E.

 

<div class="divmain">
<div class="div0"><input name="one" type="file" class="text" value="" /></div>
<div class="div1"><input name="two" type="file" class="text" value="" /></div>
<div class="div1"><textarea rows="5" name="three" class="text"></textarea></div>
</div>

 

 

Also I am not sure what you are trying to do with the paragraph tags. Without seeing what you are trying to do, it looks just from seeing the code that they are being used out of context. What are you trying to do with those? I probably have a better solution for you.

 

 

[haku]

It's impossible to have two flexible-height divs be the same length. But, there are ways to fake it. You want to use the faux-columns technique. Google can hook you up. Look for the article on alistapart, it spells it out well.

[s1yman]

The p tags was just me trying to space it out a bit, so you can ignore them.

I need the div tags to be seperate for other reasons.

 

I uploaded a page where you can see how they are out of line. If you see it in FF as well then the submit button jumps up to the space below the 3rd div (top right)

 

http://project.computersmk.co.uk/test.html

[Dada78]

Is this what you are looking for?

 

http://www.mesquitechristmas.com/development/test.html

 

 

[s1yman]

no, what I was saying about the submit bar was that it does weird things in FF, like this;

 

 

but I want it to look more like this;

 

(this is just photoshop'd)

 

Do you understand what I mean about the divs being lined up now? Hope this gives a clearer understanding.

[Dada78]

That is easy enough...

 

http://www.mesquitechristmas.com/development/test.html

 

 

[s1yman]

kool - what have you done exactly?

[Dada78]

The code is also valid XHTML as well.

 

HTML....

 

<!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" xml:lang="en" lang="en">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Test Page</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
</head>
<body>
<form enctype="multipart/form-data" id="test" name="test" method="post" action="">
<div class="divTop">
<div class="TextArea">
<textarea rows="5" cols="" name="one" class="text">
</textarea></div>
<div class="TextArea">
<textarea rows="5" cols="" name="two" class="text">
</textarea></div>
<div class="TextArea">
<div class="File"><input name="three" type="file" class="text" value="" /></div>
</div>
</div>
<div class="divBottom">
<div class="TextArea">
<textarea rows="5" cols="" name="four" class="text">
</textarea></div>
<div class="TextArea">
<textarea rows="5" cols="" name="five" class="text">
</textarea></div>
<div class="div0">
<textarea rows="5" cols="" name="six" class="text">
</textarea></div>
<div class="Submit"><input name="name" type="text" value="" /><input type="submit" value="submit" /></div>
</div>
</form>
</body>
</html>

 

CSS....

 

/* CSS Document */

.text
        {
	vertical-align:middle;
	width:250px;
	}

.divTop
	{
	width:100%;
	position:relative;
                margin-top:20px;
	}

.TextArea
	{
	height:100px;
	width:33%;
                margin-top:100px;
	float:left;
	text-align:center;
	position:relative;
	border-style:solid;
	border:solid 1px #0066FF;
	margin:1px;
	overflow:hidden;		
	}

.File
	{
	margin: 40px 0px 0px 0px;
                text-align: center;
	}

.Submit
	{
	margin-top: 20px;
                text-align: center;
	}

 

You are welcome....

 

 

[s1yman]

thanks for your time