CODEWITHSUNDEEP
htmlcssfooteroverlapping
Leafeeeh
Leafeeeh

Reputation: 125

footer div overlaps two other divs

For some reason, my footer keeps overlapping the two boxes with text that are in different divs above it. I tried everything I can think of, but one way or the other it keeps overlapping when the window is resized. In full screen it does work. Please tell me how to fix it. I'm kind of lost..

PS: I know that this question probably has asked countless of times, but I really tried a lot already and I cannot seem to figure it out, my apologies.

CSS: 

*, html, body, div, ul, ol, li, h1, h2, h3, h4, 
h5, h6, pre, form, label, fieldset, input, p, th, td {
    margin: 0;
    padding: 0;
}

p{
    font: Arial;
    size: 12;
}


a { 
    color: #2069b4; 
}

a:hover { 
    color: #2a2e36; 
}

div#wholeBody {
    padding: 1% 3.3%;
    width: 80%;
    height: 105%;
    margin-left: auto;
    margin-right: auto;
    background-color: eee;
}

div#mainContent {
    border: 5px solid #ff6700;
    padding: 1%;
    width: 96%;
    margin-left: auto;
    margin-right: auto;
}

div#twoColumns {
    padding: 1%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

div#examplesLeft {
    border: 5px solid #0078ff;
    padding: 1.1%;
    width: 44%;
    left: 0.5%;
    float: left;
    z-index: 1;
    margin: auto;

}

div#contactRight {
    border: 5px solid #ff001a;
    padding: 1.1%;
    width: 44%;
    right: 2.6%;
    float: right;
    z-index: 1;
    margin: auto;
}

div#footer {
    text-align: center;
    width: auto;
    position: relative;
    z-index: 1;
}

HTML: 

<html lang="en">
    <head>
        <meta charset="utf-8">

        <!-- title and icon -->
        <title>#</title>
        <link rel="shortcut icon" href="#">

        <!-- Stylesheet -->
        <link rel="stylesheet" href="style.css">


        <!-- Optimize for mobile devices -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>
        <div id="wholeBody">
            <div id="mainContent">
                <h1>Welcome!</h1><br />
                <p>testtesttesttesttesttesttesttesttesttestt esttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestte sttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestte sttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestt esttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestt esttesttesttesttesttesttesttesttesttesttesttesttest
                </p>
            </div>
            <div id="twoColumns">
                <div id="contactRight">
                    <p>
                        <b class="big">Contact details</b><br /><br />
                        company <br />
                        name <br />
                        Adress: <br />
                        Postal code: <br />
                        City: <br />
                        Country: <br />
                        Email: <a href="mailto:"></a> <br />
                        Phone: <a href="tel:"></a> <br />
                        Skype:  <br />
                        Twitter: <a href="#">#</a> <br />
                        Iban code:  <br />
                        Chamber of Commerce number:
                    </p>
                </div>

                <div id="examplesLeft">
                    <p><b class="big">Examples</b> of published concepts</p>
                </div>
                <div style="clear:float;"></div>
                <div id="footer">
                    <p>&copy; Copyright 2013/2014 </p>
                </div>
            </div>
        </div>
    </body>
</html>

Upvotes: 1

Views: 625

Answers (4)

ran3000
ran3000

Reputation: 186

add clear: both; to the footer element.

Explanation

clear:both; means that no floating elements allowed on either the left or the right side, so it doesn't allow the other divs to overlap it.

Upvotes: 2

nicolast
nicolast

Reputation: 732

You two collumns are floated.

You need to clear them.

change 

<div style="clear:float;"></div>

in 

<div style="clear:both;"></div>

Or, in more classier way use a "clearfix":

Add this to your css

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

and the class clearfix to your parent, like this :

        <div id="twoColumns" class="clearfix">
            <div id="contactRight">
            </div>

            <div id="examplesLeft">
            </div>
        </div>

        <div id="footer">
        </div>

Upvotes: 3

lgreg
lgreg

Reputation: 1

Try using style="clear: both" after div with id examples left. I think that will solve your problem.

Upvotes: 0

Rob
Rob

Reputation: 152

Try adding the following to the footer rule.

display: inline-block;

div#footer {
    display: inline-block;
    text-align: center;
    width: auto;
    position: relative;
    z-index: 1;
}

Upvotes: 0

Related Questions