I am attempting to position two divs next to each other. The initial one is 200x200 pixels and the second one should be positioned 10 pixels to the right of the first one. The second div has a height of 200 pixels, and its width needs to extend all the way to the right side of the page.
Here is what I have so far:
<html>
<head>
<style>
div.div1 {
border: 1px solid red;
color: red;
width: 200px;
height: 200px;
float: left;
}
div.div2 {
border: 1px solid black;
width: calc(100% - 210px);
height: 200px;
float: left;
margin-left: 10px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2">Test123</div>
</body>
</html>
The current code meets the initial requirements, but the issue arises when setting width: 100%, causing it to display underneath. However, specifying a pixel value seems to work, with the drawback that it doesn't adjust as the window size changes. How can I resolve this to ensure the second element extends fully to the right?