css line break in my scenario - css

Question

I'm new to css and I need to add a few additional pages using the existing design that was created by previous programmer in coldfusion. But when I applied footer.cfm at the end of my codes, the footer is displayed on the right side, not at the bottom of my form no matter what I did. It did not respond to html br or p tags.
I tried to googled and follow the w3schools.com p.test (see the line break css codes below), it did nothing.
p.test {
word-break: break-all;
}
The footer.cfm looks like this:
<br>
<hr>
<div class="FooterText">
xxxxxxxx.com Help Desk: xxx.xxx.xxxx | Copyright © 2008 xxxxxxx.com |
report website problem to webmaster#xxxxxxx.com
</div>
</body>
</html>
The css for footer looks like this:
.FooterText {font: 0.7em Book Antiqua, Georgia, Times New Roman, serif;
font-size: 12px; color: #4f4f4f; margin-left:-310;}
One of my page uses jquery tabs and inside each tab there is a form, my codes look like this:
//Edit the counter/limiter value as your wish
var count2 = "500"; //Example: var count = "175";
function limiter2() {
var tex2 = document.myform.meetingschedule.value;
var len2 = tex2.length;
if (len2 > count2) {
tex2 = tex2.substring(0, count2);
document.myform.meetingschedule.value = tex2;
return false;
}
document.myform.limit2.value = count2 - len2;
}
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #999999;
border-left: 1px solid #999999;
width: 800;
}
ul.tabs li {
float: left;
margin: 0;
cursor: pointer;
padding: 0px 21px;
height: 31px;
line-height: 31px;
border: 1px solid #999999;
border-left: none;
font: Georgia, Times New Roman, serif;
font-weight: bold;
color: #454545;
font-size: 0.8em;
background: #EEEEEE;
overflow: hidden;
position: relative;
}
ul.tabs li:hover {
background: #CCCCCC;
}
ul.tabs li.active {
background: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
.tab_container {
border: 1px solid #999999;
border-top: none;
clear: both;
float: left;
width: 800;
background: #FFFFFF;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
display: none;
}
<div class="tab_container">
<!--- The Tab container holder --->
<div id="tab1" class="tab_content">
content of first tab, form1
</div>
<div id="tab2" class="tab_content">
content of second tab, form 2
</div>
<div id="tab3" class="tab_content">
content of third tab. form 3
</div>
</div>
<p class="test">
<cfinclude template="footer.cfm">
</p>
When I put footer.cfm at the end of the last div tag, the footer does not go beneath the form tabs even after using the w3schools.com. It shows up at the right side of the form tab instead.

Answer 1

It looks like the problem is caused by the float:left on your tab_container.
Try this:
p.test { clear:left; }
and it should fix your problem
You may also want to change that p into div as it looks like you are inserting other divs inside it (and divs cannot be children of ps)

Answer 2

It looks like the problem is caused by the float:left on your tab_container.
Try this:
p.test { clear:left; }
and it should fix your problem