Search code examples
htmlpositionalignment

Div positioning - Aligning one big div next to stack of divs

I'm trying to align one big div next to a stack of three smaller divs. How do i allow the big div to take place on their right?

Thanks in advance.

Fiddle here

.left_stack {
    width: 350px;
    height: 75px;
    background-color: black;
    position: relative;
}

#left_banner1 {
    background-color: yellow;
}

#left_banner2 {
    background-color: red;
}

#left_banner3 {
    background-color: blue;
}

#right_banner {
    height: 225px;
    width: 350px;
    background-color: purple;
    float: right;
}
<div id="banner_section">
           <div class="left_stack" id="left_banner1"></div> 
           <div class="left_stack" id="left_banner2"></div> 
           <div class="left_stack" id="left_banner3"></div>
           <div id="right_banner"></div> 
       </div>

Solution

  • https://jsfiddle.net/zyddtxnn/1/

    #banner_section {
   display: inline-block;
}

    Parent div's width = Child's width.