So I have created a 2 column layout with divs, and a header, i have also created a nested float http://glish.com/css/1.asp but now I need to get my form to sit correctly.
I was able to create a form layout as show below with the shoes :
But my problem arose when I tired to have a layout as show below
i wanted
area: [ ] (-----> tabed over) number: [ ] (------> tabed over) ext: [ ]
This would look like form1 attachment, but the form i have is form at the lower part of the attachment
But I want these to all be seperated according to the page I want them to be seperated like the first form attachment below but able to have 3 on a page. The problem I am runnign into is that it puts them on a new line, i would rather not change program to add extra div and span tags. I wanted to know if this can be acomplished using css. I have <br> tags for when I want a new line but for this example the <br> would come before the area adn after the ext, thus the reason i want them on the same line.
I was able to make something like the colored box figure, but the problem is that when I try to add something else to the float left section it puts it on the next line down on the left but i actually want it on the lowest left region, is tehre a way to force it to go to the bottom?
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link href="test.css" rel="stylesheet" type="text/css">
</head>
<body>
<div >
<form>
<span style="width: 33%; border: 2px solid #FF0000 " class="left">
<div class="row">
<span class="label">Name/span>
<span class="formw"><input type="text" size="25" /></span>
</div>
<div class="row">
<span class="label">Age
<span class="formw"><input type="text" size="25" /></span>
</div>
<div class="row">
<span class="label">Shoe size
<span class="formw"><input type="text" size="25" /></span>
</div>
</span>
<span style="width: 33%; border: 2px solid #00FFF0"; class="center" >
<div class="row">
<span class="label">CENTER
<span class="formw"><input type="text" size="25" /></span>
</div>
</span>
<span style="width: 33%; border: 2px solid #0000FF " class="right">
<div class="row">
<span class="label">Shoe size2
<span class="formw"><input type="text" size="25" /></span>
</div>
</span>
<span style="width: 33%; border: 2px solid #FF0000 " class="left">
<div class="row">
<span class="label">Age
<span class="formw"><input type="text" size="25" /></span>
</div>
</span>
<div class="spacer">
</div>
</form>
</div>
</body>
</html>
test.css
div.test-div{
float: right;
}
div.row {
clear: both;
padding-top: 10px;
}
div.row span.label {
float: left;
width: 100px;
text-align: right;
}
span.formw {
float: right;
width: 230px;
text-align: left;
}
span.left {
float: left;
}
span.right {
float: left;
}
span.center {
float: left;
}
Thanks
.
Bookmarks