The left and right layout of css div has no effect, and the right one is pushed to the bottom_html/css_WEB-ITnose

In the CSS div, I first made a div background, and then wanted to put two

inside this

, which means dividing a web page in half, but a problem arises , that is: I first set the height and width of the

on the left, and placed the things, and then when I made the

on the right, it was not displayed side by side with the first

, but It is arranged at the bottom, and the right side is empty (the width of the two

s inside does not exceed the background). Please help. Can anyone tell me how to make the two

s inside appear side by side? It would be better to be more detailed. Thanks!

I added style: float:left; to the first div but it had no effect. I also added float:right; to the second

and it had the same effect!

Reply to discussion (solution)

                                             ="text/css">
.bd{position:relative;}
.bd-left{height:300px;;margin-right:300px;background:#ccc;}
.bd- right{width:300px;height:300px;position:absolute;top:0;right:0;background:#AAA;}

                                                                                                      div class="bd">
                                                                         class="bd-right">
                                           

Use absolute positioning position:absolute;

First of all, thank you for your answers. The problem is solved, not what 2# said. I tried that one and the situation is like this, in a body Using BACKGROUND: #d6e4ef; COLOR: #000000 will affect the div, and putting BACKGROUND: #d6e4ef; COLOR: #000000 into the div will not work. Finally, removing BACKGROUND: #d6e4ef; COLOR: #000000 will work. But I still don’t understand the principle. I hope you can explain it. Thank you.

I think there is something wrong with the syntax of the code you removed.

It is not parallel, 1. Being squeezed out by other elements. Two: The width is not enough.

You can use positioning without floating
These things will not happen

It’s very simple: just change float:right to float:left

float: left


First of all, thank you for your answers. The problem is solved, not what 2# said. I tried that one and the situation is like this. I used BACKGROUND in a body: #d6e4ef; COLOR: #000000 will have an impact on the div. Even if you put BACKGROUND: #d6e4ef; COLOR: #000000 into the div, it won't work. Finally, removing BACKGROUND: #d6e4ef; COLOR: #000000 will work, but I still don't understand. I hope you can explain the principle, thank you.


It should have nothing to do with this. It seems that the poster still hasn’t found the key to the problem.

My experience is that if you can use table for this kind of thing, use table for layout. If your program involves accessibility , i18n, UX designer needs to change frequently, etc., which is quite troublesome