Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Can not fix div height

    Hi
    I'm facing problem with divs. I have a main div and with in this div I have some other divs.
    The problem is I'm unable to fix the height of inner div.
    Actually the inner div should take the height according to the content with in it.
    But in my case the div height is exceeding the content height.

    You can find the actual page here:
    http://www.ranganpalke.com/testpage.htm

    The problematic div is with yellow background color.
    The problem exists with IE7 and FireFox (IE6 shows as expected)

    Thank you very much
    (The html is as below)
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Page</title>
    <style type="text/css">
    body {
    margin:0px 30px 0px 30px;
    padding:0 ;
    background:#e5e5e5;
    color:#000;
    font-family:Verdana;
    font-size:13px;

    }
    #container {
    background:#ffffff;
    width:956px;
    border:1px solid #000;
    }
    #header {
    /*border-bottom:1px solid red;*/
    background:#CD0000;
    text-align:center;
    height:75px;
    width:956px;
    }
    #headersearchbox{
    position:absolute;
    left:300px;
    top:20px;
    width:400px;
    }
    .topbandgraybg
    {
    background-color:#e5e5e5;
    text-align:center;
    padding:5px 0px 5px 0px;
    width:956px;
    }
    #left {
    margin-left:-199px;/* must be 1 pixel less than width*/
    float:left;
    width:200px;/* must be same as left margin on #middle*/
    position:relative;
    left:-3px;/* line up exactly */
    display:inline;/* ie fix*/
    background:#ffffff;

    }

    #right {
    margin-right:-365px;/* must be 1 pixel less than width*/
    float:right;
    width:365px;/* must be same as right margin on #middle*/
    position:relative;
    right:-3px;/* line up */
    display:inline;/* ie fix*/

    }
    #viewquestionleft {
    margin-left:-239px;/* must be 1 pixel less than width*/
    float:left;
    width:240px;/* must be same as left margin on #middle*/
    position:relative;
    left:-3px;/* line up exactly */
    display:inline;/* ie fix*/
    background:#ffffff;

    }
    #viewquestionmiddle {
    background:#ffffff;
    margin-left:240px;
    margin-right:5px;
    margin-top:10px;
    }


    * html #left{margin-right:-3px;}/* 3 pixel jog*/
    * html #right{margin-left:-3px;}/* 3 pixel jog*/

    #middle {

    background:#ffffff;
    margin-left:200px;
    margin-right:365px;
    margin-top:10px;
    }
    * html #centre{overflow:hidden;float:left;width:100%;}
    * html .centre1{overflow:hidden;float:left;width:100%;background:#FFFFDB;border:solid 1px #e5e5e5;}
    * html #centre2{overflow:hidden;float:left;width:100%;background:#FFFFDB;border:solid 1px #e5e5e5;}
    * html .centre3{overflow:hidden;float:left;width:100%;background:#e5e5e5;}
    * html .centre4{overflow:hidden;float:left;width:100%;background:#ffffff;}
    * html .centre5{overflow:hidden;float:left;width:100%;background:#FFFFDB;border:solid 1px #A1BA5C;}

    * html #middle {height:1%;}
    #footer {
    width : 957px;
    clear:both;
    border-top:1px solid red;
    border-bottom:1px solid red;
    height:50px;
    background:#CD0000;
    text-align:center;
    color:White;
    font-weight:bold;
    }

    h1,h3,p {margin-top:0}
    .clearer{
    height:1px;
    overflow:hidden;
    margin-top:-1px;
    clear:both;
    }
    .fontwhite
    {
    color:White;
    }
    h4
    {
    text-align:center;
    margin-top:0px;
    }
    h5
    {
    margin-top:0px;
    margin-bottom:10px;
    text-align:left;
    padding-left:5px;
    }
    #leftcolumn, #rightcolumn,#middlecolumn
    {
    margin:0px 5px;
    }
    .categories
    {
    margin:5px;
    }
    .categoriesband
    {
    background-color:#73A3D4;
    width:100%;
    height:20px;
    }
    .imagestyle
    {
    float:left;
    padding-left:10px;
    }
    .questionbold
    {
    font-weight:bold;
    }
    #requestband
    {
    width:956px;
    background-color:#98CB6C;
    color:White;
    }
    #myrequesttab
    {
    border:solid 1px black;
    width:48%;
    background-color:#73A3D4;
    color:White;
    font-weight:bold;
    }
    #myresponsestab
    {
    border:solid 1px black;
    width:53%;
    background-color:#CACACA;
    color:White;
    font-weight:bold;
    }
    .viewquestionmiddle1 {
    background:#FFFFDB;
    margin-left:35px;
    margin-right:5px;
    margin-top:10px;
    }
    .viewquestionmiddle2 {
    background:#ffffff;
    margin-left:35px;
    margin-right:5px;
    margin-top:10px;
    }
    .viewquestionmiddle3 {
    background:#EBF1FF;
    margin-left:35px;
    margin-right:5px;
    margin-top:10px;
    }
    </style>
    </head>
    <body>
    <div id="container" style="border: solid 2px yellow;">
    <div id="viewquestionmiddle">
    <div id="viewquestionleft" style="left: -1px; top: 0px">
    <div id="leftcolumn" style="border: solid 1px red;">
    <div>
    <ul>
    <li class="questionbold">Which country is the burmuda part of?</li>
    </ul>
    <p style="padding-left: 20px;">
    <img src="images45/Q.gif" style="float: left;" />
    Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible
    Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible
    </p>
    <span style="padding-left: 90px;"><a href="#">See full response</a></span>
    </div>
    </div>
    </div>
    <div class="centre1" id="specialcase">
    <div class="viewquestionmiddle1">
    <div style="width: 50px; float: left;">
    <img src="images45/photo1.gif" /><br />
    Madonna Walker
    </div>
    <div style="float: left; padding-left: 20px; width: 550px;">
    <span class="questionbold">Which country is the Bermuda part of? Which country is the
    Bermuda part of? </span>
    <br />
    <span style="padding-left: 26px;">- 3months ago, Resolved question</span>
    </div>
    <div style="clear: left;">
    </div>
    </div>
    </div>
    </div>
    <div id="footer">
    © 2009 Copy Rights
    </div>
    </div>
    </body>
    </html>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Your query has been answered at http://www.codingforums.com/showpost...19&postcount=4

    PS: Follow http://www.codingforums.com/postguide.htm. Also, please edit your above post and add [CODE][/CODE] tags around your code.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Tags for this Thread

    Posting Permissions

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