www.webdeveloper.com
Results 1 to 4 of 4

Thread: Expand div based on content.

  1. #1
    Join Date
    Feb 2006
    Posts
    169

    Expand div based on content.

    I have a table cell with the class, AdvLayoutRightNav. With in this cell I have a div with the ID eventInfo. Within this div, I have another div with the class info.

    So here is what it looks like without the content....

    Code:
    <td class=AdvLayoutRightNav><div id=eventInfo><div class=info></div></div></td>
    The issue that I am having is that I have a nowrap on the info div. This text over laps the eventInfo borders.

    How do I get the eventInfo to expand to accomodate the content of the info div?

    I have successful done it in IE7 and IE8 but not both at the same time.

    CSS of the DIVS below:
    Code:
    td.AdvLayoutRightNav{
    width:180px;
    padding:10px;
    border-right:1px solid #DC5034;
    padding-top:20px;
    }
    
    
    
    div#eventInfo{
    border:1px solid #3E3A36;
    border-top:10px solid #3E3A36;
    border-bottom:10px solid #3E3A36;
    background: #F0F0F0;
    padding:10px;
    line-height:18px;
    }
    
    
    
    div.info{
    padding-left:5px;
    color: #444444;
    }

  2. #2
    Join Date
    Apr 2008
    Posts
    59
    Possibly try?
    Code:
    height: auto;

  3. #3
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Try removing the red line. As long as you need to accommodate a div inside another div, the line-height for the container div looks useless to me.
    Code:
    div#eventInfo{
    border:1px solid #3E3A36;
    border-top:10px solid #3E3A36;
    border-bottom:10px solid #3E3A36;
    background: #F0F0F0;
    padding:10px;
    line-height:18px;
    }

  4. #4
    Join Date
    Feb 2006
    Posts
    169
    The issue I am having is with the width of the div not expanding. The hieght does expand.

    I tryed width:auto but it did not work in all browsers

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles