div issue

Would like text to wrap around div

[Ohioian]

I have a div I would like to align right and have the text wrap around it to the left. I have tried style:"float=right" in the div tag. I have tried float:right; in the css script, and I have tried align=left in the tag but the text likes staying south of the div. This div tag is located in one of the children to a parent container. It's a two column with header and footer.

IE will keep the div centered when I'm using the coding in the script, but will work fine when coding is removed from the css script and the style code is embedded in the div tag.

Firefox will only shift the tag right with the style embedded in the tag, but it's all depending upon how much text I have in the child container, if there is just a couple lines of text the text will shift south of the div tag.

I’m opened to suggestions!

Thanks

[createErrorMsg]

We need code. Post the CSS and HTML for the parts of the layout relevant to this problem. Without code, there is literally nothing we can do.

cEM

[Ohioian]

Thanks cEM!

html: textarea is one of the child div's, script is my problem child.

<div id="textarea">
<div id="script">
<script type="text/javascript"><!--

...

//--></script>

</div>
<h2>MyTSP News </h2>
<p>We keep record of our market actions here. The list of documents will be updated to reflect our movement in an out of the market funds. Percentage change will reflect in these articles. It helps us and you gain a better understanding of what were doing to make you money, and improve our performance.</p>
<ul>
<li> <a href="news3_05.html" target="_self">March move to G Fund</a></li>
<li><a href="news4_05.htm" target="_self">April move to C and S Funds</a> </li>
</ul>

css: This is part of the external css...

#textarea {
background: #FFFFFF;
margin-left: 180px;
padding: 5px 5px 5px 5px;
border-color: #002640;
border-style: solid;
border-width: 0px 0px 5px 5px;
}
#textarea h1, h2 {
font-family: "Times New Roman", Times, serif;
font-style: oblique;
line-height: 10px;
font-weight: bolder;
letter-spacing: 2px;
text-align: left;
}
#textarea h1 {
font-size: 36px;
}
#textarea h2 {
font-size: 24px;
}
#textarea p {
letter-spacing: 1.2px;
font-family: "Times New Roman", Times, serif;
text-indent: 10px;
font-size: 16px;
text-align: left;
}
#textarea ul {
text-align: left;
}

and this is part of the attached css...

<style type="text/css">
<!--
#textarea li {
list-style-position: outside;
list-style-image: url(images/newsicon.gif);
}
#script {
height: 130px;
width: 140px;
padding: 0px;
margin-left: 5px;
margin-right: 5px;
voice-family: "\"}\"";
voice-family: inherit;
float: right;
}
-->
</style>

[createErrorMsg]

I moved all of that CSS into the head tag, put a simple JS to print "Hello World" a dozen times into the #script div, and ran the test page in FF and IE. The result was exactly as one would expect, and what I believe you were after...the #script div floated right with the #textarea text wrapping around it (I had to add more text to make it long enough to wrap, but once long enough, it did).

I'll post the test page code and let you run it. See if you get the same problem as before.

Your problem (which I was unable to replicate) could be the result of having the CSS in different places. Sometimes this results in conflicting styles and it can be difficult to isolate the one that is overriding the other and botching the display.

It could also be something in the JS you are running, so be sure to check the JS output. If it is wider than the div which contains it, IE will make the div wider, as well. The result that you describe as text "staying south of the div" (which I assume means the unfloated #textarea content displays below the floated #script content) could simply be that between the 180px left margin on #textarea and a wider #script div (as a result of too-wide content inside of it in IE), there isn't enough room left for #textarea's content to display beside the float. To see what I mean, change the "Hello World" in the script to a really long run of uninterrupted characters.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
#textarea {
background: #FFFFFF;
margin-left: 180px;
padding: 5px 5px 5px 5px;
border-color: #002640;
border-style: solid;
border-width: 0px 0px 5px 5px;
}
#textarea h1, h2 {
font-family: "Times New Roman", Times, serif;
font-style: oblique;
line-height: 10px;
font-weight: bolder;
letter-spacing: 2px;
text-align: left;
}
#textarea h1 {
font-size: 36px;
}
#textarea h2 {
font-size: 24px;
}
#textarea p {
letter-spacing: 1.2px;
font-family: "Times New Roman", Times, serif;
text-indent: 10px;
font-size: 16px;
text-align: left;
}
#textarea ul {
text-align: left;
}
#textarea li {
list-style-position: outside;
}
#script {
height: 130px;
width: 140px;
padding: 0px;
margin-left: 5px;
margin-right: 5px;
voice-family: "\"}\"";
voice-family: inherit;
float: right;
}</style>
</head>
<body>
<div id="textarea">
<div id="script">
<script type="text/javascript"><!--
for(i=0;i<12;i++){
document.write('Hello World \n');
}
//--></script>
</div>
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
<ul>
<li> <a href="#" target="_self">Lorem Ipsum</a></li>
<li><a href="#" target="_self">Dolor Sit Amet</a> </li>
</ul>
</div>
</body>
</html>

cEM

[Ohioian]

My Dad used to tell me if something gets you so frustrated or confused just walk away from it and come back later and you’ll see the problem right in front of you! Not this.

Thanks cEM for taking the time with this. By dissecting it worked like it should have. Nothing was changed.

Thinking if I wrapped the script with a span tag and then tell it #script span {text-align: right;} would do it, it hugged the upper left of that container corner.

Thanks for the help!