When zooming out, I would like the black area surrounding my text to expand instead of a white area appearing to the right. I attempted setting width:auto; on both div elements, but the black part disappeared completely. Below is my HTML code:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/stylesheet.css">
<title>lorem</title>
</head>
<body>
<p style="white-space: nowrap">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec ipsum aliquam enim faucibus ultricies ut imperdiet ex. Phasellus ut quam sed velit ultrices tempor non eget urna. In vehicula sodales ante ut malesuada. In odio elit, congue a gravida id, semper non tellus.
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</p>
<div class="div1">
</div>
<div class="div2">
</div>
</body>
</html>
Below is the CSS section:
@font-face {
font-family: "Consolas";
src: url("Consolas.ttf");
}
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
main {
position: relative;
}
p{
display: inline-block;
font-size:15px;m
font-family:"Consolas";
margin:0 3px;
width:900px;
position:relative;
}
.div1{
background-color:black;
float:right;
height:40000px;
width:50px;
}
.div2{
background-color:black;
float:left;
height:40000px;
width:50px;
}
The issue can be better understood with these three images. A white space fills in as I zoom out on the text posted on my website rather than the black portion beside the text expanding. The red lines indicate where I want to see black instead of white...
Image without zoom Image at 90% zoom Image at 70% zoom
I'm new to this and received help from a friend with the code, so I might not be approaching it correctly. Thank you in advance :)