What's the best way to layout to text boxes with HTML?

Guggly · Apr 2, 2008

I’m just learning basic HTML while working on a project, so forgive my ignorance.

I have two text areas on a page, which need to be side to side, looking something like this:

Code:

Text, here       --------
Something else   |      |
--------------   |      |
|            |   |      |
|            |   |      |
|            |   |      |
--------------   |      |
More text        --------

What’s the best way to lay this out on a page? Would it be to put the text areas into a table, or is this something that would be better handled another way? I don’t know CSS, but I suppose I could/should learn some. Thanks! -- Mike

Vragabond · Apr 2, 2008

First you would put the long textarea on the right and give it a style of float: right;. Then you would add all the text and the other text area. The only thing you would need would be that the width of two textareas would not be too large to fit them side by side.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

ChrisHunt · Apr 3, 2008

I don’t know CSS, but I suppose I could/should learn some

If you're at all serious about building web sites, you should.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

Guggly · Apr 4, 2008

Thanks, that's helpful! Yes, I do plan on learning CSS and more about web programming in general.

vacunita · Apr 5, 2008

Something like this should get you started:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<style>
*{
padding:0;
margin:0;
}
html,body{
width:100%;
height:100%;
}
#container{
width:100%;
height:100%;
border:1px solid red;
background-color:#e2dbc4;
}

#leftside{
width:70%;
height:100%;
background-color:#689268;
float:left;
}

#rightbar{
width:30%;
height:100%;
background-color:#4c87ae;
float:left;
}


#textsection1{
width:100%;
height:40%;
text-align:center;
background-color:#ae5e4c;
}

#blanksection{
width:100%;
height:40%;
background-color:#ece3a4;
}
#textsection2{
width:100%;
height:19%;
background-color:#89768a;
}
</style>
<title>Recuperación de Datos México</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#404040">

<div id="container">
	<div id="leftside">
		<div id="textsection1">
		Text, Here Something else
		</div>
		<div id="blanksection">
		</div>
		<div id="textsection2">
		More Text
		</div>
	</div>
	<div id="rightbar">
text
	</div>
</div>

</body>
</html>

If I were you I'd learn html and CSS. If you have any questions don't hesitate to post back.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

What's the best way to layout to text boxes with HTML?

Guggly

Programmer

Vragabond

Programmer

ChrisHunt

Programmer

Guggly

Programmer

vacunita

Programmer

Similar threads

Part and Inventory Search

Sponsor