I've used 2 columns and 3 columns successfully, but... not this time. After the 2nd column, it should go back to the left side... no columns, just aligned at the left side (but within the #main border). If I add another </div>, it ends the #main border.
I've stripped down the following code, and you should be able to paste and run it.
<HEAD>
<TITLE>Policy Services - Quick Quote</TITLE>
<STYLE type="text/css"><!--
body {
font-family:Arial;
}
div.2coltable div {float: left; width: 50%; text-align: left}
div.2coltable span {font:bold 10pt;}
#main {
margin:0 2em 0 2em;
border:1px solid navy;
padding:2px;
clear:both;
}
.label {font:bold 10pt}
.section {
background:navy;
color:white;
font:bold 12pt Tahoma, Verdana, Arial;
text-align:left;
padding-left:5px;
}
--></STYLE>
</HEAD>
<BODY>
<H1>Quick Quote</h1>
<FORM ACTION="bbw.sh" METHOD="GET" NAME="quoteform" style="clear:right"">
<div id="main";>
<!-- form policy -->
<div class="section">
General Information
</div>
<div class="2coltable">
<div><span class="label">Name:</span>
<INPUT type="TEXT" name="fName" value="first" SIZE=10 >
<INPUT type="TEXT" name="mName" value="init" SIZE=1 >
<INPUT type="TEXT" name="lName" value="last" SIZE=10 ></div>
</div>
<span class="label">Effective:</span>
<SELECT name="SelectMonth" onchange="changeOptionDays(this.selectedIndex)">
<OPTION selected>Aug
<OPTION>Sep
</SELECT>
<SELECT name="SelectDay">
<OPTION selected>15
<OPTION>16
<OPTION>17
</SELECT>
<SELECT name="SelectYear">
<OPTION selected>2003
</SELECT>
<div class="section">
Policy Limits
</div>
</div>
</FORM>
</BODY>
In my successful use of 2coltable, I used code from a sample site (recommended by a thread), and I don't really understand why it worked. Guess that's obvious, huh?
Please help me. I've tried every combination of <div></div> I can think of, but no luck.
Thank you,
moretaDo you mean the effect you achieve when placing text between the last two </div> tags?Like
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<HEAD>
<TITLE>Policy Services - Quick Quote</TITLE>
<STYLE type="text/css"><!--
body {
font-family:Arial;
}
div.2coltable div {float: left; width: 50%; text-align: left}
div.2coltable span {font:bold 10pt;}
#main {
margin:0 2em 0 2em;
border:1px solid navy;
padding:2px;
clear:both;
}
.label {font:bold 10pt}
.section {
background:navy;
color:white;
font:bold 12pt Tahoma, Verdana, Arial;
text-align:left;
padding-left:5px;
}
--></STYLE>
</HEAD>
<BODY>
<H1>Quick Quote</h1>
<FORM ACTION="bbw.sh" METHOD="GET" NAME="quoteform" style="clear:right"">
<div id="main";>
<!-- form policy -->
<div class="section">
General Information
</div>
<div class="2coltable">
<div><span class="label">Name:</span>
_<INPUT type="TEXT" name="fName" value="first" SIZE=10 >
_<INPUT type="TEXT" name="mName" value="init" SIZE=1 >
_<INPUT type="TEXT" name="lName" value="last" SIZE=10 ></div>
</div>
<span class="label">Effective:</span>
<SELECT name="SelectMonth" onchange="changeOptionDays(this.selectedIndex)">
<OPTION selected>Aug
<OPTION>Sep
</SELECT>
<SELECT name="SelectDay">
<OPTION selected>15
<OPTION>16
<OPTION>17
</SELECT>
<SELECT name="SelectYear">
<OPTION selected>2003
</SELECT>
<div class="section">
Policy Limits
</div>
Hello, this text is within the border but underneath...
</div>
</FORM>
</BODY>
</html>It's the <div class="section">
Policy Limits
</div>
part. Policy Limits should layout like General Information
Thank you,
moretaAh ha! Got it - it took me 5 minutes too lol.
The problem... Oh what the heck, I guess you only want the solution anyway! Just add clear:left to your .section css
.section {
background:navy;
color:white;
font:bold 12pt Tahoma, Verdana, Arial;
text-align:left;
padding-left:5px;
clear:left;
}
Do you want the WHY as well as the HOW?Do you want the WHY as well as the HOW?
Yes, please. I'd like to understand why as well as how.
Thank you,
moretaOK it's fairly simple:
- the left column had some sort of margin/space under the text (probably only a few pixels)
- the text saw the left column overhanging by a few pixels into the next line, so it stayed out at the 50% mark.
- adding clear:left brought the text down by the few pixels necessary to clear the bottom of the left column.
Is that sort of understandable?
DaveIs that sort of understandable?
Yes Dave, perfectly clear. Thank you for taking the time to explain!
Would you mind clarifying how the columns work?
I've read about them and am trying to use them, but I'm not sure whether it works because of correct code or forgiving interpretation. The code that finally works for me seems to be different every time I try columns.
Thank you for the help!
moreta
Right then, here we go: All comments will be added like this:
<!-- Comment -->
<STYLE type="text/css"><!--
body {
font-family:Arial;
}
div.2coltable div {float: left; width: 50%; text-align: left}
<!-- any div, of class '2coltable', will have width of 50% (i.e. half) of the screen, and will be floated (i.e. taken out of the flow page) to the left. This means the rest of the page will move out from the left of the page and form a column on the right. -->
div.2coltable span {font:bold 10pt;}
#main {
margin:0 2em 0 2em;
border:1px solid navy;
padding:2px;
clear:both;
}
.label {font:bold 10pt}
.section {
background:navy;
color:white;
font:bold 12pt Tahoma, Verdana, Arial;
text-align:left;
padding-left:5px;
}
--></STYLE>
Is that ok?It can't possibly be that simple! The more documentation/reference materials I read, the more confused I became. In the future I'll ask here before I start knocking my head against the table....
So... <div class="2coltable">
<div><span class="label">Name:</span>
<INPUT type="TEXT" name="fName" value="first" SIZE=10 >
</div>
<!-- this is still in the left column -->
</div>
<!-- now it's in the right, until it's longer than the left column,
then it wraps back to the left margin -->
<span class="label">Effective:</span> 08/15/2003
<div class="section">
Policy Limits
</div>
<!-- "section" had to clear:left to force it to move below the left column -->
<div class="2coltable">
Hello, this text is in a left column that starts below "section".
</div>
...and it could continue going back and forth. If I didn't care whether the column rows lined up, I could do everything in the left column, end the </div>, and then code everything in the right column.
Do I need the second <div> around the INPUT statement? (See bold above.) It was in the sample code I used as a go-by, but I don't know why.
Thank you!
moretaOriginally posted by moreta
It can't possibly be that simple!
It is! Admittedly you could make some little changes in the code (for example I would have used a straight class and not bothered specifying that 2coltable had to be a div) but it's basically the same!
Originally posted by moreta
Do I need the second <div> around the INPUT statement? (See bold above.) It was in the sample code I used as a go-by, but I don't know why.
Not really. It's just there to keep the code tidy I think!
Glad to help anyway - it's surprising how difficult some people manage to make things!
If you find any other two column tables stuff feel free to ask and I'll outline the differences - there's always more than one way to do something, especially in computers!...there's always more than one way to do something...And every time I see it done another way, I try to incorporate into what I have. What do I know about mutually exclusive.
I really appreciate the explanations. If you aren't worn out from my questions, tell me how you would have done it with a class instead of division. Why would you have used a class instead?
When I find another version of columns, I'll take you up on explaining the differences! (I'll also try to not wear out my welcome.)
moretaTo do it with just a class would simply be:
.2coltable {float: left; width: 50%; text-align: left}
There's no real reason, just that
1) it's easier to remember
2) It would allow me to use a span for the same purpose - esp if it was only a short table and...
3) it's shorter to type!
LOL
Anyway, you're welcome!Flexible and less characters. I like those reasons.
I'm off to confuse myself in new areas! (I mean... to conquer new areas!)
Thanks, Dave!
moretaGood luck Moreta!
And if you're looking for good css tutorials... try <!-- w --><a class="postlink" href="http://www.w3schools.com">www.w3schools.com</a><!-- w --> ! They've got a neat little reference thing there too!
Dave
I've stripped down the following code, and you should be able to paste and run it.
<HEAD>
<TITLE>Policy Services - Quick Quote</TITLE>
<STYLE type="text/css"><!--
body {
font-family:Arial;
}
div.2coltable div {float: left; width: 50%; text-align: left}
div.2coltable span {font:bold 10pt;}
#main {
margin:0 2em 0 2em;
border:1px solid navy;
padding:2px;
clear:both;
}
.label {font:bold 10pt}
.section {
background:navy;
color:white;
font:bold 12pt Tahoma, Verdana, Arial;
text-align:left;
padding-left:5px;
}
--></STYLE>
</HEAD>
<BODY>
<H1>Quick Quote</h1>
<FORM ACTION="bbw.sh" METHOD="GET" NAME="quoteform" style="clear:right"">
<div id="main";>
<!-- form policy -->
<div class="section">
General Information
</div>
<div class="2coltable">
<div><span class="label">Name:</span>
<INPUT type="TEXT" name="fName" value="first" SIZE=10 >
<INPUT type="TEXT" name="mName" value="init" SIZE=1 >
<INPUT type="TEXT" name="lName" value="last" SIZE=10 ></div>
</div>
<span class="label">Effective:</span>
<SELECT name="SelectMonth" onchange="changeOptionDays(this.selectedIndex)">
<OPTION selected>Aug
<OPTION>Sep
</SELECT>
<SELECT name="SelectDay">
<OPTION selected>15
<OPTION>16
<OPTION>17
</SELECT>
<SELECT name="SelectYear">
<OPTION selected>2003
</SELECT>
<div class="section">
Policy Limits
</div>
</div>
</FORM>
</BODY>
In my successful use of 2coltable, I used code from a sample site (recommended by a thread), and I don't really understand why it worked. Guess that's obvious, huh?
Please help me. I've tried every combination of <div></div> I can think of, but no luck.
Thank you,
moretaDo you mean the effect you achieve when placing text between the last two </div> tags?Like
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<HEAD>
<TITLE>Policy Services - Quick Quote</TITLE>
<STYLE type="text/css"><!--
body {
font-family:Arial;
}
div.2coltable div {float: left; width: 50%; text-align: left}
div.2coltable span {font:bold 10pt;}
#main {
margin:0 2em 0 2em;
border:1px solid navy;
padding:2px;
clear:both;
}
.label {font:bold 10pt}
.section {
background:navy;
color:white;
font:bold 12pt Tahoma, Verdana, Arial;
text-align:left;
padding-left:5px;
}
--></STYLE>
</HEAD>
<BODY>
<H1>Quick Quote</h1>
<FORM ACTION="bbw.sh" METHOD="GET" NAME="quoteform" style="clear:right"">
<div id="main";>
<!-- form policy -->
<div class="section">
General Information
</div>
<div class="2coltable">
<div><span class="label">Name:</span>
_<INPUT type="TEXT" name="fName" value="first" SIZE=10 >
_<INPUT type="TEXT" name="mName" value="init" SIZE=1 >
_<INPUT type="TEXT" name="lName" value="last" SIZE=10 ></div>
</div>
<span class="label">Effective:</span>
<SELECT name="SelectMonth" onchange="changeOptionDays(this.selectedIndex)">
<OPTION selected>Aug
<OPTION>Sep
</SELECT>
<SELECT name="SelectDay">
<OPTION selected>15
<OPTION>16
<OPTION>17
</SELECT>
<SELECT name="SelectYear">
<OPTION selected>2003
</SELECT>
<div class="section">
Policy Limits
</div>
Hello, this text is within the border but underneath...
</div>
</FORM>
</BODY>
</html>It's the <div class="section">
Policy Limits
</div>
part. Policy Limits should layout like General Information
Thank you,
moretaAh ha! Got it - it took me 5 minutes too lol.
The problem... Oh what the heck, I guess you only want the solution anyway! Just add clear:left to your .section css
.section {
background:navy;
color:white;
font:bold 12pt Tahoma, Verdana, Arial;
text-align:left;
padding-left:5px;
clear:left;
}
Do you want the WHY as well as the HOW?Do you want the WHY as well as the HOW?
Yes, please. I'd like to understand why as well as how.
Thank you,
moretaOK it's fairly simple:
- the left column had some sort of margin/space under the text (probably only a few pixels)
- the text saw the left column overhanging by a few pixels into the next line, so it stayed out at the 50% mark.
- adding clear:left brought the text down by the few pixels necessary to clear the bottom of the left column.
Is that sort of understandable?
DaveIs that sort of understandable?
Yes Dave, perfectly clear. Thank you for taking the time to explain!
Would you mind clarifying how the columns work?
I've read about them and am trying to use them, but I'm not sure whether it works because of correct code or forgiving interpretation. The code that finally works for me seems to be different every time I try columns.Thank you for the help!
moreta
Right then, here we go: All comments will be added like this:<!-- Comment -->
<STYLE type="text/css"><!--
body {
font-family:Arial;
}
div.2coltable div {float: left; width: 50%; text-align: left}
<!-- any div, of class '2coltable', will have width of 50% (i.e. half) of the screen, and will be floated (i.e. taken out of the flow page) to the left. This means the rest of the page will move out from the left of the page and form a column on the right. -->
div.2coltable span {font:bold 10pt;}
#main {
margin:0 2em 0 2em;
border:1px solid navy;
padding:2px;
clear:both;
}
.label {font:bold 10pt}
.section {
background:navy;
color:white;
font:bold 12pt Tahoma, Verdana, Arial;
text-align:left;
padding-left:5px;
}
--></STYLE>
Is that ok?It can't possibly be that simple! The more documentation/reference materials I read, the more confused I became. In the future I'll ask here before I start knocking my head against the table....
So... <div class="2coltable">
<div><span class="label">Name:</span>
<INPUT type="TEXT" name="fName" value="first" SIZE=10 >
</div>
<!-- this is still in the left column -->
</div>
<!-- now it's in the right, until it's longer than the left column,
then it wraps back to the left margin -->
<span class="label">Effective:</span> 08/15/2003
<div class="section">
Policy Limits
</div>
<!-- "section" had to clear:left to force it to move below the left column -->
<div class="2coltable">
Hello, this text is in a left column that starts below "section".
</div>
...and it could continue going back and forth. If I didn't care whether the column rows lined up, I could do everything in the left column, end the </div>, and then code everything in the right column.
Do I need the second <div> around the INPUT statement? (See bold above.) It was in the sample code I used as a go-by, but I don't know why.
Thank you!
moretaOriginally posted by moreta
It can't possibly be that simple!
It is! Admittedly you could make some little changes in the code (for example I would have used a straight class and not bothered specifying that 2coltable had to be a div) but it's basically the same!
Originally posted by moreta
Do I need the second <div> around the INPUT statement? (See bold above.) It was in the sample code I used as a go-by, but I don't know why.
Not really. It's just there to keep the code tidy I think!
Glad to help anyway - it's surprising how difficult some people manage to make things!
If you find any other two column tables stuff feel free to ask and I'll outline the differences - there's always more than one way to do something, especially in computers!...there's always more than one way to do something...And every time I see it done another way, I try to incorporate into what I have. What do I know about mutually exclusive.
I really appreciate the explanations. If you aren't worn out from my questions, tell me how you would have done it with a class instead of division. Why would you have used a class instead?
When I find another version of columns, I'll take you up on explaining the differences! (I'll also try to not wear out my welcome.
)moretaTo do it with just a class would simply be:
.2coltable {float: left; width: 50%; text-align: left}
There's no real reason, just that
1) it's easier to remember
2) It would allow me to use a span for the same purpose - esp if it was only a short table and...
3) it's shorter to type!
LOL
Anyway, you're welcome!Flexible and less characters. I like those reasons.
I'm off to confuse myself in new areas! (I mean... to conquer new areas!)
Thanks, Dave!
moretaGood luck Moreta!
And if you're looking for good css tutorials... try <!-- w --><a class="postlink" href="http://www.w3schools.com">www.w3schools.com</a><!-- w --> ! They've got a neat little reference thing there too!
Dave