Why does the text go outside the div container? - html

Question

In this example:
div {
width: 100px;
height: 100px;
border: 8px solid #333;
}
#boxGreen {
background-color: green;
position: relative;
left: 150px;
}
#boxRed {
background-color: red;
float: left;
}
<div id="boxRed">Text 2</div>
<div id="boxGreen"> Text 1</div>
Why does the "text 1" go outside the "boxGreen"? How can I make the
text inside the box?

Answer 1

Add display: inline-block; inside your greenbox div like this:
#boxGreen {
display: inline-block;
background-color: green;
position: relative;
left: 150px;
}

Answer 2

div {
width: 100px;
height: 100px;
border: 8px solid #333;
}
#boxGreen {
background-color: green;
position: relative;
left: 50px;
display: inline-block;
}
#boxRed {
background-color: red;
float: left;
}
<div id="boxRed">Text 2</div>
<div id="boxGreen">Text 1</div>
You are missing display: inline-block; in your #boxGreen
When you make a position relative you have to add display: inline-block;

Answer 3

CSS
div {
width: 100px;
height: 100px;
border: 8px solid #333;
}
#boxGreen {
background-color: green;
display: inline-block;
}
#boxRed {
background-color: red;
display: inline-block;
}
HTML
<div id="boxRed">Text 2</div>
<div id="boxGreen"> Text 1</div>
Solution 1 Mark the elements as display: inline-block; Learn More Here
Solution 2 Wrap the elements in another container and mark it as display: flex; Learn More Here
Problem Your green element wasn't actually aligned with the red element, haha. It just appeared that way, remove the float: left and you'll see the container is actually beneath it. :)

Answer 4

float is weird. It can be a tricky thing to work with because you get strange cases like this. A floating element is basically ignored by block level elements, but not by inline elements. Because your green box is a block, and the text inside is inline, the text is pushed down.
If you remove the float: left from the red box, you will see the green box move down and be realigned with the text. This is because both block and inline elements are now being pushed down.
If you instead set the green box to display: inline-block, the green box will be pushed around by the floating red box because it is now partially inline (although it will not wrap to a new line like the text did because it is also a block).
As you can see, floating elements have some strange behavior, which is why I generally avoid them. Unless you need some inline elements to wrap around some other element, you can usually use a flexbox or grid to do what you need with fewer side effects.
CSS-Tricks has some great articles to help you understand floats, flexbox, and grid.

Answer 5

A better solution is to wrap the div elements in a container. After, you can use display: flex; to set it in row.
.container {
width: 100%;
display: flex;
}
div#boxGreen,
div#boxRed {
width: 100px;
height: 100px;
border: 8px solid #333;
margin-right: 30px;
}
#boxGreen {
background-color: green;
}
#boxRed {
background-color: red;
}
<div class="container">
<div id="boxRed">Text 2</div>
<div id="boxGreen"> Text 1</div>
</div>

Answer 6

attributing the display to inline-block for your #boxGreen should work
#boxGreen {
background-color: green;
position: relative;
left: 150px;
display:inline-block;
}