Gud evening
Actually i want to divide my page into two forms
and i want to insert my first form in right side
and the second form in left side.
Is there any possibility to do like this
and by default the forms are created one after another
please guide me towards the solution
thanq
I really don't encourage the use of frames for this kind of stuff, as sandra55 did. It can be easily done with the use CSS.
I'll show you how, but only the very basic and minumum code for this to work, you can then improve this a lot and add more complex stuff and layout design.
Here's how
This way will create a web page in the form of a left "menu"/"nav" space and a right "content" space.
First let's define the basic html to use, I'll use a strict xhtml doctype.
The basic tags we'll need (appart from the "default" ones) are three div tags, one wrapper div, to.. well.. wrap the other two, one for the menu, with the id "menu" and other with the id "content" for the content (those names will be the ones we will use to reference them from CSS), and a link tag to link the stylesheet (i'll cover the CSS part later)
So, voilą:
[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<title>Untitled Document</title>
</head>
<body>
<div id="wrapper">
<div id="menu">
<!--here'll be the menu items or something like that-->
</div>
<div id="content">
<!-- here will be the page main contents -->
</div>
</div>
</body>
</html>
[/HTML]
Nothing strange to you I hope...
On to the CSS part
We just finished our HTML part, so let's dive right in the CSS.
If you see the link tag it says href="styles.css", that means that the CSS file must be named "styles.css" and must be located in the very same folder as the HTML document.
Here's the CSS document content:
-
body {
-
text-align:center
-
}
-
-
#wrapper {
-
margin:auto;
-
width:900px;
-
height:auto;
-
overflow:auto;
-
text-align:left;
-
}
-
-
#menu {
-
float:left;
-
width:250px;
-
}
-
-
#content {
-
float:right;
-
width:645px;
-
}
-
Save this to "styles.css" in the same folder as your HTML.
With this you'll have your page separated in to independent columns.
Like I said before, you could (and probably should, and must) improve this as this is just a skeleton for a layout, but I settled the basics for you to explore and improve this.
You could, for example, add a header on top of the two main divs, it's not too difficult, try and you'll make it.
Well, hope it served.
Good luck!
29
