div positioning / nested divs [closed] - html

Question

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
Assuming I wanted to have a in a div picture on the left side of the screen and descriptions or any other group of text on in another div the right side.
What is the benefit of wrapping both in a third container div, rather than just using the inline-block display to put them side by side?

Answer 1

I'll try to answer this with a simple demo. The issue with using inline-block is that each element with inline-block is treated like a character of text. This means space will be provided to the sides of and below the element. This does not work well when you need to set container elements with a width. This is a common issue with horizontal navigation when using inline-block instead of float or flexbox.
Inline
nav a {
display: inline-block;
width: 25%;
text-align: center;
background-color: rgba(255, 192, 203, 0.5);
}
<nav>
Link 1
Link 2
Link 3
Link 4
</nav>
Notice the gaps between the anchor elements. This is due to them being "inlined."
Float
nav a {
float: left;
display: inline-block;
width: 25%;
text-align: center;
background-color: rgba(255, 192, 203, 0.5);
}
<nav>
Link 1
Link 2
Link 3
Link 4
</nav>
Now the space is gone and each element is 25% the width of the parent element without the extra space being added between the elements.
This demo is another common question and it has to do with and element being inline.
.img-border {
display: inline-block;
border: 2px solid #333;
}
<span class="img-border">
<img src="http://placehold.it/100x100">
</span>
Notice the space below the image? That again is due to the element being "inlined" and treated like a text character. The space is left for what is known as a descender. Lowercase letters like g, j, y drop below the baseline of the text and the portion that does is the descender.
Not only does the extra space become a headache to deal with, it's often easier to control content in general let alone the layout of related content when it's "encapsulated" in it's own container element.

Answer 2

I don't know if this will help you at all but here's a try....
Inline-block to an element generates an inline-level block container. Think of the text inside a tag. They are all ‘inline’ with one another while the tag itself is a block-level container. By understanding this behavior we can use the display property to inline our content next to each other. Since all of our elements remain in the normal flow, we have no issues with a collapsed parent element. In my opinion this is a much cleaner solution which still achieves the desired result. I hope this helps! If not....my apologies.

Answer 3

What is the benefit of wrapping both in a third container div, rather
than just using the inline-block display to put them side by side?
None, the former is actually worse, as it will give you more markup than needed and also make a responsive layout more difficult.
There is many ways to do this and each have its pros and cons, so may I suggest to use the most modern approach, flexbox, which will give you a whole new way to make it responsive, fully dynamic, where the image can have one size and the text will take the remaining.
.parent {
display: flex
}
.parent div {
flex: 1;
margin-left: 10px;
}
<div class="parent">
<img src="http://placehold.it/150" alt="image">
<div>
Some text that might or might not match the image. Some text that might or might not match the image. Some text that might or might not match the image. Some text that might or might not match the image. Some text that might or might not match the image. Some text that might or might not match the image.
</div>
</div>