Home/ Questions/Q 6689995
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T05:35:06+00:00

I have the following css. #lll { float:left; max-width:1000px; border:1px solid; } #rrr {

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0