Prevent Overlapping div's in CSS

Question

I'm trying to make a page with CSS where contents from divs don't overlap each other. When content overflows from the main div (the white area), scroll bars appear and you can scroll over the contents of the sidebar and header (ignore the red line text ... this is just my debugging info).

I didn't separate the CSS from the HTML so I apologize for the messy layout. The style tags in divs are what I'm using to position the content on the page.

The code for this can be found at https://jsbin.com/gesuser/edit?html and also the bottom of this post.

How do I prevent the main div from scrolling over the header and sidebar? I could do this using frames but I would rather not use that old tech. :)

Should be like this: and not like this:

Any help would be greatly appreciated.

    <div class="container">
        <div class="header" style="position: fixed; width: 100%; height: 50px; background-color: #133068;">
            <div id="appname" style="float: left;">
                <a href="index.php"><label style="position: relative; top: 12px; left: 5px; font: bold 20pt/22pt 'Syncopate', Arial, sans-serif; color: white;">Bluebook</label></a>
            </div>

            <div id="searchbar" style="position: fixed; float: right; top: 12px; right: 20px;">
                <form id="" name="form_Search_All" action="search.php" method="post">
                    <input type="text" id="text_Search" style="width: 350px;" name="text_Search" placeholder=" search all departments" />
                    <input type="submit" name="btnSearch_All" value="+" />

                    <input type="radio" id="radio_Search_BB" name="radio_Search" value="BB" checked /><label style="color: white;">BB</label>
                    <input type="radio" id="radio_Search_RC" name="radio_Search" value="RC" /><label style="color: white;">RC</label>
                </form>
            </div>
        </div>

        <div class="sidebar grad" style="position: fixed; top: 50px; width: 200px; height: 100%; background-color: #4e6799; z-index: -1;">
            <div class="btn-group" style="position: relative; top: 20px;">
                <?php if ($site->IsAdmin ()) : ?>
                    <a href="logout.php"><button class="button">ADMIN LOGOUT</button></a>

                <?php else : ?>
                    <a href="login.php"><button class="button">ADMIN LOGIN</button></a>

                <?php endif; ?>

                <a href="index.php"><button class="button">SEARCH PAGE</button></a>
            </div>

            <div id="version" style="position: absolute; bottom: 50px; margin: 5px; font: bold 9pt/11pt Arial; color: #9a9797;">
                <label>Version 2.0.0</label>
            </div>
        </div>

        <div class="main" style="position: absolute; top: 60px; left: 210px;">
            <?php $tpl->Component (); // this outputs tables of data ?>
        </div> <!-- main -->

    </div> <!-- container -->

Can you please show just the HTML and CSS in a demo? Somewhere hosted or using JSBin? — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Apr 17, 2017 at 20:06

Amir H. Bagheri · Accepted Answer · 2017-04-17 20:11:25Z

1

Don't use absolute position for the main div. Use a relative and add margin to it:

<div class="main" style="position: relative; margin-top: 60px; margin-left: 210px;">
    <?php $tpl->Component (); // this outputs tables of data ?>
</div>

answered Apr 17, 2017 at 20:11

Amir H. Bagheri

1,4061 gold badge11 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Prevent Overlapping div's in CSS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related