Need help getting this text to wrap around a box

Hi, I’m trying to get the text to wrap around TEXT BOX and no matter how I play around with it (float, absolute, negative margins etc.) I can’t get it to work. Help anyone? Thanks!

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>TEXT WRAP</title>
</head>
<body>

<DIV STYLE="background-color: ALICEBLUE; color: BLACK; text-align: JUSTIFY; font-family: Helvetica, Arial, sans-serif;">

<table style="float: right; margin-top: 300px; margin-left: 30px; margin-bottom: 30px; background-color: TAN; width: 400px; text-align: left;"
border="10" cellpadding="30" cellspacing="0">
<tbody>
<tr>
<td>

<!-- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ TEXT BOX \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ -->
<table align="center" style="background-color: BEIGE; color: BLACK;
margin-left: -10px; margin-top: -10px; margin-right: -10px; margin-bottom: -10px;
font-family: Times New Roman, Times, serif; width: 370px; height: 168px; text-align: left;"
border="0" cellpadding="10" cellspacing="0">
<tbody>
<tr>
<td>

<span style="font-size: 26px;">
TEXT<br>
TEXT<br>
TEXT<br>
TEXT<br><br>
</span>

<span style="font-size: 17px;">
TEXT<br>
TEXT<br>
TEXT<br>
TEXT<br><br>
</span>

<span style="font-size: 14px;">
TEXT<br>
TEXT<br>
TEXT<br>
TEXT<br><br>
</span>

<span style="font-size: 10px;">
TEXT<br>
TEXT<br>
TEXT<br>
TEXT<br><br>
</span>

</td>
</tr>
</tbody>
</table>

</td>
</tr>
</tbody>
</table>


<!-- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ WRAPPING CONTENT \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ -->
QUISQUE SED FELIS. ALIQUAM SIT AMET FELIS.
<br>
<br>
Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula.
<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. <br><br>

Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. <br><br>

Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit.
<br>
<br>

<div style="text-align: center;">
<i>
<span style="font-size: 22px; color: CRIMSON; font-weight: bold; font-family: Times New Roman, Times, serif;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br>
Quisque sed felis. Aliquam sit amet felis.<br>
Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum<br>
Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula.<br>
</span>
</i>
</div>

<br>
<br>
<i>
<font style="font-size: 26px; color: BLACK; font-weight: bold; font-family: Times New Roman, Times, serif;">
Semper Felis
<br>
</font>
</i>

</div>

</body>
</html>

Your code is invalid, which is your first problem. Your second problem is the use of nested one-cell tables, center and font tags, etc. This is what your HTML must look like:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
 <head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>TEXT WRAP</title>

  <style type="text/css">
   #textbox {
    float: right;
   }
  </style>
 </head>
 <body>
  <div>
   <div class="textbox">
    <ul>
     <li>TEXT<br>
     <li>TEXT<br>
     <li>TEXT<br>
     <li>TEXT</li>
    </ul>

    <ul>
     <li>TEXT</li>
     <li>TEXT</li>
     <li>TEXT</li>
     <li>TEXT</li>
    </ul>

    <ul>
     <li>TEXT</li>
     <li>TEXT</li>
     <li>TEXT</li>
     <li>TEXT</li>
    </ul>

    <ul>
     <li>TEXT</li>
     <li>TEXT</li>
     <li>TEXT</li>
     <li>TEXT</li>
    </ul>

    <ul>
     <li>TEXT</li>
     <li>TEXT</li>
     <li>TEXT</li>
     <li>TEXT</li>
    </ul>
   </div>

   <h1>QUISQUE SED FELIS. ALIQUAM SIT AMET FELIS.</h1>
   <p>Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula.</p>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros.</p>
   <p>Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis.</p>
   <p>Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit.</p> 
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula.</p>
   <p>Semper Felis</p>
  </div>
 </body>
</html>

Close your div around the box -> open a new one and put the textbox div inside of that div -> adjust your styles and put them in an external css… you have way too many lol…


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>TEXT WRAP</title>
</head>
<body>
 

<DIV STYLE="background-color: ALICEBLUE; color: BLACK; text-align: JUSTIFY; font-family: Helvetica, Arial, sans-serif;"> 
<!-- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ WRAPPING CONTENT \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ -->
QUISQUE SED FELIS. ALIQUAM SIT AMET FELIS.
<br>
<br>
Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula.
<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. <br><br>
 <DIV STYLE="background-color: ALICEBLUE; color: BLACK; text-align: JUSTIFY; font-family: Helvetica, Arial, sans-serif;">
 
