4 replies [Last post]
davidonlaptop
Offline
newbie
Last seen: 12 years 11 weeks ago
Timezone: GMT+7
Joined: 2008-09-11
Posts: 5
Points: 0

Hello from Thailand!

I want to do a page with 2 columns, where the left column has a fixed length. The right column should take all the remaining space, but display a scrollbar if the viewport is not wide enough.

Also another complexity, is that I want to give a frame effect with borders : so one frame containing the left frame & right frame (see attachment).

I floated both the left & right columns, but this requires that I set a width to the right column. If I omit the width, then the right column appears under the left one.

Any idea?

-David

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<style type="text/css">
body {
  background-color: #FFCC33;
  padding:0;
  margin:8px;
}
#split_view {
  padding: 10px;
  border: 3px solid #E4B62D;
  background-color: #ffffff;
}
 
#left, #right {
  margin: 5px;
  padding: 10px;
  border: 3px solid #E4B62D;
  background-color: #ffffff;
}
#left {
  float: left;
  width:575px;
}
#right {
  float: left;
  width:250px;
  /*margin-left: 620px;**/
  overflow: auto;
}
 
#left div, #right div {
  padding: 12px;
  color: #0071BC;
}
 
 
</style>
</head>
 
<body>
<div id="split_view">
  <div><h1>The <i>split view</i> has a left and a right panel.</h1></div>
 
  <div id="left">
    This is the left panel. This whole area should always be visible.
    <div>
      This is a DIV with a very long length. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum.
    </div>
    <div>
      This is a DIV with a very long length. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum.
    </div>
  </div>
 
  <div id="right">
    This is the right panel. This area should take all available space, and show a horizontal scrollbar when the viewport is too narrow.
    <div style="width:300px; background-color:#FFCC33">
      This DIV has a fixed width. If the viewport is not large enough, a scrollbar should appear in the <b>right panel</b>.
    </div>
    <div>
      This is a DIV with a very long length. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum.
    </div>
    <div>
      This is a DIV with a very long length. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum. Lorep ipsum.
    </div>
  </div>
 
  <br style="clear:both;" />
</div>
</body>
</html>

AttachmentSize
split_view.jpg46.41 KB
downtap
downtap's picture
Offline
Enthusiast
Dallas, TX
Last seen: 5 years 45 weeks ago
Dallas, TX
Timezone: GMT-7
Joined: 2008-01-18
Posts: 227
Points: 36

I believe the proper way to

I believe the proper way to achieve what you're trying to do, is to remove the float property from your right div and apply width:auto to it. This should cause it to now appear to the right of the left div to fill all that space. Next, you should probably apply a min-width property to it for the smallest size you'd like it to be. Optimized for 800x600 monitor resolutions, that means your min-width should be around 185px. Lastly, I think you have a slight case of divitis on that page. Read through that link, as it helped me out a ton when I first got into css.

davidonlaptop
Offline
newbie
Last seen: 12 years 11 weeks ago
Timezone: GMT+7
Joined: 2008-09-11
Posts: 5
Points: 0

amazing

Amazing downtap!

So simple!

Although, now the right DIV appears 5px higher, like if the margin-top was not applied...

But I'll read through the divitis article!

Thanks!

davidonlaptop
Offline
newbie
Last seen: 12 years 11 weeks ago
Timezone: GMT+7
Joined: 2008-09-11
Posts: 5
Points: 0

divitis

Hey that was a good read!

But there a reason why I have so many DIV in this example, it's because I simplified it a bit - what I am doing is a bit more complex. I round the corners of each container with Javascript, so I need a container for each (i think...). Also both #left, #right containers have a very complex structure, one is a CMS editing area, and the other is a preview area of the website (many div inside).

So my problem remain the #right column appears 5px higher, I can find a patch, but I'd like to understand what is going on, if you have an explanation...

Thanks again!

davidonlaptop
Offline
newbie
Last seen: 12 years 11 weeks ago
Timezone: GMT+7
Joined: 2008-09-11
Posts: 5
Points: 0

float

I think I got it...

I looks like the floated #left column adds its own 5px margin, but the #right column shares the margin with the element above ().