How to make div length elastic based on the text within it?

Hello,
I have some content in div tags.I want to make the div elastic based on the length of the text so that the text doesn’t spill out of the div tag.
In the following code I want the width of the div “wrapper” to be dynamic based on length of the content in the content placeholder.Any suggestions will be helpful.

I am attaching both the master page as well as the corresponding .css file.


<body>
    <form runat="server">
 
      <div><center>
<!-- Contains the navigation menu bar and the HTML with CSS classes applied to them-->
      </center>   </div>
 
     <div id="header">
	<h1>Welcome to the website</h1>
	<h2>Hello</h2>
</div>
 
 
 
 
          <div id="wrapper">
	         <div id="content">
		       <div id="posts">
			      <div class="post">
 
				        <div class="story">
 
 
                         <div id="default_div" runat="server">
                             <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
                             </div>
                             <asp:DataList ID="DataList_DataSetSearch" runat="server">
                   <ItemTemplate>
                    <asp:HyperLink ID="KnzdsDetail_HyperLink" runat="server" NavigateUrl='<%#Eval("datasetCode","~/Knzdsdetail.aspx?datasetCode={0}")%>'><%#Eval("datasetCode").ToString() + "-" + Eval("title").ToString()%></asp:HyperLink>
                   </ItemTemplate>
                  </asp:DataList>
                  <br />
 
                  <asp:DataList ID="DataList_LPISearch" runat="server">
                   <ItemTemplate>
                       <pre><%#Eval("lastName") %></pre>
 
                   </ItemTemplate>
                  </asp:DataList>
                  <br />
                  <asp:DataList ID="DataList_Content" runat="server">
                   <ItemTemplate>
                   <asp:HyperLink ID="KnzdContent_HyperLink" runat="server" NavigateUrl='<%#Eval("LinkAddress")%>'><%#Eval("pageName").ToString()%></asp:HyperLink>
 
                   </ItemTemplate>
                  </asp:DataList>
                             </div>
                             </div>
                             </div>
                                 <div id="links">
                             <asp:TextBox ID="Textbox_Search" runat="server" Width="60%"></asp:TextBox>
      <asp:Button ID="Button_Search" runat="server" onclick="Button_Search_Click" Text="Search" />
      <br />
      <br />
 
     <br />
     <br />
     <div id="weather">
      Weather
 
     </div>
     </div>
                             </div>
                             </div>
 
        <div class="clear">
        </div>
 
    <div class="footer">
 
    </div>
    </form>
</body>


body {
	margin: 0;
	padding: 0;
	background: #749865 url(img01.gif) repeat-x;
	font: normal small Arial, Helvetica, sans-serif;
	line-height: 1.8em;
	color: #838B91;
}
 
h1, h2, h3, h4, h5, h6 {
margin: 0;
	padding: 0;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	color: #468259;
 
	}
 
h2 {
	padding-left: 20px;
	background: url(img07.gif) no-repeat left center;
	font-size: 22px;
}
 
h3 {
	margin-bottom: 1em;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: .9em;
	font-weight: bold;
}
 
 
#wrapper 
{
    height:1500px;
 
	background: #FFFFFF url(img04.gif) repeat-x left bottom;
}
 
 
#content {
	width: 750px;
	margin: 0 auto;
}
 
/* Posts */
 
#posts {
	float: right;
	width: 510px;
}
 
#otherposts
{
    	width: 625px;
}
 
#posts .post {
	padding-bottom: 30px;
}
 
#posts .story {
	padding: 15px 20px 0 20px;
	background: url(img10.gif) repeat-x
}
 
#posts .meta {
	padding: 5px 0 0 20px;
	background: url(img03.gif) repeat-x;
}
 
#posts .meta p {
	margin: 0;
	line-height: normal;
	font-size: smaller;
}
 
#posts ul {
	list-style: url(img12.gif);
}
 
#posts ul li {
}
 
 
#links {
	float: left;
	width: 220px;
}
 
#links ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
 
#links li ul {
	padding: 15px 20px 30px 20px;
	background: url(img10.gif) repeat-x
}
 
#links li li {
	padding: 3px 0;
	background: url(img03.gif) repeat-x left bottom;
}
 
#links li a {
	background: none;
}
 
#links li i {
	font-size: smaller;
}
 
#header {
	width: 754px;
	height: 247px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding-top: 20px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
}
 
#header h1 {
	float: left;
	width: 104px;
	height: 110px;
	background: url(img05.jpg) no-repeat;
	line-height: 32px;
	font-size: 30px;
	z-index:-1;
	padding-top: 110px;
	padding-right: 100px;
	padding-bottom: 0;
	padding-left: 20px;
 
}
 
#header h2 {
	float: right;
	width: 494px;
	height: 34px;
	padding: 180px 20px 0 0;
	background: url(img06.jpg) no-repeat;
	text-transform: lowercase;
	text-align: right;
	letter-spacing: -1px;
	font-size: 22px;
	color: #FFFFFF;
	z-index:-1;
 
}
 
 
#weather
{
width:200px;
padding:10px;
border:2px solid gray;
margin:0px;
}
 
 
 
#footer {
	padding: 40px 0 60px 0;
	background: url(img08.gif) repeat-x;
}
 
#footer p {
	width: 750px;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #A6C09B;
}
 
#footer a {
	background: none;
	font-weight: bold;
	color: #A6C09B;
}
 
 
 
 
#nav
{
	height:48px;
	width: 950px;
	padding:20;
	margin:0;
	position:inherit;
	list-style:none;
	z-index:500;
	float: none;
}
 
#nav li.top {display:block; float:left;height: 60px;padding: 0 0 0 2px;background:url(img02.gif) no-repeat;}
 