<table style="float: right; margin-left: 30px; margin-bottom: 30px; background-color: TAN; width: 400px; text-align: left;"
border="10" cellpadding="30" cellspacing="0">
<tbody>
<tr>
<td>
 
<!-- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ TEXT BOX \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ -->
<table align="center" style="background-color: BEIGE; color: BLACK;
margin-left: -10px; margin-top: -10px; margin-right: -10px; margin-bottom: -10px;
font-family: Times New Roman, Times, serif; width: 370px; height: 168px; text-align: left;"
border="0" cellpadding="10" cellspacing="0">
<tbody>
<tr>
<td>
 
<span style="font-size: 26px;">
TEXT<br>
TEXT<br>
TEXT<br>
TEXT<br><br>
</span>
 
<span style="font-size: 17px;">
TEXT<br>
TEXT<br>
TEXT<br>
TEXT<br><br>
</span>
 
<span style="font-size: 14px;">
TEXT<br>
TEXT<br>
TEXT<br>
TEXT<br><br>
</span>
 
<span style="font-size: 10px;">
TEXT<br>
TEXT<br>
TEXT<br>
TEXT<br><br>
</span>
 
</td>
</tr>
</tbody>
</table>
 
</td>
</tr>
</tbody>
</table>
 
</div>
Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. <br><br>
 
Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit.
<br>
<br>
 
<em><center>
<font style="font-size: 22px; color: CRIMSON; font-weight: bold; font-family: Times New Roman, Times, serif;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br>
Quisque sed felis. Aliquam sit amet felis.<br>
Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum<br>
Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula.<br>
</font>
</center></em>
 
 
<br>
<br>
<em>
<font style="font-size: 26px; color: BLACK; font-weight: bold; font-family: Times New Roman, Times, serif;">
Semper Felis
<br>
</font>
</em>
 
</td>
</tr>
</tbody>
</table>
 
</div>
 
</body>
</html>

C. Ankerstjerne, I don’t know whose webpage you’re designing but it wasn’t mine lol. :lol:

EDIT:

Okay, anarch’s code works to the extent that the location of TEXT BOX is relative to the WRAPPING CONTENT. He can be forgiven that I didn’t explain that TEXT BOX needs to be absolutely positioned 300px from the top . . . and content flowing around it without adjusting its top: 300px; position.

WRAPPING CONTENT is fluid, you see, and for that reason I can’t have TEXT BOX moving up and down relative to it. I don’t even know if this can be done.

Could you please explain why the box must be 300px down? That may (or may not, for that matter) have a bearing on the approach taken.

//edit: Why the totally fluid width? Wide columns of text are difficult to read, and especially so for people with reading disabilities. --gt

cheers,

gary

Hi,

That code is a bit of a blast from the past :slight_smile:

You can’t use absolute positioning because that removes it from the flow and the flow doesn’t care about absolute elements. You could do something similar with a floated sandbag technique as follows.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
    margin:0;
    padding:0
}
p{margin:0 0 1em}
body {
    padding:10px;
}
body {
 background: =#fff;
    color:#000;
    text-align: center;
    font-family: Helvetica, Arial, sans-serif;
}
#outer {
    background:#f0f8ff;
    color:#000;
    text-align:justify;
    overflow:hidden;
}
.textboxwrap {
    margin:0 0 30px 30px;
    background:#d2b48c;
    width: 400px;
    text-align:left;
    padding:20px;
    border:10px outset #ccc;
    float:right;
    clear:right;
}
.textbox {
    background:#f5f5dc;
    color:#000;
    height: 400px;
    text-align: left;
    font-family: Times New Roman, Times, serif;
    overflow:auto;
    padding:10px;
}
.sandbag {
    width:1px;
    float:right;
    overflow:hidden;
    height:300px;
}
#footer {
    font-size: 22px;
    color:#f00;
    font-weight:bold;
    font-family:Times New Roman, Times, serif;
    text-align:center;
}
</style>
</head>
<body>
<div id="outer">
    <div class="sandbag"></div>
    <div class="textboxwrap">
        <div class="textbox">
            <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros.</p>
        </div>
    </div>
    <div class="main">
        <p>Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
        <p>Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
        <p>Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
        <p>Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
        <p>Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
        <div id="footer">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br>
                Quisque sed felis. Aliquam sit amet felis.<br>
                Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum<br>
                Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula.<br>
            </p>
        </div>
    </div>
</div>
</body>
</html>


However by placing your textbox at 300px from the top you are assuming that all users have tall monitors so you may force a scroll when none may be required (unless all your pages are long).

