I have a question . I wonder what is the way to position a div next to another div . But if you change the width of the screen one of the divs will be positioned below the other and will be adaptable to the width of the screen.
.contenido {
display: flex;
flex-direction: row;
background-color: #e9e9e9;
height: 100%;
max-width:800px;
background-color: #fff;
color: #FDFFFF;
}
#inner {
margin: 1px;
width: 100%;
background: black;
border-radius: 5px;
padding: 40px;
display: inline;
color: #FDFFFF;
justify-content: center;
margin: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media screen and (max-width: 480px) {
#inner {
width: calc(100%);
}
}
</style>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<div class="contenido">
<div id="inner">div 1</div>
<div id="inner">div 2</div>
</div>
What I'm looking for is the
div inner
are next to each other but that even when reducing the screen width one of them is placed under the other
Here I have an answer (That modifies your css code a bit) to make it work:
I will then explain a little what has changed...
As you can see I put:
display flex, is a css commonly called or recognized as: "Flexbox", this is used in the so-called "box positioning" in css, and is widely used when you need to make a responsive design page (that is, adaptable to mobile devices).
In our case, in order to identify where we should put the:
and the other attributes, it is enough to know which is the "parent" container, of the "children" elements, which we want to either "center", vertically, horizontally or both or if we want to put them one next to the other, this will depend on the user.
In our case, the parent container of our child elements, which would it be?, very simply, is .content, which is the container that is hierarchically closest to its children.
So we already know what we should put in this one:
and his other attributes...
There are many different ways to center and align with flexbox, to see some of these positions and ways to distribute elements, I recommend you check the following link:
flex box
Well, continuing with the explanation, without further ado, as you may have noticed (If you visited the flexbox link), you may have noticed that:
what it does is align all the content to the center horizontally, it does not leave spaces, so if you want to put spaces between each element, you must use another distribution of justify-content: center; or, simply add a margin to all the elements that have the id #inner, except the last one.
This one here does the same thing as the previous one, but the difference is that it aligns vertically and not horizontally, the result of combining both is that all child elements will be aligned both horizontally and vertically.
flex-flow, is the abbreviation of actually two attributes that can be defined separately, it's like "the combination of these", separated, these two are:
joining them would be:
The first parameter "row" defines how the objects are distributed in that container and therefore how they are aligned, in this case "row" is a row in English, so its distribution will be in a row, and wrap, defines if the element does not fit in the parent container, what this will do is move the other divs down.
Of course row and wrap are not the only values that can be taken, there are many, among these are: row wrap, row no-wrap, row reverse, etc.
Finally:
to inner, it is necessary to add:
Because from what I've been working with flex-box, I've learned that if you want to align your content well you should use inline-block, since inline disables flexbox, inline-block allows flex-box to do what you need it to do , and block the problem is that the size of the div will be equal to that of its parent container, therefore since there is no space, they will always be aligned one below the other (And this is not what you want).
By the way, I saw that your default div had display: block, for this reason it was necessary to add that line, if your containers had defaulted to display: inline-block, we could have skipped putting: display: inline-block in #inner.
Flex grow determines if an element can span the full width of an element or not, i.e. "can grow", setting 0 means it can't inherit this behavior, setting 1 means it can.
try placing flex-grow: 1, in .content
I hope my answer has helped you! Good luck!
Postscript: as someone who already answered the question says: Yes, it is true that it is better to put a class to #inner, and use the class instead of the id in CSS, since as he says, you are using css in several elements, no only one, and the id, it is supposed to be unique for each element!, for that there are classes :)
Well the following occurs to me
Correction to the application of the attribute
id
The
id
are unique elements, so applying them to more than one element is considered wrong, so your code should useclass
which is to apply an identifier to more than one element.Application of
CSS GRID
You can create a grid with the help of CSS Grid so that you can build what you are looking for
CLARIFICATIONS
display: grid;
Generates a block-level grid or gridgrid-template-columns
Generates the number of columns we will get, using1fr
2 times we get 2 columnsMAKING IT RESPONSIVE
Finally to make it responsive apply a media query like this
div
be below the other we apply againgrid-template-columns
but this time we assign the value1fr
that it will generate a single columnAll the code at the end should look like this
Check the working example
The simplest thing I can think of, without using media queries or grid. When the viewport is less than 400px (a little more actually, because of the margins and others) the two boxes will be placed one below the other at 100% width. Be careful, IDs are not used to assign classes, it is bad practice, much less repeat them.