CODEWITHSUNDEEP
htmlcsshtml-table
CuppM
CuppM

Reputation: 1698

Scrollable List On Left of Div

This is in a ASP.NET web application targeting .NET 3.5 and using an AJAX asp:UpdatePanel. For my page layout, I have several divs separating the vertical space of the page into 5 sections (header, first content, second content, third content, & footer).

enter image description here

The first content section contains information about the overall item the page is generated for (title and some properties). The third section contains additional tables of information about the page's item. And the headers and footers are...well...headers and footers.

The second content section will have 2 sub-sections, a list of images and the currently selected image. It will work like the standard list of thumbnails in a list where you click an item and the currently selected image will be updated to the clicked thumbnail. The currently selected image sub-section is wrapped by the AJAX asp.UpdatePanel and contains a title, properties table, and an image that all get updated when the selection changes.

The list can contain a large enough number of images so that when all are displayed, there would be lots of whitespace generated by pushing the selected image section bigger.

The currently selected image section will have a defined height inside the update panel that can change based on the size of the image the user wants to view (small, medium, large).

What I want is to have the list of images be sized to the height of the selected image section with a scrollbar for the overflow.

I've created a simple HTML page (below) that defines some simple content and divs, how do I get it to look like my desired layout (above)? I've tried different things that I know of using floating and whatnot, but nothing seems to come out the way I want. I would prefer not to have to specify widths or heights (except for the explicit height of the selected image div) and let things auto adjust to their contents if possible.

<html>
    <head>
        <style type="text/css">
html, body {
    margin: 0px;
    padding: 0px;
}

div {
    border-color: black;
    border-style: solid;
    border-width: 1px; 
    padding: 5px;
    margin: 5px;
}

div.image {
    background-color: red;
    color: white;
    text-align: center;
}

#page-header {
    padding: 10px;
    height: 60px;
    background-color: green;
    color: white;
}

#page-footer {
    padding: 10px;
    height: 20px;
    background-color: green;
    color: white;
}

.section {
}

#first-section {
}

#second-section {
}

#second-section-scroll-list {
    overflow-y: scroll;
    //display: inline-table;
}

ul.scroll-list {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

li.scroll-list-item {
    border-color: black;
    border-style: solid;
    border-width: 1px; 
    text-align: center;
    //display: table;
}

#second-section-content {
    //display: inline-table;
}

#third-section {
}
        </style>
    </head>

    <body>
        <div id="page-header"><h2>My Page!<h2></div>

        <div id="first-section" class="section">
            <h1>The Item To Display</h1>
            <table>
                <tr>
                    <th>Property 1:</th>
                    <td>Value</td>
                </tr>
                <tr>
                    <th>Property 2:</th>
                    <td>Value</td>
                </tr>
            </table>

        </div>

        <div id="second-section" class="section">
            <div id="second-section-scroll-list">
                <ul class="scroll-list">
                    <li class="scroll-list-item">
                        <div class="image" style="height: 120px; width: 160px;">Image 1</div><br/>
                        Image 1 Description
                    </li>
                    <li class="scroll-list-item">
                        <div class="image" style="height: 120px; width: 160px;">Image 2</div><br/>
                        Image 2 Description
                    </li>
                    <li class="scroll-list-item">
                        <div class="image" style="height: 120px; width: 160px;">Image 3</div><br/>
                        Image 3 Description
                    </li>
                    <li class="scroll-list-item">
                        <div class="image" style="height: 120px; width: 160px;">Image 4</div><br/>
                        Image 4 Description
                    </li>
                    <li class="scroll-list-item">
                        <div class="image" style="height: 120px; width: 160px;">Image 5</div><br/>
                        Image 5 Description
                    </li>
                    <li class="scroll-list-item">
                        <div class="image" style="height: 120px; width: 160px;">Image 6</div><br/>
                        Image 6 Description
                    </li>
                    <li class="scroll-list-item">
                        <div class="image" style="height: 120px; width: 160px;">Image 7</div><br/>
                        Image 7 Description
                    </li>
                    <li class="scroll-list-item">
                        <div class="image" style="height: 120px; width: 160px;">Image 8</div><br/>
                        Image 8 Description
                    </li>
                <ul>
            </div>

            <div id="second-section-content">
                <!-- This will be wrapped in an AJAX update panel -->
                <div style="height: 800px; background-color: lightgray;">
                    <h2>Selected List Item</h2>
                    <table>
                        <tr>
                            <th>Property 1:</th>
                            <td>Value</td>
                        </tr>
                        <tr>
                            <th>Property 2:</th>
                            <td>Value</td>
                        </tr>
                    </table>
                    <div class="image" style="height:480;width:640;">Image of Selected Item</div>
                </div>
            </div>
        </div>

        <div id="third-section" class="section">
            <table>
                <tr>
                    <th>First</td>
                    <th>Second</td>
                    <th>Third</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>A</td>
                    <td>1A</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>B</td>
                    <td>2B</td>
                </tr>
            </table>
        </div>

        <div id="page-footer">End of My Page...</div>
    </body>

