How to seperat those two
from one line?

Question

I have seen a lot of posts to put two elements into one line. My problem is exactly the opposite! As you can see in the code there are five boxes and a paragraph next to it, which should be below the boxes instead. Can someone please tell me how to fix this? I am learning HTML/CSS right now and I'd like to work this out here without grid/flex before I move on and learn those.

HTML:

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width-device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="style.css">

    </head>

    <body>
        <nav>
            <div id="navigation">
                <div class="wrapper">
                    <div id="logo"></div>
                    <div id="menu">
                        <a href="#">Home</a>
                        <a href="#">About Us</a>
                        <a href="#">Contact</a>
                        <a href="#">Imprint</a>
                    </div>            
                </div>
            </div>
        </nav>

        <div id="main">
            <div class="wrapper">
               <div id="top-boxes">
                   <div class="box"></div>
                   <div class="box"></div>
                   <div class="box"></div>
                   <div class="box"></div>
                   <div class="box"></div>
               </div>

            <p>
              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

            </p>
         </div>
        </div>
    </body>
</html>

CSS:

 *
{
    margin: 0;
    padding: 0;
    text-decoration: none;
}

.wrapper
{
    margin: 0 auto;
    width: 70%;
}

/* Navigation */

#navigation
{
    width: 100%;
    height: 5em;
    background-color: darkgrey;
    position: fixed;
    top: 0;
}

#logo
{
    margin: 1em;
    width: 2.5em;
    height: 2.5em;
    background-size: 2.5em 2.5em;
    background-image: url("rocket.png");
    float: left;
}


#menu
{   
    margin-top: 2em;
    margin-right: 1em;
    float: right; 
}

#menu a
{
    color: #fff;
    font-family: sans-serif;
    font-style: normal;
    font-weight: 100;
}

/* Inhalt */



#main p
{
    margin: auto;
    margin-top: 7em; 
}

.box
{
    width: 5em;
    height: 5em;
    padding: 1em;
    margin: 1em;
    background-color: gray;
    float: left;

    display: block;
}

Here is the codepen link:

https://codepen.io/andy4117/pen/KKpXEwJ

Thank you in advance!

@G-Cyrillus yes `p{clear:both}` will ignore the float of the previous element — Ziad Darwich, Mar 14 '20 at 20:49

Ziad Darwich · Answer 1 · 2020-03-14T20:55:36.923

2

.box
{
    width: 5em;
    height: 5em;
    padding: 1em;
    margin: 1em;
    background-color: gray;
    /* float: left; */

    display: inline-block;/* instead of block */
}

EDIT

If you want to use float for some reasons, not recommended though you can add float to your add float:left to your #top-boxes element.

#top-boxes{float:left}

edited Mar 14 '20 at 20:55

answered Mar 14 '20 at 20:31

Ziad Darwich

397
3
10

Comments are not for extended discussion; this conversation has been [moved to chat](https://chat.stackoverflow.com/rooms/209814/discussion-on-answer-by-ziad-darwich-how-to-seperat-those-two-div-from-one-lin). – Samuel Liew Mar 18 '20 at 01:08

How to seperat those two from one line?

1 Answers1

How to seperat those two
from one line?