[SOLVED] Fixing the width on a div tag

[noobstar]

Hi im trying to fix the width inside a div tag using css however, even though i set the width to 350px and after placing a excessive amount of text, the text just flows in a straight line instead of breaking up.

 

Can anyone lend a hand ? Thx

 

Below is the code i have:

 

div#comment {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#000000;
position:relative;
left:38px;
top:-20px;
width:350px;
height:100px;
}

 

 

[TheFilmGod]

You have to post more code. Other divs can affect the behavior of this one. Did you try making the position: static, and taking out the top, bottom and left coordinates. Maybe that had an effect.

[noobstar]

Thanks for your reply and i did try static and it didn't work either the text still goes in a straight line

 

Here is the code i have in my html (note: this isn't all of the code the whole page is rather long):

<td width="515" height="422" valign="top" id="contentbox">
            
            <div id="date" align="center"><span class="month">Mar</span><br/><span class="day">03</span></div>
            <div id="creator">Posted by <font color="#FF0000">testy</font><br/>Mar 03 2007 14:45pm</div>
            <div id="comment" class="default_font">sdgdfgdfgdfgdfgdfgbfbdggnfhtfjghhdfshfdghfgjghjmghfnhgmfgjghjmghfnhgmfgjghjmghfnhgmfgjghjmghfnhgm</div>
            
</td>

 

Here is the CSS code within the div tags seen above:

div#comment {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#000000;
position:relative;
left:38px;
top:-20px;
width:350px;
height:auto;
border-bottom-style:solid;
border-bottom-width:1px;
border-bottom-color:#333333;
border-left-style:solid;
border-left-width:1px;
border-left-color:#333333;
border-right-style:solid;
border-right-width:1px;
border-right-color:#333333;
}

div#creator {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#000000;
border-bottom-style:solid;
border-bottom-width:1px;
position:relative;
left: 38px;
top: -26px;
width:350px;
}

div#date {
background-color:#CC9999;
border-top-style:solid;
border-top-width:1px;
border-top-color:#333333;
border-bottom-style:solid;
border-bottom-width:1px;
border-bottom-color:#333333;
border-left-style:solid;
border-left-width:1px;
border-left-color:#333333;
border-right-style:solid;
border-right-width:1px;
border-right-color:#333333;
padding-top:5px;
height:38px;
width:35px;
}

 

Here is an image example of what i am talking about:

[bronzemonkey]

You've just written one enormous word. Put some normal text in the div.

 

Also:

 

- Don't use tables

- Don't use "align" in your markup

- You can combine all your unnecessary border styles into {border:1px solid #333;}

[noobstar]

I got rid of all the tables as you suggested however, the main problem for this was that it was one huge word so i replaced it with some sentences and it worked thank you for your help m8