asked on

DIV nowrap

Hi There,
I know that some guys around have asked the same question, but the answers didn't fit or wasn't a solution for my problem. I have the same question which: how to add the NOWRAP property to the<div>. Here is the CSS class I use as well as the code:

CSS:
.com_content{
      background: #F6F5EA;
      border: solid 1px #E3E0BF;
      border-top: solid 1px #FFFFFF;
      color: #5B431E;
      margin-bottom: 15px;
      padding: 5px;
      font: bold 16px;
      font-family: Arial, Helvetica, sans-serif;
}

PHP Code:
$visitors_comments .= "<div align='left' style='clear:both' class='comment_title'><div style='float:right' class='comment_title'><img src='images/comments_bullet.jpg'> ".$c_row['title']."</div>Written by . ".$c_row['name']."$da_f</div><div class='com_content' style='white-space: nowrap;'>".nl2br($c_row['comment'])."</div>";

Thanks in advance
Best Regards,
Shopies

ASKER CERTIFIED SOLUTION

Mark Steggles

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Shopies

ASKER

Hi Steggs,
I tried this but it didn't work with me.

Regards,

Mark Steggles

You currently have it as an inline style but you could simply add it to your class

.com_content{
background: #F6F5EA;
border: solid 1px #E3E0BF;
border-top: solid 1px #FFFFFF;
color: #5B431E;
margin-bottom: 15px;
padding: 5px;
font: bold 16px;
font-family: Arial, Helvetica, sans-serif;
white-space: nowrap;
}

Shopies

ASKER

I added white-space:nowrap; as you mentioned, but it's still not working. Is there anything you require as the error might be some where else?!!

regards.

Mark Steggles

Strange, white-space:nowrap can be applied to block elements, and div is a block element. What browser are you viewing in? Although support is good, ie6 ff, opera etc

Shopies

ASKER

I'm using IE6+ .

Should I define the width of the DIV?!!
As you could see that this DIV is inside another DIV which is using different CSS class, could this be the problem?!!
Could the problem exists in the HTML?!! Do you want me to post it as well?!!

regards,

Mark Steggles

Setting the width shouldnt make a difference.

You could try adding the whitespace:nowrap; to the containing div aswell although I dont think that will help

sure, post the code

Regards

Shopies

ASKER

Okay,
HTML CODE:

                  <div class="comments_head" style="clear:both">
                  <div style="float:left">
                  Posts num : [ {wr_num} ]

                  </div>
                  Posts

                  </div>
                  <div class="comments_box">

                  {comments}
----END OF HTML CODE

----CSS CODE:
.comments_box{
      overflow:auto;
      border:1px solid #DEDEDE;
      height:170px;
      float: right;
      width: 99%
      white-space: nowrap;
      background: #FFFFFF;
      padding: 3px;
}

.comment_title{
      background: #F6F5EA;
      border: solid 1px #E3E0BF;
      border-top: solid 1px #FFFFFF;
      color: #A38E4F;
      font: 16px;
      font-weight: bold;
      padding: 3px;
      width: 100%;
      font-family: Arial, Helvetica, sans-serif;
}

.com_content{
      background: #F6F5EA;
      border: solid 1px #E3E0BF;
      border-top: solid 1px #FFFFFF;
      color: #5B431E;
      margin-bottom: 15px;
      padding: 5px;
      width: 99%;
      font: bold 16px;
      font-family: Arial, Helvetica, sans-serif;
}

.com_writer{
      background: no-repeat right;
      border-bottom: solid 1px #E3E0BF;
      padding: 3px;
      padding-right: 20px;
      white-space: nowrap;
      padding-top: 10px;
}

.comments_head{
      background: #F7F3DD;
      border: solid 1px #EDE2B7;
      border-bottom: solid 3px #EDE2B7;
      color: #6A542D;
      padding: 2px;
      width: 99%;
      float: right;
      font-family: Arial, Helvetica, sans-serif;
      font-weight: bold;
      white-space: nowrap;
      vertical-align: 0;
}
-----END OF CSS CODE

-----PHP CODE:
$visitors_comments .= "<div align='left' style='clear:both' class='comment_title'><div style='float:right'><img src='images/comments_bullet.jpg'> ".$c_row['title']."</div>".$allow_email."<span class='gsm_text'>بقلم . ".$c_row['name']."$da_f</div><div class='com_content'>".$c_row['comment']."</div>";
------END OF PHP CODE

Hopes that help.
Regards,
Shopies

                  </div>

Shopies

ASKER

Okay thanks, I have solved the problem.

Regards,
Shopies