#1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2016
    Location
    Lakewood, WA
    Posts
    207
    Rep Power
    17

    Arranging Div "Boxes"


    I have two side-by-side <div> "boxes" inside a container <div>, like this:
    Code:
    .container {
        width: 100%;
        display: flex;
        background: white;
        padding: 10px;
    }
    .one {
        width: 50%;
        height: auto;
        background: white;
    }
    .two {
        flex-grow: 1;
        height: auto;
        background: white;
    }
    Within the container, I would like another <div> "box" across the top over the two side-by-side <div> "boxes".

    I'm not seeing how to do this.

    Ideas?
  2. #2
  3. Lazy Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,384
    Rep Power
    9645
    IIRC, put the box before the other two at 100%, then turn on flex's wrapping.
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2016
    Location
    Lakewood, WA
    Posts
    207
    Rep Power
    17
    I don't see a lot of use of the "flex" property. Any reason?

IMN logo majestic logo threadwatch logo seochat tools logo