Question

for some reason the text in my div doesn’t go to the next line, i’ve tried several different css elements which don’t seem to work…. word-wrap:break word, just jumbles the letters…

what i want is for one there is an extra word it goes down to the next line like it’s supposed to

this is the div it’s in

    #top7 {
        width: 150px;
        height:auto;
        margin: 5px;
        display: block;
        float: left;
        word-wrap:break-word;
     }

text that it’s in

#p6 {
   font-family: Myriad Pro;
   margin: 1px;  
   font-size: 22px;
   background-color:#540f45;
   padding: 5px 5px 3px 4px;
   margin:4px;
}

a {
  text-decoration: none;
  color: white;
  text-align: right;
  font-family: Myriad Pro;
}

here is the php function that retrieves the data from the database

<p id='p6'><?php echo "<a href='' "</a>"; ?></p>

this is all wrapped in these two id’s

body {
   background:#603e4f;
   display: block;

}

#foursquare {
    background-color:#603e4f;    width: 290px;
    display: block;
    position: absolute;
}

Answer 1

Create a proper class and get rid of the p6 element. Obviously you’d use your database generated HTML. I just used your values as an example for the fiddle. Also since you’re wrapping the elements in a p tag anyway the word break is pointless unless you expect data to be too long for a single tag. Paragraphs break to a new line automatically.

<div id="top7">
<p class="six"><a href="#">CSC110</a></p>
<p class="six"><a href="#">MATH100</a></p>
<p class="six"><a href="#">HINF130</a></p>
<p class="six"><a href="#">CSC110</a></p>
<p class="six"><a href="#">HINF200</a></p>

</div>​

.six {
  font-family: Myriad Pro;
  margin: 1px;  
  font-size: 22px;
  background-color:#540f45;
  padding: 5px 5px 3px 4px;
  margin:4px;
}

http://jsfiddle.net/calder12/5crqT/