CODEWITHSUNDEEP
htmlcss
Patricia
Patricia

Reputation: 5089

HTML Div won't stay under Div that is above it

I am trying to create two divs that act like two rows; one on top of the other spanning the width of the screen. Each row contains an image and a title. Mybe a snippet instead of a fiddle will help. This is the "Good" Layout:

html {
    background-color: #e2e2e2;
    margin: 0;
    padding: 0;
}

body {
    background-color: #fff;
    border-top: solid 10px #000;
    color: #333;
    font-size: .85em;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
}

header, footer, hgroup,
nav, section {
    display: block;
}

.float-left > * {
    float: left;
}

.float-right {
    float: right;
}

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

h1, h2, h3,
h4, h5, h6 {
    color: #000;
    margin-bottom: 0;
    padding-bottom: 0;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.75em;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
}

h5, h6 {
    font-size: 1em;
}

    h5 a:link, h5 a:visited, h5 a:active {
        padding: 0;
        text-decoration: none;
    }


/* main layout
----------------------------------------------------------*/
.content-wrapper {
    margin: 0 auto;
    max-width: 100%;  /*960px;*/
}

#body {
    background-color: #efeeef;
    clear: both;
    padding-bottom: 35px;
}

    .main-content {
        padding-left: 10px;
        padding-top: 30px;
    }

header {
}

    .main-row {
        min-height: 85px;
        background: linear-gradient(#d2d2d9, #efeeef, white);
    }

    .menu-row {
        min-height: 50px;
        background-color: #2983be;
    }

    .menu {
        min-height: 50px;
        max-width: 300px;
        background-color: #a5fa06;
        opacity: 0.9;
    }

    .content-wrapper {
        padding-top: 10px; 
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;
}
<body>
    <header>
        <div class="main-row">
            <div class="content-wrapper">
                <div class="float-left">
                    <img class="icon" style="float: left; " src="//placehold.it/50x80" alt="logo image" />
                    <label style="float: left; font-size: large; "><h1>My system</h1></label>
                </div>
            </div>
        </div>
        <div class="menu-row">
            <div>
                <div class="menu">
                    <label style="font-size: medium; "><h2>Home</h2></label>
                </div>
            </div>
        </div>
    </header>
</body>

However when I include float-left, the bottom div moves upward. See the Fiddle of "Good" layout here and when I try to add the image using float-left, see the "Moved" layout here. As you can see the bottom div moves up and the Home title displays under the bottom div.

I'm inserting the snippet here to show how the div moves:

html {
    background-color: #e2e2e2;
    margin: 0;
    padding: 0;
}

body {
    background-color: #fff;
    border-top: solid 10px #000;
    color: #333;
    font-size: .85em;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
}

header, footer, hgroup,
nav, section {
    display: block;
}

.float-left > * {
    float: left;
}

.float-right {
    float: right;
}

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

h1, h2, h3,
h4, h5, h6 {
    color: #000;
    margin-bottom: 0;
    padding-bottom: 0;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.75em;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
}

h5, h6 {
    font-size: 1em;
}

    h5 a:link, h5 a:visited, h5 a:active {
        padding: 0;
        text-decoration: none;
    }


/* main layout
----------------------------------------------------------*/
.content-wrapper {
    margin: 0 auto;
    max-width: 100%;  /*960px;*/
}

#body {
    background-color: #efeeef;
    clear: both;
    padding-bottom: 35px;
}

    .main-content {
        padding-left: 10px;
        padding-top: 30px;
    }

header {
}

    .main-row {
        min-height: 85px;
        background: linear-gradient(#d2d2d9, #efeeef, white);
    }

    .menu-row {
        min-height: 50px;
        background-color: #2983be;
    }

    .menu {
        min-height: 50px;
        max-width: 300px;
        background-color: #a5fa06;
        opacity: 0.9;
    }

    .content-wrapper {
        padding-top: 10px; 
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;
}
<body>
    <header>
        <div class="main-row">
            <div class="content-wrapper">
                <div class="float-left">
                    <img class="icon" style="float: left; " src="//placehold.it/50x80" alt="logo image" />
                    <label style="float: left; font-size: large; "><h1>My system</h1></label>
                </div>
            </div>
        </div>
        <div class="menu-row">
            <div>
                <div class="menu">
                    <div class="float-left">
                    <div style="width: 50px height: 50px;">
                        <img class="icon" style="float: left; width: 50%; height: 50%; " src="//placehold.it/50x50" alt="home icon" />
                    </div>
                    <label style="float: left; font-size: medium; "><h2>Home</h2></label>
                    </div>
                </div>
            </div>
        </div>
    </header>
</body>

This is what I am trying to achieve:

enter image description here

How do I get the bottom div to stay under the first div?

Upvotes: 0

Views: 94

Answers (1)

Johannes
Johannes

Reputation: 67738

1.) You need to float the elements inside .float-left, not .float-left itself, so add this:

.float-left > * {
  float: left;
}

2.) and your .menu rule has a max-width setting which prevents it to get any wider than 150px. Erase that.

https://jsfiddle.net/v3vo37v7/2/

Here is also a snippet where additionally I reset the margin of h1 and h2 in the header to 0 to avoid their default vertical offset:

html {
    background-color: #e2e2e2;
    margin: 0;
    padding: 0;
}

body {
    background-color: #fff;
    border-top: solid 10px #000;
    color: #333;
    font-size: .85em;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
}

header, footer, hgroup,
nav, section {
    display: block;
}

.float-left * {
    float: left;
}

.float-right {
    float: right;
}

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

h1, h2, h3,
h4, h5, h6 {
    color: #000;
    margin-bottom: 0;
    padding-bottom: 0;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.75em;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
}

h5, h6 {
    font-size: 1em;
}

    h5 a:link, h5 a:visited, h5 a:active {
        padding: 0;
        text-decoration: none;
    }


/* main layout
----------------------------------------------------------*/
.content-wrapper {
    margin: 0 auto;
    max-width: 100%;  /*960px;*/
}

#body {
    background-color: #efeeef;
    clear: both;
    padding-bottom: 35px;
}

    .main-content {
        padding-left: 10px;
        padding-top: 30px;
    }

header {
}

    .main-row {
        min-height: 85px;
        background: linear-gradient(#d2d2d9, #efeeef, white);
    }

    .menu-row {
        min-height: 50px;
        background-color: #2983be;
    }

    .menu {
        min-height: 50px;
        background-color: #a5fa06;
        opacity: 0.9;
    }

    .content-wrapper {
        padding-top: 10px; 
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;
}
header h1, header h2 {
  margin: 0;
}
<body>
    <header>
        <div class="main-row">
            <div class="content-wrapper">
                <div class="float-left">
                    <img class="icon" style="float: left; " src="https://drive.google.com/file/d/13U6WdvWQhfUF_8qJ8BLKJpLQCPtNgMKZ/view?usp=sharing" alt="logo image" />
                    <label style="float: left; font-size: large; "><h1>My system</h1></label>
                </div>
            </div>
        </div>
        <div class="menu-row">
            <div>
                <div class="menu">
                    <div class="float-left">
                        <img class="icon" style="float: left; width: 50%; height: 50%; " src="https://drive.google.com/file/d/1NAbtOJAariTJatGCcBEY48sR_gyKGMb-/view?usp=sharing" alt="home icon" />
                        <label style="float: left; font-size: medium; "><h2>Home</h2></label>
                    </div>
                </div>
            </div>
        </div>
    </header>
</body>

Upvotes: 1

Related Questions