#nav li a.top_link {display:block; float:left; height:36px;color:#ccc; text-decoration:none; 
 
width: 115px;color: #E1E9E2; padding: 20px 20px 0 20px; cursor:pointer;font: normal 
 
1.6em Georgia, "Times New Roman", Times, serif;letter-spacing: -1px;}
 
#nav li a.top_link span {float:left; display:block;height:36px;}
 
#nav li a.top_link span.down {float:left; display:block; height:36px; }
 
#nav li a.top_link:hover {
    border-bottom: 4px solid #5A7C50;
	text-decoration: none;
	color: #FFFFFF;
}
 
#nav li a.top_link:hover span {border-bottom: 4px solid #5A7C50;
	text-decoration: none;
	color: #FFFFFF;}
#nav li a.top_link:hover span.down {border-bottom: 4px solid #5A7C50;
	text-decoration: none;
	color: #FFFFFF;}
 
#nav li:hover > a.top_link 
{
    border-bottom: 4px solid #5A7C50;
	text-decoration: none;
	color: #FFFFFF;}
#nav li:hover > a.top_link span {border-bottom: 4px solid #5A7C50;
	text-decoration: none;
	color: #FFFFFF;}
#nav li:hover > a.top_link span.down {border-bottom: 4px solid #5A7C50;
	text-decoration: none;
	color: #FFFFFF;}
 
/* Default list styling */
 
#nav li:hover {position:relative; z-index:200;}
 
/* keep the 'next' level invisible by placing it off screen. */
#nav ul, 
#nav li:hover ul ul,
#nav li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; 
 
list-style:none;}
 
#nav li:hover ul.sub
{text-align:left;left:0; top:56px;background:#DCE5DD url(img02.gif) no-repeat; padding:3px; 
 
border:1px solid #5A7C50; white-space:nowrap; width:150px;height:auto; z-index:300;}
 
#nav li:hover ul.sub li
{display:block; height:20px; width:150px;position:relative; float:left;  font-weight:normal;}
 
#nav li:hover ul.sub li a
{display:block; height:20px;line-height:20px; width:150px;text-indent:5px; color:#000; 
 
text-decoration:none;}
 
#nav li ul.sub li a.fly
{background:url(arrow.gif) 120px 7px no-repeat;}
 
#nav li:hover ul.sub li a:hover 
{background:#749865; color:#fff;}
 
#nav li:hover ul.sub li a.fly:hover
{background:#749865 url(arrow_over.gif) 120px 7px no-repeat; color:#fff;}
 
#nav li:hover ul li:hover > a.fly {background:#749865 url(arrow_over.gif) 120px 7px no-repeat; 
 
color:#fff;} 
 
#nav li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul
{left:140px; top:-4px; background:#DCE5DD; padding:3px; border:1px solid #5A7C50; 
 
white-space:nowrap; width:150px; z-index:400; height:auto;}
 
#legal {
	margin: 0 auto;
	text-align: right;
	font-size: 12px;
}
 
#brand {
	margin: -35px auto 0 auto;
	padding: 10px 0 0 35px;
	background: url(img09.gif) no-repeat left top;
	letter-spacing: -1px;
	font-size: 24px;
}
 
 
 
.ModalPanel
{
    background: #fff;
    width: 800px;
    height: 400px;
    margin: 800px,20px,10px,20px;
    padding-top: 25px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    border: solid 1px #3a6eb3;
}
 
 
.modalBackground
{
    background-color:Gray;
    filter:alpha(opacity=70);
    opacity:0.7;
}

Hi,

Overflow other than visible causes a parent element to contain its floated children and is an easy way to clear child floats if you don’t want visible overflow. As the element has no height the content won’t be clipped but would of course be clipped at the width if you had anything sticking out.

If you need visible overflow you would need to use one of the other clearing methods mentioned in the css FAQ on floats.

Floats are basically removed from the flow and a parent element that holds only floats will have zero height and show no background unless you clear the floats using a suitable clearing method.

If you have content after the float but before the closing container of the parent you can use that element to clear the floats and regain control of the flow by setting clear:both to that element. If you have no such element you can use overflow:hidden or the “clearfix” technique mentioned in the faq.

Thanks a bunch! It worked :slight_smile:
However,I am not sure if I understand how the issue was resolved.Doesn’t overflow:hidden mean that the overflowing text will be clipped?

Thanks for the reply. :slight_smile:
I want the div,having the id,wrapper to expand itself automatically based on the text contained within it. I removed the height from the wrapper div but that didn’t work. The issue is that that the white background specified in the wrapper id is not showing all across.It’s being overridden by the body’s green background. Is it because of the float specified in the posts id?

Hi,

You’ll have to be more specific as that sounds rather a strange thing to do. :slight_smile:

If you want the width of the element to be as wide as the text it holds then what happens when you have a paragraph of text. It will be half a mile wide.

If you float an element without a width then the float will be as wide as the text only. It will only wrap when it reaches its containing blocks edge.

I feel this is unlikely to be what you want and guess you have something else in mind.

Do you have a drawing of what you are trying to achieve or perhaps describe it in a little more detail so we can see what you want.

If you have a link to the site it may help and if you post more html then post from view source in the browser and not the asp code.:slight_smile:

Are you talking about the height? Sorry I thought you meant width.

If you are talking about the height then remove the height from #wrapper and then you just need to clear the floats to allow the background to expand with content.

e.g.


#content {
    width: 750px;
    margin: 0 auto;
  [B]  overflow:hidden;/* clear floated children*/
[/B]}

If you need visible overflow then use one of the other clearing methods mentioned in the css faq on floats (see the link to the faq in my sig).

If you mean something else then let me know and I’ll take another look (tomorrow as I must sleep now ;)).

Thanks for the replies. I guess I have to go through the documentation on float once again!