Nested DIV's

HTML & CSS
1

I am trying to nest these containers so that I ended up with a div containing “AAA” on the same line but having some trouble doing it. How would I fix it so AAA is on the same line?

2

margin-top the “left” box?

3

That just pushes it down but doesn’t move the div (red and yellow) to the right. I want to have something like this

image

4 
<div class="left">AAA</div>
<div id="my_container">
        <div class="container">

#my_container {
    border: green 3px solid;
    width: 50%;
    display: inline-block;    
}

.left {
    border: solid 1px red;
    background-color:yellow;
    width: 100px;
    display: inline-block;
}
5

It didn’t work for me. This is what I got

image

This is the full code here https://jsfiddle.net/ue32qhs4/4/

6

Why not use flex?

#my_container {
    border: green 3px solid;
    width: 50%;
    /* add these two lines */
    display:flex;
    flex-direction: row;
}
.left {
    border: solid 1px red;
    background-color:yellow;
    width: 100px;
}

.container {
    background-color: #FDBF57;
    border-radius: 15px;
    border: red 2px solid;
    margin: 1px;
    flex-grow: 1; /* add this to fill remaining space */
}

image
image1234×617 25.3 KB

2 Likes
7

Well i’m slightly confused by his pictures…

Is the intent to have the green box around the red/yellow one? or beside it?

8

The green border comes from the my-container div, which wraps the other two. That was the structure he had in his last fiddle. I just used flex to sit them side by side…

1 Like
9

yes green would be around red/yellow

10

This works for me. By the time I saw this post I was able to do it with display: grid as well. Thank you very much

1 Like