Home/ Questions/Q 6878511
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T04:43:58+00:00

I’m trying to position two panels and just can’t get it to work… I

  • 0

I’m trying to position two panels and just can’t get it to work…

I have a container-page wrapping two panels, each with it’s own page. I want to position the panels side by side using float.

This is my CSS:

  .pages {width: 100%; position: absolute;}
  .leftPanel {position: relative; width: 25%; min-width:100px; float: left;}
  .rightPanel {position: static;}

and HTML

  <div class="page">
    <div id="lefty" class="leftPanel">
      <div class="page">
        <p>helloworld</p>
      </div>
    </div>
    <div id="righty" class="rightPanel">
      <div class="page">
         <p>HELLO WORLD</p>
      </div>
    </div>    
 </div>

I have to use position:relative for the left panel and position:static for the right panel. Strangely this works in JSBin but in my actual page, the right panel with position:static always has 100% width covering the whole screen.

Any hints on what I may be doing wrong?

Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    div elements by default have a width of 100% of their parent. Since you floated the lefty div you took it out of the flow so what is happening is that the lefty div is effectively sitting outside the flow of the elements. Also float causes the div to shrink-wrap to the size of it’s children. So if you are wanting to set the righty div to but up against the lefty div then you should do two things: first add float:left; position:relative; to the righty styling. Second you should add a div at the bottom of that to clear your floats.

    On another note you should only use a class if you are going to be styling multiple elements the same way, otherwise just style the element off of the ID.

      .pages {width: 100%; position: absolute;}
  .leftPanel {position: relative; width: 25%; min-width:100px; float: left;}
  .rightPanel {position: relative; float: left;}

  <div class="page">
    <div id="lefty" class="leftPanel">
      <div class="page">
        <p>helloworld</p>
      </div>
    </div>
    <div id="righty" class="rightPanel">
      <div class="page">
         <p>HELLO WORLD</p>
      </div>
    </div>
    <div style="clear:left;"></div>    
 </div>
    • 0