View Full Version : text running outside div

10-09-2008, 04:40 PM
I am testing out a layout and am having trouble containing text within
a DIV. I thought i have done everything correctly but when I continue
typing a line into #text-dash, it flows out horizontally into the
container DIV.
I have looked closely at the HTML and CSS from a template supplied
with dreamweaver where the text does not flow outside the DIV
("Sidebar") into the container and I can't really see any substantial
differences in the code but I must be missing something. Can someone
please take a look and give me a hand with this?


I am including the code from my test page, followed by the code from
the dreamweaver template


<style type="text/css">
body {
margin: 0px;
padding: 0px;

#container {
background-color: #CC9966;
margin: 50px;
width: 600px;
float: left;

#test-dash {
background-image: url(img/nocities.jpg);
background-repeat: repeat-y;
width: 134px;
padding-top: 4px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
float: left;


<div id="container">
<div id="test-dash">
<p>jkjkjjk jkjkjjj oiiiillplll;kjkjkjkjkjkjkjkkjkjkjkjkjk</p>
<p>iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii iiiiiiiiiii</

<p>iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii iiiiiiiiiiiiiiii</


body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of
the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5*
browsers. The text is then set to the left aligned default in the
#container selector */
color: #000000;

.twoColFixLt #container {
width: 780px; /* using 20px less than a full 800px width allows
for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width)
center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the
body element. */

.twoColFixLt #sidebar1 {
float: left; /* since this element is floated, a width must be
given */
width: 200px; /* the actual width of this div, in standards-
compliant browsers, or standards mode in Internet Explorer will
include the padding and border in addition to the width */
background: #EBEBEB; /* the background color will be displayed for
the length of the content in the column, but no further */
padding: 15px 10px 15px 20px;

.fltrt { /* this class can be used to float an element right in your
page. The floated element must precede the element it should be next
to on the page. */
float: right;
margin-left: 20px;

.fltlft { /* this class can be used to float an element left in your
page */
float: left;
margin-right: 10px;

.clearfloat { /* this class should be placed on a div or break element
and should be the final element before the close of a container that
should fully contain a float */
font-size: 1px;
line-height: 0px;

<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixLt #sidebar1 { width: 230px; }
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment
.twoColFixLt #sidebar1 { padding-top: 30px; }
.twoColFixLt #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs
to avoid several bugs */

<body class="twoColFixLt">

<div id="container">
<div id="sidebar1">
<h3>Sidebar1 Content</h3>
<p>The background color on this div will only show for the length
of the content. If you'd like a dividing line instead, place a border
on the left side of the #mainContent div if it will always contain
more content. </p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu,
pellentesque eget, kkkjjjkcursus et, fermentum ut,
s;;;;;;;;;;;;apien. Fusce metus mi, eleifend sollicitudin, molestie
id, varius et, nibh. Donec nec libero.</p>
<!-- end #sidebar1 --></div>
<!-- This clearing element should immediately follow the
#mainContent div in order to force the #container div to contain all
child floats -->
<br class="clearfloat" />
<!-- end #container --></div>

10-09-2008, 04:55 PM
You're floating the inner div.. not sure why, there is nothing to float it against. So by floating you're taking it out of the regular boundaries. Just remove the float that was put in by mistake and it should work fine.

Also for testing it is really useful to use some dummy text instead of repeating the same character without spaces 100 times, it's more realistic and you'll be able to test better during development :)

10-09-2008, 05:41 PM
Thanks for your response. I only floated the inner div to try it and see if that made a difference which it didn't. Also, removing it did not make any difference with the text and but it did then allow the outer container div to wrap under the inner div (which I didn't want) so it seems to have served a purpose anyway.

What I didn't know was that the "test" text needs to have spaces to wrap. I wasn't aware of that and as soon as I put some spaced text in there it wrapped just fine, even with the left float in there.

10-09-2008, 05:48 PM
Excellent! You need to take out the float though, it might 'look' like it doesn't hurt right now, but it's wrong and might break in current, older or future browsers. It serves no purpose there. If using it achieves some kind of result you're looking for, throw up a test page and we can figure out how to do this the standards way.