CODEWITHSUNDEEP
csshtml
gen
gen

Reputation: 405

how to have 2 divs next to eachother and only 1 scrolls when the page gets resized?

I currently have a setup like this:

-------------
|nav| data  |
|nav| data  |
|nav| data  |
|nav|       |
-------------

(nav = navigation; -,| = outline of the page)

When I make my brower window smaller I want it to look like this:

-----------
|nav|  dat|
|nav|  dat|      
|nav|  dat|
|nav|scrol|      
-----------

(scrol = scroll bar) but what I get is this:

----------      OR      -----------
|nav| dat|a             |nav|
|nav| dat|a             |nav|
|nav| dat|a             |  data |
|nav| dat|a             |  data |
----------              -----------

the contents of my data does not stay within the boundaries of my page.

I want my scrollbar only in the 'data' div

I have tried all kinds of things using float, tables, overflow, position, ... my current code:

<div >
     <div id="PlaceHolder" runat="server"  style='float:left;width:200px;'>

     </div>
     <div id="facet_results" style="float:left;width:900px;" >
          <table ID="tblResults">
          <table>
     </div>
</div>

this is ok but when my page width goes below 1100px the 'results' div ends up below the 'placeholder' div

Can anyone help with this? thanks

Upvotes: 2

Views: 749

Answers (2)

Joonas
Joonas

Reputation: 7303

I think this might help you out: http://cameronmoll.com/archives/000892.html

Though its not the most descriptive about things but at least there is a link to page that has that hack in use http://tuscany.cssmastery.com/

Edit2: http://jsfiddle.net/CV8kv/ Simplified and a little more specified to suit your needs.

Edit: Maybe i misinterpreted you example's.

Do you want the content area width to change when browser window decreases?

If not check this out http://jsfiddle.net/jzzgu/

Main point here is that you wrap your elements inside element ( in this case <div id="wrap"> ) and then give that element width that is the main width of the site #wrap { 600px; } and when you put things inside that. Browser will take that as.. what it is.. and things inside that are not affected when you have bigger or smaller brow window.

Upvotes: 0

nobody
nobody

Reputation: 10645

Is this what you want:

<html>
<head>
    <style>
        body { margin: 0px; }
        #nav {
            position: absolute;
            left: 0; top: 0;
            background: #ffffaa;
            width: 200px;
        }
        #body {
            margin-left: 200px;
            background: #aaffaa;
            overflow-x: scroll;
        }
        #inside_body {
            width:900px;
        }
    </style>
</head>
<body>
    <div id="nav">
        Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some
        Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some
    </div>
    <div id="body">
        <div id="inside_body">
            Some Text Some Text Some Text Some Text Some Text Some Text Some
            Some Text Some Text Some Text Some Text Some Text Some Text Some
        </div>
    </div>
</body>
</html>

Upvotes: 2

Related Questions