Forum Moderators: not2easy
I was hoping to get some help with a text flow problem - text doesn't wrap properly within a div.
The text is in mainText, which is inside the div called mainContent.
It appears that the browser thinks the div is a bit bigger that it actually is, because the text extends beyond the right-hand border before moving down to the next line.
I've tried all I can to eliminate this problem but I cannot find a solution, any help is much appreciated.
You can see a picture of the problem here:<>
---- CODE IS BELOW -----
CSS
...
#mainContent{width:798px;
min-height:500px;
height:auto !important; /*CSS min-height hack*/
height:500px;
margin:0 auto 0 auto;
background-image:url(../Images/gradientBackground.jpg);
background-repeat:repeat-x;
background-position:bottom left;
border-left: 1px solid #f4e19e;
border-right: 1px solid #f4e19e;
border-bottom: 1px solid #f4e19e;
clear:left;
}
#mainText{padding:0px 10px 0px 10px;
font: 1.1em "Myriad Pro", "Trebuchet MS", Arial, Helvetica, sans-serif;
width:778px;
text-align:left;
color: #000;*/
letter-spacing:normal;
}
...
HTML
...
<div id="mainContent">
<div id="mainText">
<div class="pageHeader">Strategic Planning</div>
<!-- <div style="width:250px; margin-top:40px; margin-right:20px; float:right;" class="quote">QUOTE</div> -->
<br />
<p>You can’t hit a target you can see. Aha! Consulting works with organisational through planning processes that
range form one day facilitated workshops to through processes that allow organisation to:</p>
<ul style="line-height:1.5em;">
<li>Review the external operating environment and consider its strategic impact on the organisation</li>
<li>Assess how the organisation is currently performing</li>
<li>Understand the views of staff, clients and external stakeholders</li>
<li>Confirm/review the potential directions/vision and opportunities for the future</li>
<li>Identify any potential barriers to achieving this direction</li>
<li>Identify the type of culture that will align to this direction</li>
<li>Articulate this direction in simple, accessible and measurable language</li>
<li>Set a clear pathway for the conversion of the plan into action</li>
</ul>
<p>Aha! Consulting is NOT an hired expert to tell you which way to go. Our expertise is in gathering the information and providing the process for
the organisation to have meaningful, informed discussions that lead to clear achievable outcomes.</p>
Click <a href="link.html">here </a>to download examples of strategic plans completed with the assistance of Aha! Consulting.
<br />
</div>
<div style="bottom:0px; height:296px; background-image:url(../Images/watermark.jpg); background-position:bottom right; background-repeat:no-repeat;"></div>
</div>
[edited by: SuzyUK at 10:03 am (utc) on Mar. 31, 2008]
[edit reason] no personal URI's please, see charter [/edit]
2. No personal links
3. I hacked in a thick, red border that I could actually see and am not replicating the problem described. The text is contained within the box on several versions of several browsers and at numerous displayed sizes.
4. Do you need the widths? Cutting them out will eliminate all the horizontal scrolling at narrow widths. (Perhaps margin: and padding: can be used if necessary.?)
5. Do you really need all that height stuff? Not saying that you don't. Just asking.
<style>
#mainContent {
/*
width:798px;
*/
/*
min-height:500px;
height:auto !important;
height:500px;
*/
margin:0 auto 0 auto;
background-image:url(../Images/gradientBackground.jpg);
background-repeat:repeat-x;
background-position:bottom left;
border: .2em solid red;
clear:left;
}#mainText{padding:0px 10px 0px 10px;
font: 1.1em "Myriad Pro", "Trebuchet MS", Arial, Helvetica, sans-serif;
/*
width:778px;
*/
text-align:left;
color: #000;
letter-spacing:normal;
}
</style>
