1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Align 2 Boxes Verticaly With An Image Between

Discussion in 'HTML & Website Design' started by lastpeony, Jul 26, 2018.

  1. #1
    I am trying to align 3 boxes and 2 images.

    2 boxes vertically with there is an img between

    3rd box standing right of them with an arrow img pointing it like this:
    [​IMG]

    This is what i tried:

    Css:
    .cont1 {
      display:flex;
      flex-direction:row;
    }
    
    .box{
      margin:0 auto;
    
      width: 80px;
      height: 80px;
      background: #8C8C8C;
    border: solid 3px #8B0000;
    }
    
      .burning{
        background-image : url("http://i.hizliresim.com/VDrvRy.gif");
        width: 350px;
      height: 250px;
    
      }
    Code (markup):
    Html:
    <div>
    <div className="box">
    Box 2
    </div>
    <div  className="cont1">
    <div className="burning">
    </div>
    <div> IMG2 </div>
    <div className="box">Box 3</div>
    </div>
    <div className="box">
    Box 1
    </div>
    </div>
    Code (markup):
    This is how it looks:

    [​IMG]
    SEMrush
    I also want to center them
     
    lastpeony, Jul 26, 2018 IP
    SEMrush
  2. Web_Dev_Chris

    Web_Dev_Chris Active Member

    Messages:
    130
    Likes Received:
    5
    Best Answers:
    1
    Trophy Points:
    68
    #2
    Sorry that no one answered.

    I would do something like this:
    https://jsfiddle.net/xn24umah/

    <div class="container">
    
        <div>
            <span>content 1</span>
        </div>
       
            <div>
                <div></div>
                <div></div>
                <div></div>
            </div>
    
        <div>
            <span>content3</span>
        </div>
    
    </div>
    HTML:
    .container{
      margin:auto;
      width:800px;
      height: 400px;
      border: 1px solid #000;
    }
    
    .container div:nth-child(1){
      margin:auto;
      margin-top:10px;
      width:300px;
      height: 100px;
    }
    span{
      display: block;
    padding-top:40px;
    }
    .container div:nth-child(1) + div{
      margin:auto;
      margin-top:10px;
      width:300px;
      height: 100px;
    }
    .container div:nth-child(1) + div + div{
      margin:auto;
      margin-top:10px;
      width:300px;
      height: 100px;
    }
    .container div:nth-child(1) + div div{
    width: 50px;
    height: 80px;
    margin-right: 24px;
    float:left;
    border: 1px solid #000;
    }
    
    Code (CSS):
     
    Web_Dev_Chris, Nov 12, 2018 IP