relative css columns positioning blocks

Question

there is

<div id="a"></div> <div id="b"></div>

In order to place block B next to block A (to the right of block A), we need this code:

 #a{ positson: relative; top:0px:left:0px; widht:100px; height:200px; } #b{ positson: relative; top:-200px:left:100px; widht:100px; height:200px; }

But if block A does not have a fixed height (there will be a lot of text in it or not), then how is block B positioned?

If you make the block A absolute , then the content that it contains, comes out and will stand down (below the bottom page elements). Placing block B in block A does nothing good.

This is the problem WITHOUT specifics. I singled out what I don’t know.

I finish:

Although it seems you can put these two divas into one div. And make (assign a property) to this justify-content: flex-start; . I do not know, you need to check. I'll check it off.

HamSter HamSter 18k five 33 83 · Accepted Answer · 2016-10-07T11:44:07

You have gross errors in css!

right:

  #a{ position: relative; top:0px; left:0px; width:100px; } #b{ position: relative; top:-200px: left:100px; width:100px; height:200px; }

In order to place block B next to block A (to the right of block A), we need this code:
There is no comment here at all (we return to point 1.).
You can set B to be close to block A in several ways:
- inline-block
```
  #a, #b { display: inline-block; vertical-align: top; } 
```
- float: left
```
 #a, #b { float: left; } 
```
- others (flex, table, ...)

For example:

 #a{ position: relative; top:0px; left:0px; width: 100px; } #b{ position: relative; top:-200px: left:100px; width:100px; height:200px; } #a, #b { float: left; } /* Стили для наглядности */ #a { background: #ccc; } #b { background: #777; }

 <div id="a"> контент без фикс. высоты </div> <div id="b"></div>

without content:

 #a{ position: relative; top:0px; left:0px; width: 100px; min-height: 1px; } #b{ position: relative; top:-200px: left:100px; width:100px; height:200px; } #a, #b { float: left; } /* Стили для наглядности */ #b { background: #777; }

 <div id="a"> </div> <div id="b"></div>

Wrap option: .wrap :

 .wrap { position: relative; display: flex; } #a{ width: 100px; } #b{ width:100px; height:200px; } /* Стили для наглядности */ #a { background: #ccc; } #b { background: #777; }

 <div class="wrap"> <div id="a"> </div> <div id="b"></div> </div>

Concerning errors: in terms of css - the parser, what's the difference how the code is written: in one line or in many lines.
The problem is not the lines, but the spelling is NOT positson , but the position ;
And the lines, of course, have nothing to do with it; you can write properties in one line, the main thing is to separate them ;
Aah, so I wrote it right here on the site, and not in the IDE.
That's probably because I have only half a word correctly written.

relative css columns positioning blocks

1 answer 1

More articles: