【】Place two DIVs side by side in one DIV. The size of the div on the right is variable. _html/css_WEB-ITnose

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:

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
-8" />
080b747a20f9163200dd0a7d304ba388
html, body, div { margin: 0; }
div { height: 400px; }
#divLeft { background: blue; width: 200px; float: left }
#divRight { background: green; margin-left: 200px }

531ac245ce3e4fe3d50054a55f265927
b2386ffb911b14667cb8f0f91ea547a7Test683b85afec769a2dae32e320b747e360
9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d
1b4b7b51250a397e525e2375377b7b1416b28748ea4df4d9c2150843fecfba68

2cacc6d41bbb37262a98f745aa00fbf0

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

Look at your width design Whether the size is equal on the left and right and the height

You can also use DWcs5 to insert a table with 2 rows and 2 columns

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn