why is there space above sidebar

Question

I'm experimenting with containers using float and I can't figure out why there is extra white space above the .right div box. When I remove the image, the space is gone. But when put the image back in, there is spacing above the red section. Can somebody please help me understand why this is happening?

#container {
    width: 1000px;
    margin: 0 auto;
    background-color: lightgray;
}

.left {
    width: 700px;
    float: left;
    background-color: blue;
}

.right {
    width: 300px;
    margin: 0 0 0 700px;
    background-color: red;
}

<html>
<head>
</head>

<body>
<div id="container">

    <img src="https://picsum.photos/300/300?image=0">

    <div class="left">
        <p>Insert dummy text here. Insert dummy text here. Insert dummy text here. Insert dummy text here. Insert dummy text here. Insert dummy text here. Insert dummy text here. Insert dummy text here. Insert dummy text here. Insert dummy text here. Insert dummy text here.</p>
    </div>

    <div class="right">
        <p>Insert dummy text here. Insert dummy text here.</p>
    </div>

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

p has a default margin, and you are facing margin collapsing — Temani Afif, Oct 11 '18 at 00:37

score 2 · Answer 1 · answered Oct 11 '18 at 00:39

Take the <p> tags out or add 0 margin.

#container {
    width: 1000px;
    margin: 0 auto;
    background-color: lightgray;
}

.left {
    width: 700px;
    float: left;
    background-color: blue;
}

.right {
    width: 300px;
    margin: 0 0 0 700px;
    background-color: red;
}

p {
  margin: 0;
}

<div id="container">

        <img src="https://www.billboard.com/files/styles/768x433/public/media/Backstreet-Boys-1997-portrait-billboard-1548.jpg" height="100">
        
    <div class="left">
        <p>Insert dummy text here. Insert dummy text here. Insert dummy text here. Insert dummy text here. Insert dummy text here. Insert dummy text here. Insert dummy text here. Insert dummy text here. Insert dummy text here. Insert dummy text here. Insert dummy text here.</p>
    </div>

    <div class="right">

        <p>Insert dummy text here. Insert dummy text here.</p>
    </div>

</div>

why is there space above sidebar

1 Answers1