Not accepting a fixed width

Ive got a div with a span style thing inside of it and it wont take my width attribute. It just carries out about 800 px then goes to a new line. My code is:

<div style="margin:0 auto;width:872px;">

<div id="body" style="float:left;">

<span style="position: relative; width: 274px; top: 213px; left: 480px;">
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
<script type="text/javascript"><!--
google_ad_client = "x";
/* 234x60, created 1/31/08 */
google_ad_slot = "7884200770";
google_ad_width = 234;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>


</span>
</div>
</div>

Code (markup):

TABLE,TD,FONT,P,I,BODY,DIV,INPUT 
{COLOR: FFFFFF; font-family: Arial, sans-serif; font-size:11px;}  
BODY 
A{
COLOR: #b0b0b0;font-family: Arial, Verdana, sans-serif;
FONT-SIZE:11px;
TEXT-DECORATION:none;
cursor:none;
}
A:link
{ text-decoration: underline; color:b0b0b0}
A:visited
{ text-decoration: underline; color:b0b0b0}
A:hover {COLOR:b0b0b0; text-decoration:underline}

#body{
width: 872px;
height: 671px;
background: url(tmnt.png) bottom left repeat-x;
}

Code (markup):

Anyone know why it wont accept the fixed width?

 

What exactly are you trying to do? Not sure I understand what you mean by "It just carries out about 800 px then goes to a new line."

 

Im trying to make a box that is 274 pixel wide with text inside of it. I dont want the text to go more than 274 pixels. It goes out about 800 pixels then starts a new line when I want it to go 274 pixels then start a new line.

Heres a visual...

 

Normally, text inside a block like a div naturally wraps. I noticed though that you are trying to set a width on an inline element (the span). No can do. Plus the googlie ads have their own width.

Your main box (the one without the name) has a width of 872px. The div inside that is floated left but you didn't state a width-- so it does what all blocks do, goes as wide as it can (100% width of its container). The span is merely filling it like all good little inlines do-- they're inline so you can't set dimensions on them like width and height.

Instead, set the desired width to that #body div. The span text will stay inside that div no problem : ) Set the width of #body to 274 px. To give a little room between the edges of the text, give #body some padding too-- 5px or something.

Normally many people put their googlie-stuff inside a <p> just to be safer. The <p> often acts like inline because it can only have inline stuff in it (text usually) BUT it is actually a block element, so you can set width on that as well.

 

I cant set the body to 274 pixels wide because the background is 872 pixels wide and I need to show it all.

Is there a different way to do this without the span crap?

 

I got it working. I just did this:

<div style="margin:0 auto;width:872px;height:671px;background-image:url(tmnt.png)">

<div id="body" style="float:left;position: relative; width: 274px; top: 213px; left: 480px;">

Code (markup):

 

If the div called #body doesn't have a background colour set, you can see the parent div no problem : )

But like I said, you could also stick your googlies-stuff in a <p> instead of a span.

 

Try too add the padding property...

 

padding ahoy