Unfortunately its not possible to have the text box automatically always at the bottom of the content which is what I expect you were aiming for. Wouldn’t it have been better to have it float at the top as per normal?

Paul U Da Man! lol Oh man. Wow. And I just tested it by adding some stuff and the box stayed put.

Now, in answer to your blast from the past . . . it is indeed. This is a Google Site (no not mine, I’m doing it for someone else) and so now you know why my original code has a conspicuous absence of anything in the header heh he.

I’m going to try to walk this back to HTML 1 with as much of your CSS inline as I can get away with, but I can’t thank you enough for just giving me the raw materials to work with. Jesus, I even experimented with a 1 X 300 transparent gif :nono: spacer. Talk about dark ages lol.

It will either take as inline tables or it won’t. There’s only so much I can do without CSS!!

ahhh . . . and it works in Explorer. Sweet Paul. You rule man. :smiley: wish me luck.

Hi Paul,

Just about the time I thought of a spacer float, you posted your sandbag example. Great Minds™ and all that. :rolleyes:

I’d still recommend putting bounds on the width, e.g.

<!DOCTYPE html>

<html>
  <head>

    <meta http-equiv="content-type"
	  content="text/html; charset=utf-8" />

    <title>test doc</title>

    <style type="text/css">
html, body {
    margin: 0;
    padding: 0;
    }

body {
    background-color: #eed;
    color: black;
    font: 100%/1.25 serif;
    }

p {
    font-size: 1em;
    }

#wrapper {
    margin: 0 auto;
    max-width: 1200px;
    min-width: 720px;
    padding: 1px 1.25em;
    }

#sandbag {
    float: right;
    margin: 0;
    width: 1px;
    height: 300px;
    overflow: hidden;
    visibility: hidden;
    }

#sidebox {
    border: 5px outset gray;
    clear: right;
    float: right;
    margin-left: 1.25em;
    width: 350px;
    padding: 1.25em;
    }

    </style>
  </head>

  <body>
    <div id="wrapper">
      <p id="sandbag">.</p>
      <div id="sidebox">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
	  tincidunt turpis sed nunc rutrum pellentesque. Proin
	  vestibulum justo ut nisl facilisis fermentum. Nam mollis
	  venenatis.
	</p>
      </div>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In justo
	sapien, sagittis quis aliquet ac; suscipit ac sem. Vestibulum ante
	ipsum primis in faucibus orci luctus et ultrices posuere cubilia
	Curae; In euismod massa vitae elit faucibus pretium. Donec venenatis
	auctor urna; sed sollicitudin risus dapibus et. Nam mollis lectus ut
	nibh placerat vehicula. Aenean turpis sapien; malesuada id mattis
	vitae, accumsan non mi. Proin in magna metus, a imperdiet
	lacus. Pellentesque porta ullamcorper vulputate! Cras metus orci,
	dignissim ut mattis ut; malesuada nec ante. Nam egestas, elit et
	rutrum tincidunt; nisi dui interdum orci, sit amet pellentesque nisl
	risus ac mauris. Sed quam ante, interdum ut tincidunt id; venenatis at
	leo. Ut mi turpis, sollicitudin in euismod in, suscipit eu mauris. Nam
	in nisi ut purus semper vehicula! Cras ac turpis ut turpis lacinia
	posuere. Aliquam rutrum dolor vel ipsum accumsan cursus. Donec id nibh
	vitae mauris mollis bibendum sit amet in nulla. Duis suscipit leo at
	dui ullamcorper tincidunt.
      </p>

      <p>Cras viverra tellus ante. Praesent molestie sem risus, egestas
	condimentum dolor. Maecenas sed elementum tortor? Cras in dolor id
	odio congue tincidunt? Mauris porta luctus quam, et convallis nulla
	cursus vitae. Maecenas sollicitudin suscipit lorem volutpat porttitor?
	Nulla consectetur massa pulvinar nulla consectetur eget varius lacus
	faucibus? Pellentesque eget elit mattis diam elementum mattis a et
	ante. Pellentesque nec diam quis magna vehicula molestie? Nunc commodo
	tempus velit nec mollis? Fusce quis lobortis dolor. Duis sem nulla,
	porta a scelerisque consequat; feugiat nec massa. Nullam semper porta
	porttitor.
      </p>

      <p>
	Sed sed velit sit amet mi sollicitudin sagittis eget accumsan metus?
	Praesent suscipit sollicitudin vestibulum. Morbi pulvinar gravida
	sagittis. Curabitur eu erat dolor. Nullam mattis, tellus eu posuere
	varius, tortor diam consectetur tortor, vitae interdum erat sem a
	enim. Pellentesque non mattis lectus. Nullam at diam orci. Nam eget
	augue eu erat aliquet scelerisque. Sed volutpat adipiscing arcu in
	ullamcorper. Praesent eget mauris nec magna convallis facilisis! Morbi
	laoreet consectetur pharetra. Maecenas nulla diam, posuere vitae
	adipiscing eget, blandit sed est.
      </p>
    </div> <!-- end wrapper -->
  </body>
