CODEWITHSUNDEEP
htmlcss
ericbae
ericbae

Reputation: 9644

CSS : Make only one div respond to the screen size

I have the following css.

#lll
{
  float:left;
  max-width:1000px;
  border:1px solid;
}

#rrr
{
  float:left;
  width:300px;
  border:1px solid;
}

ul
{
  list-style:none;
}

li
{
  float:left;
  width:300px;
}

And my HTML is as follows

<div id="lll">
  Hello

  <ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
  </ul>
</div>

<div id="rrr">
  right!
</div>

JSFiddle is here http://jsfiddle.net/SN674/1/

Now what I would like to do is that when I resize the window, I would like the div#lll to be resized, but the div#rrr to stay on the right hand-side.

Right now, if I resize the window, the div#rrr comes BELOW div#lll.

How can I achieve this?

Upvotes: 3

Views: 1574

Answers (3)

AturSams
AturSams

Reputation: 7952

Here is how I would do it in CSS:

http://jsfiddle.net/SN674/12/

<style type="text/css">
#lll
{
        position: relative;
        margin-right: 305px;
        max-width:600px;
        min-width: 40px;
        border:1px solid;
 }

ul
{
    list-style:none;        
}
li
{
    width:300px;
}

#rrr
{
    position:absolute;
    right: -302px;
    top: -1px;
    width:300px;
    border:1px solid;
}    
</style>
<div id="lll">
    Hello

    <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
    <div id="rrr">
        Whatever
    </div>
</div>

Here is one way in JQuery(how I would do it):

Short answer: http://jsfiddle.net/SN674/4/

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>        
<script type="text/javascript">
           $(function(){

               $("div#lll").width($(document).width() - 350);
               $(window).resize(function(){
                   $("div#lll").width($(document).width() - 350);
               });
           });
       </script>
<div id="lll">
   Hello    
   <ul>
       <li>item</li>
       <li>item</li>
       <li>item</li>
       <li>item</li>
       <li>item</li>
   </ul>
</div>
<div id="rrr">
   Whatever
</div>

Detailed answer: Step 1. Download jQuery

Step 2. Read this: http://api.jquery.com/width/ http://api.jquery.com/resize/

step 3. Check this example I made:

<html>

<head>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        div {
            float: left;
            width: 300px;
        }
        #solid {
            background-color: yellow;
        }
        #liquid{
            background-color: navy;
        }

    </style>
    <title>
        test
    </title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){

            $("div#liquid").width($(document).width() - 301);
            $(window).resize(function(){
                $("div#liquid").width($(document).width() - 301);
            });
        });
    </script>
</head>

<body>
    <div id="liquid">
        &nbsp;
    </div>
    <div id="solid">
        &nbsp;
    </div>
</body>
</html>

I hope this solves the issue for you

Upvotes: 1

David Tran
David Tran

Reputation: 10616

You just need to change a bit in your CSS:

body { margin:0px;}
div {margin:0px;}

    #lll{
      float:left;
      margin-right:300px;
      border:1px solid;
    }

    #rrr{
      position:absolute; right:0px; top:0px;
      width:300px;
      border:1px solid;
    }

    ul{  list-style:none;}
    li{  float:left;  width:300px; }

Although this won't works with IE6 & IE7. To compatible with IE6 & IE7 I think we need some scripts.

Upvotes: 0

aziz punjani
aziz punjani

Reputation: 25776

I made it elastic by using percentages, although this may not be what you want. Check it out.

Upvotes: 0

Related Questions