Nested DIV's

[Stribor45]

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?

Edit fiddle - JSFiddle - Code Playground

[m_hutley]

margin-top the “left” box?

[Stribor45]

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

[m_hutley]

<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;
}

[Stribor45]

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

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

[DaveMaxwell]

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 */
}

[m_hutley]

Well i’m slightly confused by his pictures…

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

[DaveMaxwell]

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…

[Stribor45]

yes green would be around red/yellow

[Stribor45]

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