Solved

Problem getting text to wrap properly with css

Posted on 2007-04-03
3
683 Views
Last Modified: 2012-06-21
I'm having a problem getting this text to wrap properly. If you take a look here:

http://www.cooltoneamps.com/rcc/

the Welcome text is going off the right edge. I have set up padding but it doesn't seem to effect it.
Here is the css:

#wrap p
{
      vertical-align: top;
      float: left;
      margin-top: 20px;
      margin-left: 35px;
      margin-right:20px;
      color: white;
      height: 225px;
      width: 425px;
      font-size: 120%;
      background-image: url(../img/welcomediv.gif);
      background-repeat: no-repeat;
      padding-left: 15px;
      padding-right: 10px;
      padding-top: 10px;
      text-indent: 15px;
      text-align: left;
}

And code:

<div id="wrap">
           <div id="slideshow">          
               <Bewise:FlashControl ID="FlashControl1" runat="server" Height="215px" MovieUrl="~/monoslideshow.swf" Scale="Noborder" Width="350px" WMode="Opaque">
               </Bewise:FlashControl>
           </div>
       
            <p>
            <em>Welcome</em><br /><br /><br />
            Reidsville Christian Church exists to share
            the good news of Jesus with people everywhere,
            to teach and strengthen the believers, to
            minister  to the needs of others, and to be
            a Christian influence in the community.
            </p>
           
           
      </div><!--wrap-->

0
Comment
Question by:rutledgj
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 10

Accepted Solution

by:
jinn_hnnl earned 150 total points
ID: 18845017
I would just do it like:
define a css class - start with a dot

.welcome
{
       vertical-align: top;
      float: left;
      margin-top: 20px;
      margin-left: 35px;
      margin-right:20px;
      color: white;
      height: 225px;
      width: 425px;
      font-size: 120%;
      background-image: url(../img/welcomediv.gif);
      background-repeat: no-repeat;
      padding-left: 15px;
      padding-right: 10px;
      padding-top: 10px;
      text-indent: 15px;
      text-align: left;
}

and in the aspx file:

..
            <div class="welcome">
            <em>Welcome</em><br /><br /><br />
            Reidsville Christian Church exists to share
            the good news of Jesus with people everywhere,
            to teach and strengthen the believers, to
            minister  to the needs of others, and to be
            a Christian influence in the community.
            </div>

Hope this help

JINN
0
 

Author Comment

by:rutledgj
ID: 18845103
Tried that but it didn't change anything:(
0
 
LVL 8

Assisted Solution

by:klykken
klykken earned 100 total points
ID: 18845372
Adding padding will add to the width of the box. Decrease the width of the element to compensate for left and right padding:

width: 400px;

-klykken
0

Featured Post

Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Word Press Fixes to Google Speed Test Issues 2 50
Search Box CSS Question 16 45
asp.net repeater 2 35
SQL query joining 6 tables in asp.net 4 27
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

739 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question