www.webdeveloper.com
Results 1 to 4 of 4

Thread: [RESOLVED] Two floated divs, if one is empty, hide it, and make the other one width:100%

  1. #1
    Join Date
    Dec 2004
    Posts
    88

    resolved [RESOLVED] Two floated divs, if one is empty, hide it, and make the other one width:100%

    Hi.

    I have the following setup:
    Code:
    <style type="text/css">
    .clearfix:after {
        content: ".";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
    }
    .clearfix {
        display: inline-block;
    }
    html[xmlns] .clearfix {
        display: block;
    }
    * html .clearfix {
        height: 1%;
    }
    body {
    font-family:arial;
    font-size:12px;
    }
    .wrapper {
        width: 200px;
        border:1px solid #000;
    }
    .one, .two {
        float: left;
        width: 100px;
        height: 100px;
    }
    .one {background-color: red}
    .two {background-color: green}
    </style>
    and
    HTML Code:
    <div class="wrapper clearfix">
            <div class="one"></div>
            <div class="two"></div>
     </div>
    I would like to check if div two is empty, and if it is, the div one should stretch to full width. How is that possible with jQuery?

  2. #2
    Join Date
    Aug 2012
    Posts
    43
    something like this maybe?

    Code:
    $('document').ready(function(){
       if($('.two').html() == ""){
          $('.two').hide();
          $('.one').css('width', '200px');
       };
    });
    maybe you want:
    Code:
    $('.one').css('width', '200px');
    to be:
    Code:
    $('.one').css('width', '100%');
    not tested :-)
    Last edited by Nomistake; 09-14-2012 at 09:28 AM.

  3. #3
    Join Date
    Dec 2004
    Posts
    88
    @Nomistake: It works like a charm. Thanks a lot. :-)

  4. #4
    Join Date
    Aug 2012
    Posts
    43
    glad i could help :-)

Thread Information

Users Browsing this Thread

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

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
  •  
HTML5 Development Center



Recent Articles