</html>

Upvotes: 2

Views: 1649

Answers (1)

sdo
sdo

Reputation: 662

Like this: http://blueclick.ca/projects/stackoverflow/divpanels.html?

CSS:

  html, body {
    margin: 0px;
    padding: 0px;
}

div {
    border-color: black;
    border-style: solid;
    border-width: 1px; 
    padding: 5px;
    margin: 5px;
}

div.image {
    background-color: red;
    color: white;
    text-align: center;
}

#page-header {
    padding: 10px;
    height: 60px;
    background-color: green;
    color: white;
}

#page-footer {
    padding: 10px;
    height: 20px;
    background-color: green;
    color: white;
}

.section {
}

#first-section {
}

#second-section {
    margin-left:auto; margin-right:auto; display:block;
}

#second-section-scroll-list {
    overflow-y: scroll;
    height:750px;
    float:left;
}

ul.scroll-list {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

li.scroll-list-item {
    border-color: black;
    border-style: solid;
    border-width: 1px; 
    text-align: center;
}

#second-section-content {
margin-left:250px;
height:750px
    }

#third-section {
}

HTML:

  <div id="page-header"><h2>My Page!</h2></div>

    <div id="first-section" class="section">
        <h1>The Item To Display</h1>
        <table>
            <tr>
                <td>Property 1:</td>
                <td>Value</td>
            </tr>
            <tr>
                <td>Property 2:</td>
                <td>Value</td>
            </tr>
        </table>

    </div>

    <div id="second-section" class="section">
        <div id="second-section-scroll-list">
            <ul class="scroll-list">
                <li class="scroll-list-item">
                    <div class="image" style="height: 120px; width: 160px;">Image 1</div><br/>
                    Image 1 Description
                </li>
                <li class="scroll-list-item">
                    <div class="image" style="height: 120px; width: 160px;">Image 2</div><br/>
                    Image 2 Description
                </li>
                <li class="scroll-list-item">
                    <div class="image" style="height: 120px; width: 160px;">Image 3</div><br/>
                    Image 3 Description
                </li>
                <li class="scroll-list-item">
                    <div class="image" style="height: 120px; width: 160px;">Image 4</div><br/>
                    Image 4 Description
                </li>
                <li class="scroll-list-item">
                    <div class="image" style="height: 120px; width: 160px;">Image 5</div><br/>
                    Image 5 Description
                </li>
                <li class="scroll-list-item">
                    <div class="image" style="height: 120px; width: 160px;">Image 6</div><br/>
                    Image 6 Description
                </li>
                <li class="scroll-list-item">
                    <div class="image" style="height: 120px; width: 160px;">Image 7</div><br/>
                    Image 7 Description
                </li>
                <li class="scroll-list-item">
                    <div class="image" style="height: 120px; width: 160px;">Image 8</div><br/>
                    Image 8 Description
                </li>
            </ul>
        </div>

        <div id="second-section-content">
            <!-- This will be wrapped in an AJAX update panel -->
            <div style=" height: 725px; background-color: lightgray;">
                <h2>Selected List Item</h2>
                <table>
                    <tr>
                        <th>Property 1:</th>
                        <th>Value</th>
                    </tr>
                    <tr>
                        <td>Property 2:</td>
                        <td>Value</td>
                    </tr>
                </table>
                <div class="image" style="height:480;width:640;">Image of Selected Item</div>
            </div>
        </div>
    </div>
<br>

    <div id="third-section" class="section">
        <table>
            <tr>
                <th>First</th>
                <th>Second</th>
                <th>Third</th>
            </tr>
            <tr>
                <td>1</td>
                <td>A</td>
                <td>1A</td>
            </tr>
            <tr>
                <td>2</td>
                <td>B</td>
                <td>2B</td>
            </tr>
        </table>
    </div>

    <div id="page-footer">End of My Page...</div>

Hope this helps.

Upvotes: 1

Related Questions