How to solve divs overlapping issue and maintain css fluid layout?


Tags: css

Problem :

I have two divs left and right, when I restore down (minimize window) the right div comes on top of the left div (overlapping in other words).

How do I solve this problem?

#left {
    left: 3%;   
    position: absolute;
    width: 340px;
    margin-top: 10px;
}

#right {
    position: absolute; 
    left: 24%;
    width: 20%;
    margin-top: 10px;  
}

Thank you in advance.



Solution :

Try changing the width to 21% for #left and then add a max-width: 340px.

#left {
    left: 3%;   
    position: absolute;
    width: 21%
    max-width: 340px;
    margin-top: 10px;
}

    CSS Howto..

    How do I vertically align multiple text next to an image with CSS?

    How do I create html/css elements in a shape of a circle?

    How to organize css files in a Joomla 2.5 template? [closed]

    How can add atribute to css of page on page load event

    How do I get a div to be positioned above an image?

    How to make a floating page div responsive

    How to stop the navigation bar after scrolling?

    hyperlink inheriting color, how to overcome

    How to use @RenderPage to include CSS content inline - MVC Razor

    How to apply different width stored in PHP to 3 identical DIVs (using same CSS)

    How can I remove “border-top-width” css style?

    How to reuse footer with only HTML/CSS?

    how to use tinymce content.css in rails

    CSS Flex Box — flex-wrap:wrap; How to style a specific line?

    CSS How to use margins with different divs

    How is this menu icon created only with CSS?

    How to maintain page backgroud image zoom fixed? CSS

    How To Use CSS To Style The Output Of JavaScript

    How to nest multiple css attributes inside another attribute

    JavaScript: How to get a dynamically created element's width?

    how to include absolute css path using add_editor_style() in wordpress

    On css: if text line is break show dots

    How to remove right border

    How do I position a div under a fixed position div

    activating “authorization” causes CSS stop working! how solve it?

    How can I use jquery to hide a drop down menu when the user clicks outside of the menu area?

    How to do “display = block” using jquery for particular element

    How to make this geometrical “translation” effect with javascript?

    CSS - How to upscale Unicode arrows?

    CSS: How to refer to a tag