...

View Full Version : Buttons next to textarea with container



name _F1
10-07-2007, 01:58 PM
The layout I want to achieve is a textarea (about 80% width), with a column of buttons next to it. The two elements are also contained within a DIV, which needs to be displayed around them.


+-----------------------------------------+
| +------------------------------+ +----+ |
| | Textarea | +====+ |
| | | +====+ |
| +------------------------------+ +----+ |
+-----------------------------------------+

I also want the container to be 100% in height and width (with a 1% margin), and the textarea 100% of the height of the container (again, with a 1% margin).

I have tried floating the textarea left, and nesting the buttons in a DIV which I also float left, but the container is only a few pixels high at the top of the page, rather than surrounding them. The textarea also isn't 100% height, it's just the default height.

Any help or ideas would be appreciated.

BarrMan
10-07-2007, 02:25 PM
What code have you got so far?

name _F1
10-07-2007, 03:08 PM
I've isolated the problem, but still not worked out how to solve it.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title></title>
<style type="text/css">
textarea {
width:80%;
height:96%;
float:left;
margin:1%;
}
#buttons {
float:left;
width:16%;
margin:1%;
}
input {
width:100%;
margin:1% 0;
}
.container {
width:98%;
height:98%;
background-color:green;
}
</style>
</head>

<body>
<div class="container">
<form action="submit.php" method="post">
<textarea id="comments" name="comments"></textarea>
<div id="buttons">
<input type="submit" value="Button 1" />
<input type="button" value="Button 2" />
<input type="button" value="Button 3" />
<input type="button" value="Button 4" />
</div>
</form>
</div>
</body>
</html>

It works perfectly without the XHTML doctype, but breaks when the doctype is added. Is there any way to fix this and still have the XHTML?

Note: I'm only testing in Firefox for the moment.

BarrMan
10-07-2007, 04:49 PM
Change the type from percent to px and it will work. (In the .Container)

name _F1
10-08-2007, 01:30 AM
I don't want it in pixels, though, I want it to fill the entire page.

BarrMan
10-08-2007, 10:20 AM
Then you should define some tag which is bigger than the container with a size attribute so it will know what % to take of the page.

name _F1
10-08-2007, 10:56 AM
I've got it almost working. However, I want a 1% margin all the way around the element which contains the form (green background). Whatever I do, it results in scrollbars.

Revised CSS (some of it is perhaps unnecessary, as I've been experimenting with lots of different styling to try and make this work):


html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
textarea {
display:block;
width:80%;
height:96%;
float:left;
margin:1%;
}
#buttons {
float:left;
width:15%;
margin:1%;
}
input {
width:100%;
margin:1%;
}
.container {
background-color:green;
width:98%;
height:98%;
padding:0;
margin:1% auto;
}

form {
height:100%;
width:100%;
}

BarrMan
10-08-2007, 11:14 AM
Hmm I recall something with the margin set to ' - ' value which disables the scrollbar but I don't remember where you should put it. Try and play around with it.

name _F1
10-08-2007, 12:36 PM
I got it working without scrollbars in Firefox, by applying position:relative;top:1%; to the .container. However, scrollbars still appear in IE7 and Opera.

I couldn't find any solution using negative margins.

Also, the textarea's height attribute doesn't seem to work in IE -- it's the default 2 rows.

name _F1
10-10-2007, 11:15 AM
Does anyone have a solution to this problem?

_peter_
10-10-2007, 12:43 PM
heh it should be simple:

add before the closing div the following

<div style="clear:both;"></div>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum