CODEWITHSUNDEEP
htmlcss
noobProgrammer
noobProgrammer

Reputation: 477

Overlapping Header/Section

I have a header and section where elements in header are overlapping. Specifically, two divs inside header are overlapping (one's floated left, the other floated right)

HTML:

        <div id="main-contianer">
        <header id="main">
            <div id="logo">
                <h1>Ladder</h1>
            </div>

            <div id="sign-in">
                <form id="log-in" action="login.jsp"><!--not complete-->
                    <div id="username">
                        <label>Username</label>
                        <input type="text" name="username">
                    </div>
                    <div id="password">
                        <label>Password</label>
                        <input type="password" name="password">
                    </div>
                    <div id="log-in">
                        <input type="submit" value="Log In">
                    </div>
                </form>
            </div>
        </header>
        <section>
            <!--code here not included-->
        </section>

CSS:

header#main div#logo{
    float: left;
}

header#main div#sign-in{
    float: right;
}

Here is the JSFiddle to see what it looks like: http://jsfiddle.net/FLwUA/106/

How do I ensure that header and section don't overlap?

Upvotes: 0

Views: 2950

Answers (2)

Shashank
Shashank

Reputation: 2060

Add a new class in CSS as:

CSS

.clearfix {
  clear: both;
}

After </header> but before <section> add the following in HTML

HTML

<div class="clearfix"></div>

Refer here.

Upvotes: 0

Mark Kang
Mark Kang

Reputation: 131

try using position: relative instead of float.

then give display: inline-block;

Upvotes: 0

Related Questions