CODEWITHSUNDEEP
csshtmlnavigationbar
user2360681
user2360681

Reputation: 3

Re-sizing web page causing divs overlap

I am having an issue with my webpage.

My div tags on the right side are overlapping onto my center column... I have set a min-width to my parent div tag but it did nothing to help elevate the problem.

Plus my navigation bar is giving me a little issue.. ENGAGEMENT will fall under the ABOUT tab when I re-size my web page. I have display: block; and display: inline; set in my CSS. It works fine just the re-sizing is hurting my web-page..

My layout is basic.. 

<body>
    <div style="width:100%; margin-top: -18px; clear: both;">
        <div style="width: 100%; height: 100px;  background-color: white;">
            <p style="padding-top: 3%;font-size:30px; font"><i>Welcome</i></p>
        </div>  

        <div style="width: 100%; display: block; overflow: hidden; ">
            <div><li><a href="http://www.albany.edu/" class="nav">About</a></li></div>
            <div><li><a href="http://albany.bncollege.com/" class="nav">Books</a></li></div> 
            <div><li><a href="#AM" class="nav">Electronics</a></li></div>  
            <div><li><a href="#UA" class="nav">Apparel</a></li></div>
            <div><li><a href="#SP" class="nav">Activities</a></li></div>
            <div><li><a href="#SL" class="nav">Engagement</a></li></div>
        </div>
        <div style="float: left; background-color:  white; margin-left: 80px;">
        </div>  
        <div id="left-col" style="clear: left;">
        </div>
        <div id="central-col">
        </div>      
        <div id="right-col" style="text-align: center; clear: right; ">
        </div>
        <div id="footer"><p style="text-align: center;">KNOWLEDGE IS POWER</p> </div>
    </div>
</body>

Upvotes: 0

Views: 128

Answers (1)

Aayushi Jain
Aayushi Jain

Reputation: 2879

It would be better if you have given full code (may be on jsfiddle) because it is hard to understand what these divs are doing by looking at your code. (You have made so many of them.)

For your solution, I think you have to remove 

width: 100%

from second and third div.

You have set margin-left to 80px, so whenever you resize the window, it will always have a margin of 80px from left.

Also I want to know the use of

overflow: hidden;

in your code.

Upvotes: 1

Related Questions