Results 1 to 8 of 8

Thread: css float div height problem

  1. #1
    Join Date
    Feb 2010
    Location
    Calcutta, India
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default css float div height problem

    I make 3 child div within a parent div. Like this:

    <div id="wrapper">
    <div id="inner-left"></div>
    <div id="inner-middle"></div>
    <div id="inner-right"></div>
    </div>

    I want the div 'inner-middle' for content and other two for b g image with repeat y .

    The problem is how can I make the other two divisions automatically take the the height of the 'inner-middle' division? (the height of the div 'inner-middle' will change with the content)

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Let's see the css you are using, include the background images (put up a demo of the problem). The solution will probably be to clear the float(s) one way or another. There are various ways, one that often works in situations like this is to give the floated division(s):

    Code:
    overflow: hidden;
    But, as I say, to be sure we would need to see the current css in action. So, if you want more help:

    Please post a link to a page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Feb 2010
    Location
    Calcutta, India
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I haven't uploaded any page but I can give you the css coding

    wrapper
    {
    width: 90%;
    margin: 0 auto 0 auto;

    }

    #inner-left
    {
    float:left;
    width:25px;
    background-image:url(../images/wrapper-image-left.jpg);
    background-repeat:repeat-y;
    height:100%;
    }


    #inner-middle
    {
    width: 90%;
    background-color:#FFFFFF;
    padding: 5px;
    text-align: left;
    float:left;
    }

    #inner-right
    {
    float:left;
    width:25px;
    background-image:url(../images/wrapper-image-right.jpg);
    background-repeat:repeat-y;
    height:100%;
    }

    Thanks

  4. #4
    Join Date
    Sep 2008
    Location
    Seattle, WA
    Posts
    135
    Thanks
    1
    Thanked 11 Times in 11 Posts

    Default

    Here's a good tutorial on the way to do it for cross-browser compatibility.

    http://matthewjamestaylor.com/blog/e...r-css-no-hacks

  5. #5
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    Please review the following sites that will detail how to contain floats, and why this happens

    Containing floats: http://www.ejeliot.com/blog/59 , http://www.positioniseverything.net/easyclearing.html http://www.quirksmode.org/css/clearing.html http://www.complexspiral.com/publica...aining-floats/

  6. #6
    Join Date
    Feb 2010
    Location
    Calcutta, India
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks, the links are very useful

  7. #7
    Join Date
    Aug 2009
    Posts
    92
    Thanks
    0
    Thanked 9 Times in 9 Posts

  8. #8
    Join Date
    Sep 2008
    Location
    Seattle, WA
    Posts
    135
    Thanks
    1
    Thanked 11 Times in 11 Posts

    Default

    There's a simple way to do this using a small bit of javascript and Jquery. It uses a common 'class' for the columns you want displayed evenly. Here's a complete page sample. If you don't have Jquery you need to download it and make a reference to its location. If you don't want to do that then just link to Google's Jquery libary:
    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Equal Height Columns with jQuery</title>
    <style>
       body {
          font: small/1.3em Arial, Helvetica, sans-serif;
          background-color: white; }
       #wrap {
          width: 600px;
          margin: 0 auto; }
       .column {
          float: left; 
          padding: 10px; }
       #col1 {
          width: 110px;
          margin-right: 10px;
          background-color: #E2DDC4; }
       #col2 {
          width: 200px;
          margin-right: 10px;
          background-color: #6B99F6; }
       #col3 {
          width: 210px;
          background-color: #E87C5E; }
    </style>
    <script language="javascript" type="text/javascript" src="../../js/jquery/jquery.js"></script>
    <script>
    function equalHeight(group) {
       tallest = 0;
       group.each(function() {
          thisHeight = $(this).height();
          if(thisHeight > tallest) {
             tallest = thisHeight;
          }
       });
       group.height(tallest);
    }
    $(document).ready(function() {
       equalHeight($(".column"));
    });
    </script>
    </head>
    
    <body>
    <div id="wrap">
       <h1>Equal Height Columns with jQuery</h1>
       <p>This is an example of equal height columns using a single short jQuery function. View the page source or <a href="http://www.cssnewbie.com/equal-height-columns-with-jquery/">refer to the original CSS Newbie article</a> to see how the function works.</p>
       <div class="column" id="col1">
          <p>This three-column design features three columns with significantly varying quantities of content.</p>
       </div>
       <div class="column" id="col2">
          <p>However, despite the differing quantity amounts, these columns are exactly the same height. No tricks, no gimmicks, no resorting to repeating background images to fake our way to columnar nirvana. And certainly, no tables have been harmed in the making of these columns. </p>
          <p>They're simply divs sharing a common class, all of which have been set to the same height.</p>
       </div>
       <div class="column" id="col3">
          <p>And I think a single class is an addition we can all get behind.</p>
       </div>
    </div>
    
    </body>
    </html>

Bookmarks

Posting Permissions

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