Alligning two divs next to each other, and two on the next row

Question

I'm trying to align multiple divs with a width relative to the screen size.

However when I try to float them next to each other they jump to the right under each other. I have tried to put a display: inline-block; and float: left; a to the divs, but that doesn't seem to work either.

What I'm trying to achieve

What is happening

#navbarselector {
  float: left;
  width: 75%;
  height: 8%;
  z-index: 1;
  background-color: #B4ADA5;
}

#ButtonOpt {
  float: left;
  width: 23%;
  height: 8%;
  margin-left: 2%;
  z-index: 3;
  background-color: #B4ADA5;
}

#view-2,
#view-1,
#view-interieur-2,
#view-interieur-1,
#view-begane-grond,
#view-eerste-verdieping,
#view-tweede-verdieping,
#view-derde-verdieping {
  float: left;
  width: 75%;
  height: 540px;
  z-index: 2;
  padding-top: 30px;
}

#tabs-1,
#tabs-2,
#tabs-3,
#tabs-4,
#tabs-5,
#tabs-6,
#tabs-7,
#tabs-8 {
  float: left;
  width: 75%;
  height: 540px;
  border: 1px;
  z-index: 2;
  background-color:
}

#cmcVGVL,
#cmcAGVL,
#cmcIVGVL,
#cmcIAGVL,
#cmcBG,
#cmcV1,
#cmcV2,
#cmcV3 {
  float: left;
  width: 25%;
  height: 535px;
  z-index: 1;
  margin-left: 1%;
  background-color: #ab9882;
  padding-top: 30px;
}


  
    2
    1
    Interieur 2
    Interieur 1
    Begane grond
    Eerste verdieping
    Tweede verdieping
    Derde verdieping

Rakib Uddin · Accepted Answer

I think you are looking for css grid implementation. Try this. You will be up and running in no time.

https://learncssgrid.com/

// HTML

    
    
    
    


// CSS
.container{
  display: grid;
  grid-template-column: 70% 30%;
}

Alligning two divs next to each other, and two on the next row

Answers (1)

Related Questions