</html>

cheers,

gary

Nice to see you around Gary and of course you are right about the width :slight_smile:

Hi again Paul, one quick question: What sexy thing are we doing with

border: 10px outset #ccc;

? I like it, I just want to know what it is lol.

Then, the last remaining issue I’m having with my Headerless Wonder is an obvious overflow issue with the TEXTBOX (will become apparent when viewed in any browser).

I’m not inclined to advise him to allow unlimited height of the TEXTBOX as its content increases — as Gary Turner points out, it’s problematic in a world of landscape-oriented widescreen monitors to let the thing drop endlessly beneath the viewport — nonetheless, I’d like to give him both options for this box (including the obligatory padding so it’s not hitting the frame) to use as he sees fit:

  1. One, a scrollbar-visible fixed-height box
  2. One, a scrollbar-hidden box — with undefined/auto-height — that vertically expands/collapses like a table cell relative to the content of the cell

Thanks again Paul. Man what a pita this has been :lol:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>TEXT WRAPPING TABLES</title>
</head>
<body>

<div style="overflow: hidden; background: ALICEBLUE; color: BLACK; text-align: justify; font-family: Helvetica, Arial, sans-serif;">

<div style="overflow: hidden; width: 1px; height: 300px; float: right;">
</div>

<div style="clear: right; float: right; width: 400px; border: 10px outset #ccc; margin: 20px 0px 30px 30px; background: TAN; text-align: left; padding: 20px;">
<div style="overflow: auto; background: BEIGE; height: 400px; padding: 10px; color: BLACK; text-align: left; font-family: Times New Roman, Times, serif;">

<span style="font-size: 26px;">
TEXT<br>
TEXT<br>
TEXT<br>
TEXT<br><br>
</span>

<span style="font-size: 17px;">
TEXT<br>
TEXT<br>
TEXT<br>
TEXT<br><br>
</span>

<span style="font-size: 14px;">
TEXT<br>
TEXT<br>
TEXT<br>
TEXT<br><br>
</span>

<span style="font-size: 10px;">
TEXT<br>
TEXT<br>
TEXT<br>
TEXT<br><br>
</span>

</div>
</div>

Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit<br><br>

Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit<br><br>

Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit<br><br>

Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit

<div style="text-align: center; margin-top: 30px; margin-bottom: 30px;">
<span style="font-size: 22px; font-style: italic; font-weight: bold; color: CRIMSON; font-family: Times New Roman, Times, serif;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br>
Quisque sed felis. Aliquam sit amet felis.<br>
Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum<br>
Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula.
</span>
</div>

<span style="font-size: 26px; font-style: italic; font-weight: bold; color: BLACK; font-family: Times New Roman, Times, serif;">
Semper Felis
</span>

</div>

</body>
</html>

That was just to match your old style table borders and outset is just one of the values you can use for a border. You can read up on all the others here.

I’d like to give him both options for this box (including the obligatory padding so it’s not hitting the frame) to use as he sees fit:

To make some extra room you could just put a border around the box in the same colour as the background.

e.g.


    <div style="overflow: auto;[B]border:10px solid beige;border-right:none;[/B] background: BEIGE; height: 400px; padding: 10px; color: BLACK; text-align: left; font-family: Times New Roman, Times, serif;"> <span style="font-size: 26px;"> TEXT<br>

One, a scrollbar-visible fixed-height box

That’s what you have now.:slight_smile:

One, a scrollbar-hidden box — with undefined/auto-height — that vertically expands/collapses like a table cell relative to the content of the cell

Just remove the “overflow:auto” and the “height” and the box will expand with content. You could set a min-height to have an initial height (but won’t work in IE6)

Awesome Paul. Just awesome. Thanks for that excellent Borders link. I don’t suppose you have some good Sitepoint guides for gradient fading? I’ve been meaning to master that for the longest time, so shoot me some links if you have tutorials that are favorites of yours. Thanks again Paul.

s

If you are talking about css3 gradients then just play about with one of the many generators out there.