0

I have 2 divs side by side. I set a width for the div on the left and background colour for the div on the right. The background colour of the div on the right overflows into the left div.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <link rel="stylesheet" href="style_.css"> -->
    <title>Page</title>
</head>

<style>
    #leftdiv{
        float:left;
        width: 20vw;
        }
    #rightdiv{
        background-color: silver;
    }
</style>

<body>
    <div id="leftdiv"> Left Div</div>
    <div id="rightdiv"> Right Div</div>
</body>
</html>

How can I set the right div background colour so that it does not overflow to the left div (without setting a background colour for the left div).

mapperx
  • 197
  • 1
  • 2
  • 12
  • 2
    That's how float works: it takes the element out of the document flow. Neighbouring unfloated elements will appear underneath your floated element. If you want a two-column layout where element boundaries don't bleed into each other, use CSS flexbox or grid. – Terry Feb 07 '23 at 08:05
  • Right, i forgot it takes it out of the flow. – mapperx Feb 07 '23 at 08:09

0 Answers0