As shown in the picture:
I want to make a web page, in which the head is a div, with an image on the left and a background color on the right (the same color as the right side of the image). According to the browser The size of repeat-x.
Below is a #middle div nested with two divs called left and right, where the width of left is 200px; the right edge of right should be consistent with the right edge of the head.

The problem is that the right one is always narrower and cannot be adapted to the page size? ? ?

Reply to discussion (solution)

Add a div to the right div and add an inner class

div1{float:left;position:relative;margin-right:-200px;}div2{float:right;width:100%;}div2 .inner{margin-left:200px;}

http://jsfiddle.net/jikeytang/b75z9/2/
If the Internet speed is fast, open it and take a look.

Go back to 2L and add margin-right:-200px; then the left side disappears

"The problem is that the right side is always narrower and cannot be adjusted according to the page size. Adapt? ? "What does it mean?
If the left width is fixed, the right side should fill the remaining width of the common container and adapt according to the page width. When the page width is small, the right side will be very narrow. If you want the right div not to be too narrow when the page width is small, you can define a min-width for the right div, or use media query for responsive layout to display the right or left div vertically, not in one line.
Here is an example of a simple two-column layout:




-8" />