CODEWITHSUNDEEP
htmlcss
bflydesign
bflydesign

Reputation: 483

position of layers when resizing browser

when I'm resizing my browser-window the blue buttons go below the logo on the left, on the same line as the text "Welkom Bart" although they are two different layers. I want the text "Welkom Bart" to lower as well, so they are not on the same line. What do I need to add to my css?

normal sized

html e.g.

<div id="mainmenu">
    <div id="logo"><img ... /></div>
    <div id="usermenu">Buttons</div>
</div>

<div id="maintitle">
    <h2>Welkom Bart</h2>
    <hr />
</div>

css

#mainmenu {
    height: 100px;
    position: relative;
}
#logo {
    float: left;
    width: 200px;
    margin-right: 20px;
}
#usermenu {
    float: right;
}
#maintitle {
    margin-bottom: 20px;
}
#maintitle hr {
    color: #56c2e1;
    display: block; 
    height: 1px;
    border: 0; 
    border-top: 1px solid #56c2e1;
    margin: 10px 0;
}

Upvotes: 0

Views: 42

Answers (3)

souvickcse
souvickcse

Reputation: 7804

Use this 

<div id="maintitle" style="width:100%">
<h2>Welkom Bart</h2>
<hr />

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324650

Add overflow:hidden to #mainmenu. This will cause its height to include all floated elements, such as your #usermenu element, allowing flow to continue underneath it.

Upvotes: 0

Rowman Pirce
Rowman Pirce

Reputation: 423

Add clear:both to #maintitle =)

Upvotes: 1

Related Questions