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.

Code:

+-----------------------------------------+
| +------------------------------+ +----+ |
| | 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.

PHP Code:


			
<!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):

PHP Code:


			
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>