View Full Version : A box that changes size depending on the size of a text

05-26-2010, 03:44 AM
Hi, I'm new to HTML coding and I would like to know how could we do that a box changes size depending on the text size.

The idea is that each day, there is a new message in a box (for example, quotes, news, etc.) However, I would like that box to be bigger if there is more text, or smaller if the text takes less space.


05-26-2010, 09:56 AM
By default elements expand to contain their content.

Unless you constrain the height of an element it will grow or contract in height to contain the text within it.

All you need do is keep out of the way.

That probably means don't set the height of any of the elements containing the text.

05-26-2010, 07:30 PM
you can use divs

05-26-2010, 08:07 PM
Thanks, but do you know how to make that the table adjusts to the text too? I've tried to take out the height, but it just took out the text. Here is the code I'm using :

<iframe style="DISPLAY:BLOCK" frameBorder="0" width="300" scrolling="no" src="[link]" name="I1">

When I keep the table, I have to click and hold on the text, then drag down to see the following text.

Thanks for your first reply.

05-26-2010, 08:54 PM
can you be more specific??

05-27-2010, 05:44 AM
I just want the table to get bigger/smaller depending on the text that it is inside. The text changes everyday.

<td colSpan="2">
<div style="border: 1px solid #999999; padding: 3px; background: white">
<iframe style="DISPLAY: block" frameBorder="0" width="297" scrolling="no" src="[link]" name="I1">

05-27-2010, 11:18 AM
Maybe try this, its an idea


<style type="text/css">
width: 349px;
background-color: #FFF;
margin: 0px;
padding left: 1em;
padding-top: 1em;
-moz-border-radius: 10px; <!-- Gives you rounded corners -->
-webkit-border-radius: 10px; <!-- Gives you rounded corners -->


<!-- you can change the pixels and name to whatever you want -->
padding-left: 18px;
padding-right: 18px;
padding-top: 18px;
padding-bottom: 18px;



<table width="300"> <!-- This allows you to control the width of the table. when you put content in it, it will only go to the width you specify but it will continue down for as much information as you put in it :) -->
<div id="rBox">
<p><h1>your information goes here ;) </h1></p>

Hopefully that helps.
Here is the youtube tutorial

Let me know if that works or not, I just wrote it by hand on here.

05-27-2010, 03:17 PM
or simplier like this

<td colspan="2">
<div style="border: 1px solid #999999; padding: 3px; background: white">
<p>your info</p>

the div will go bigger or smaller depending on the content. and for every content paragraph use <p></p>

You should make a css file for your styles instead of writing them in your html

here's some useful info (http://www.w3schools.com/css/css_howto.asp)

as simple as that

05-27-2010, 07:19 PM
Thanks guys, ill try that =)

05-28-2010, 05:39 AM
Hey guys. I've found the solution.. All i had to do is to delete the height ... However, because the text inside the box is coming from another website, the code I was given always puts the height back.. So I must always delete the height.. Is there a way to stop that ''height addition'' each time?

05-29-2010, 02:29 AM
Hi, previous question has been fixed. I would like to know if there is a way to only put 1 line of quote, for example.

I use <iframe src=[link of .text document]> </iframe>. However, it doesnt work... Is there a code so that Frontpage will only take 1 line at a time of the text document?

Text document is made like this :

[1st line] Hi, my name is bob,
[2nd line] Hello, my name is John,
[3rd line] Hi, my name is Julie,

The concept is, that each refresh, the box shows 1 line (randomly). So when u enter the website, it shows [1st line], if u refresh, it can show [3rd line].