Home/ Questions/Q 9094459
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T23:21:17+00:00

I am sorry to keep asking versions of the same question but this seems

  • 0

I am sorry to keep asking versions of the same question but this seems difficult to achieve. Here’s the code I have so far:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

   <style type="text/css">

       body, html{
    height: 100%;
}
        #outer {
            width: 90%;
            height: 90%;
            margin: 5% 5% 5% 5%;
            background-color: #333;
        }
        #left-content {
            height: 100%;
            width: 50%;
            float:left;
        }
        #right-content {
            height: 100%;
            width: 50%;
            float:left;
        }
    </style>

    <div id="outer">
      <div id="left-content" style="background-color: red;">xx</div>
      <div id="right-content" style="background-color: yellow;">xx</div> 

<!-- we need to clear -->
<br style="clear:both" />

    </div>

</body>
</html>

Now it seems I see scroll bars but I just want the outer DIV to occupy 90% of the screen and there not to be scrollbars.

Find the fiddle here.

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: http://jsfiddle.net/remibreton/8hfwp/1/

    The trick here is to leave the browser figure out the width and height of the outer element. To do so you specify top:0; bottom:0; left:0; right:0; to make sure it fills up the entire available space. Then you add margin:5%; to reduce the height and width to 90%. The outer element should be position:relative; to allow absolute positioning inside it.

    For the content elements, they can both be width:50%; height:100%. What you need to do is to make sure that the right one get a special left:50% treatment.

    HTML

    <div id="outer">
    <div class="content left">xx</div>
    <div class="content right">xx</div> 
</div>

    CSS

    body, html { height: 100%; }
#outer { position:absolute; margin:5%; bottom:0; top:0; left:0; right:0; overflow:hidden; } /* margin:5% to make sure the width and height are actually 90%. Overflow is optional */
.content { position:absolute; width:50%; height:100%; } /* Applies to both content element */
.content.left { background-color:yellow; }
.content.right { background-color:red; left:50%; } /* Left position is equal to the right content element */

    This method allows cleaner and more flexible CSS than what you previously had. Bonus internet points!

    • 0