Overlap issue: two of my divs are not positioned as expected

Question

I don't know why, but my html page's 2 divs overlap each other instead of appearing side by side. Also, the blue div doesn't take up 100% of the height like it should. NOTE: The blue div currently only has 1 element (input)

This is my CSS code:

.bluediv {
    height: 100%;
    width: 16.3%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    box-shadow: 0px -10px 50px black;
    float: left;
}

.reddiv{
    height: 100%;
}

Thank you, Internet Flame

Answer 1

You can use the default orientation row to display flex like this:

html,
body {
  padding: 0;
  margin: 0;
}

.sect-div {
  width: 100%;
  display: flex;
  height: 400px;
}

.sect-div .side {
  width: 20%;
  background-color: #007fff;
}

.sect-div .main {
  width: 80%;
  background-color: #ff0000;
}

  
width = 20%
  
width = 80 %

Fixed on one side:

html,
body {
  padding: 0;
  margin: 0;
}

.sect-div {
  width: 100%;
  height: 100vh;
  display: flex;
  overflow: hidden;
}

.sect-div .aside {
  width: 20%;
  padding: 5px;
  box-sizing: border-box;
  background-color: #007fff;
}

.sect-div .main {
  width: 80%;
  padding: 20px;
  box-sizing: border-box;
  background-color: #ff0000;
  overflow-y: auto;
}

  

    
width = 20%
  
  

    
width = 80 %
    

      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident, nihil nobis. Assumenda ipsam ad suscipit qui dicta vero porro rem sequi? Non dolore magni sed itaque minima esse repellendus vero. Recusandae dignissimos, commodi natus assumenda architecto
      aut libero corporis, magni ut quo, soluta voluptate. Similique, perferendis. Nam, recusandae debitis totam nihil reiciendis quod, atque distinctio adipisci quo esse necessitatibus dolorum! Incidunt corporis ex placeat, est doloribus magni repellendus
      deleniti nam recusandae eveniet dolorem. Dolores aliquid assumenda perferendis odit esse dignissimos, corrupti mollitia ea doloremque libero molestias. Ab nisi voluptas provident. Voluptatum sit aut sequi ab sunt blanditiis asperiores dicta quos
      totam accusamus voluptatem deserunt veritatis possimus suscipit earum corrupti esse ducimus illo, consequuntur omnis rem. Laudantium debitis eveniet facilis recusandae. Minus, exercitationem. Minus distinctio ipsam, vero ab autem consectetur iusto
      soluta, eligendi similique consequatur natus, laborum asperiores amet repudiandae expedita temporibus fugit aliquid sint quo quod libero blanditiis adipisci. Ea. Earum minus, doloribus recusandae tempora fugiat, sunt voluptates nesciunt a magnam
      placeat impedit harum dicta aspernatur doloremque debitis neque exercitationem cumque voluptate quod possimus? Dicta vel fugit officiis voluptates consequuntur. Nisi praesentium, at, quis beatae voluptate similique doloribus iusto tempore saepe
      officiis tempora molestiae necessitatibus reiciendis asperiores repellat unde dicta vel aliquid enim dolorem. Nulla excepturi sapiente debitis aliquid assumenda! Vitae nulla quos laborum provident harum maiores ex dolorem, distinctio corrupti est
      amet ipsa rem possimus blanditiis quasi architecto deserunt a debitis velit accusantium voluptate beatae. Commodi cum atque iste? Saepe assumenda vitae repellat optio minus ad nulla illo ducimus ullam et sit atque aliquid dignissimos aliquam eius
      quae earum, eum tenetur ratione ex eligendi cumque vel similique. Modi, atque! Sit quam ut et a ducimus qui eveniet voluptas corrupti nam totam libero ipsum cum repellat magnam dolores, incidunt saepe nostrum! Nemo ipsa aspernatur dolorum nulla
      possimus voluptas voluptates optio? Adipisci saepe autem vitae totam sunt ab, voluptatibus omnis, voluptas incidunt reprehenderit illo praesentium. Magnam maxime dignissimos totam tempora quo id velit eligendi! Quas tenetur accusantium culpa doloremque
      ipsa assumenda? Ab perspiciatis sequi consequuntur ratione voluptates illum architecto incidunt, dolorem perferendis ad vel suscipit magnam aspernatur distinctio provident vero velit error autem aliquid. Dolorum nesciunt saepe repellat sed, commodi
      dolorem! Quis minima, impedit autem dolore deserunt alias sunt animi porro quae ratione dignissimos, ipsum fugit quaerat tempore repellat adipisci vel deleniti cupiditate commodi iste dolorem accusamus a! Tempore, quia ut. Repellendus, debitis ipsam
      quasi sed fuga consequatur. Quo, expedita? Voluptatibus laborum aut nisi illum impedit culpa doloribus ullam autem, quae soluta quidem! Reprehenderit dolorem impedit quis, pariatur adipisci facere nemo. Soluta numquam placeat saepe, sit veniam cupiditate
      praesentium eos iure omnis odio consectetur vel corrupti quis, ipsa provident perspiciatis. Cumque, vitae! Unde alias atque voluptatum debitis deserunt possimus veniam cumque. Vero aut tempore unde eum harum, aliquam beatae praesentium nulla atque
      vel ipsam natus? Recusandae ipsa repudiandae harum inventore distinctio, quod neque perspiciatis, ducimus animi doloremque, illo enim rerum aut. Voluptas molestiae possimus itaque, rem dignissimos non mollitia ipsum quo pariatur cum! Atque tempora,
      assumenda soluta sed doloribus debitis iusto ratione delectus minus necessitatibus velit corporis officiis maxime porro minima? Harum, voluptatum sapiente nulla laborum at nobis temporibus iste vitae distinctio ipsum saepe beatae amet minima id,
      consequatur delectus iure error et ab quis fugiat! Libero maiores maxime beatae! Tempore. Quasi aliquid voluptatibus odio dolores molestias consequatur repudiandae ipsum corporis neque officiis, ad fuga dicta repellat, earum sed dolore et voluptatum
      reiciendis saepe, obcaecati voluptates maxime cupiditate quod sint? Nesciunt. Maiores consequuntur obcaecati ratione iure suscipit pariatur laudantium eius natus voluptate sint nostrum impedit odio deserunt placeat, quod ducimus, architecto nesciunt
      facilis? Sit dicta tempore tenetur culpa, ullam quis sed? Accusamus sit recusandae quidem aperiam sapiente. Ratione autem odit quo odio officiis optio rem magni magnam illum, tempora dolores similique dignissimos necessitatibus non alias labore,
      repellat eos itaque dolorum voluptates! Voluptatibus, quasi exercitationem quae recusandae quidem porro praesentium optio magnam quas sed, corrupti necessitatibus ex ratione alias eius odio possimus cum sapiente, dolore eos officia perferendis accusantium
      qui vel. Quo? Perferendis sint labore itaque, asperiores suscipit omnis, dolorum atque laudantium aspernatur odio laboriosam sunt at quisquam sit aut veniam voluptas inventore ipsam expedita blanditiis laborum explicabo nesciunt, architecto modi.
      Labore. Repellat dolor officia quos maxime iusto sed! Magni quod quibusdam deleniti animi harum? Enim soluta dolorem magni a ipsam aspernatur cumque molestiae, tempore tenetur culpa veniam eos laudantium animi vel! Debitis cumque non corrupti dolorem,
      architecto nesciunt autem, ea perspiciatis aliquid, laborum aspernatur a asperiores maiores voluptatem? Molestiae esse aspernatur repellendus, odio minima, doloremque, maiores dolores amet quas iusto reiciendis. Ea, incidunt! Aliquam incidunt voluptates,
      voluptate laudantium vel explicabo necessitatibus fugit laboriosam excepturi veniam enim nesciunt dolore. Odit, quas culpa provident a explicabo, consequatur officiis voluptatibus temporibus placeat, eveniet sapiente. Quia amet et aliquam ipsa,
      nulla, repellat, facilis rem tempora harum eligendi quos. Deleniti fugiat molestiae sed deserunt, consequuntur commodi excepturi aliquam quam, nihil culpa quasi soluta quos eum ratione? Illum temporibus quia minus, recusandae, culpa autem sequi
      porro officia magni eligendi voluptates facilis consequatur dolore? Officia ratione cum est neque inventore ut accusamus voluptas dolores, distinctio, optio quibusdam magni. Odio quidem expedita quasi, possimus aperiam tempore blanditiis veritatis
      soluta ex iste voluptas maiores! Dignissimos laudantium earum minus alias dolorem sed est a ullam molestias? Consequuntur sunt unde ipsam fugit? Sed, praesentium excepturi repellendus harum voluptatum, obcaecati magni ex accusamus est natus aliquid
      molestiae. Mollitia, magnam. Vitae fuga optio quia sit ullam fugit cupiditate minus maxime quas? Nemo, quidem asperiores? Repudiandae aut explicabo illo labore, consectetur ab nam minima, incidunt dolorum reprehenderit, eaque soluta quaerat laborum
      sed autem! Dolorem voluptate possimus iure, quae accusantium voluptatibus molestiae voluptatem cum optio tempore! Sunt laborum libero, est quaerat ut itaque similique alias explicabo ipsam mollitia fuga ea nisi voluptates non totam aspernatur ipsum
      molestiae quo saepe distinctio et sint eveniet accusantium neque! Perferendis. Tenetur placeat impedit tempora incidunt eligendi qui fuga laborum consequuntur amet. Quibusdam voluptate officiis iure! Accusamus voluptatum, quam, hic officia veritatis
      praesentium necessitatibus beatae maiores fugiat nemo soluta, et voluptates. Nobis adipisci tenetur a facilis, architecto, omnis, odit illum fuga error laboriosam similique assumenda sapiente. Iure, consequatur. Illum facilis debitis officiis doloribus?
      Eaque modi ducimus vitae. Quod sint rerum blanditiis. Cumque dolores voluptatibus veritatis placeat dolor eaque molestias asperiores quia. Eos, illum. Perspiciatis repellat minus nesciunt omnis, praesentium quod ad magni voluptas maxime facilis
      aut asperiores blanditiis nulla deserunt saepe? Commodi nostrum eveniet doloremque nobis ratione corporis ex praesentium omnis quas sint voluptatem itaque totam in explicabo unde, harum, vero, enim qui? Maxime deleniti tempore temporibus! Illo odio
      libero quidem! Veritatis quos reiciendis odio magnam? Sequi, totam ea laborum at rerum magnam hic, iure voluptatibus porro distinctio ipsam amet cum illum qui consectetur repellendus fugiat, incidunt pariatur optio voluptate possimus. Fugiat temporibus
      ad at sequi molestias vitae ipsum adipisci blanditiis quia veniam sit rerum quae, hic earum veritatis quas illum mollitia, esse harum deleniti dignissimos repellendus nihil? Quas, eligendi dolore! Atque, rerum molestias fuga dignissimos fugit voluptatum
      dolor in sit soluta numquam natus modi porro obcaecati. Omnis dolorum neque quam, maiores adipisci natus perspiciatis quod dolore asperiores tempore. Molestiae, obcaecati. In praesentium odio perspiciatis aliquid est temporibus corrupti porro, molestiae
      voluptatem qui assumenda quod beatae nulla nisi placeat deserunt reiciendis voluptatibus unde fuga enim accusamus numquam tempora. Beatae, eum nobis! Eos fuga inventore, ipsa quibusdam delectus, nihil voluptatum ipsam recusandae laborum soluta numquam
      non voluptate vero natus qui ex sit? Magnam a quae voluptatem rem exercitationem veritatis consequuntur provident amet? Illum atque quisquam sapiente recusandae laboriosam laborum praesentium ab magnam veniam provident totam, fugiat nulla reiciendis
      est ratione dolor, nostrum laudantium tempora impedit incidunt eaque? Expedita magnam sapiente veniam deleniti? Ipsa qui nemo corporis, quaerat quibusdam animi deleniti, aperiam ad expedita dicta obcaecati dolorum dolore adipisci ipsum eum consectetur
      culpa ea praesentium sunt sapiente ipsam explicabo. Harum in ex ea? Nihil reprehenderit repudiandae nesciunt quaerat debitis ipsa rerum, tempora quam neque, beatae harum earum esse? Quod culpa consequatur eum a! Aut, aliquam temporibus deleniti
      vel sapiente molestiae. Aperiam, eum dolor. Id accusantium error ipsum a aut consequatur esse quaerat quibusdam molestiae magnam, impedit suscipit doloremque, alias rem asperiores quas nam eligendi qui facilis porro eius! Recusandae sed enim nisi
      et? Iure tenetur soluta ut quasi veniam explicabo quod odio commodi ullam, praesentium velit dolorum, repudiandae ex saepe fuga sit laboriosam provident nostrum facilis debitis a reiciendis unde. Libero, dolores vitae. Ducimus repudiandae officia
      nihil nam consectetur, voluptatem velit ipsa maiores. Ea aspernatur corrupti soluta dolore quod enim perferendis aperiam ratione iste aut sapiente, ad impedit harum sed nulla in inventore. Error, at dolore. Nesciunt iure vel quis et asperiores placeat
      in consectetur, ducimus, accusantium natus repellendus eveniet nemo aspernatur animi fugiat, sunt nisi error expedita provident! Accusantium reprehenderit exercitationem quis. Beatae impedit eaque est error non facere obcaecati rerum rem aperiam
      magnam ullam illum, consequuntur cupiditate enim esse animi suscipit, culpa nulla aspernatur distinctio recusandae voluptate! Inventore mollitia reprehenderit praesentium! Minima incidunt hic atque non corporis unde distinctio, repellendus ut numquam
      dignissimos possimus iure, deserunt similique est dolor magnam fugiat assumenda laboriosam aliquam. Tempora sint illo, quae iure aliquam nobis. Nemo quos, ipsa dicta quae cumque quidem nostrum laboriosam! Dolores, non officia? Omnis voluptatem sint,
      magni eveniet aliquam asperiores illo tempora assumenda fugiat iure, laborum, magnam expedita mollitia molestias quo? Asperiores vero eos voluptatibus quasi atque eum beatae, qui nam sit, rem maiores quidem nostrum explicabo iure sequi natus sed,
      laudantium eveniet ad illum? Nam asperiores consequuntur eum quasi eligendi. Sunt aliquam aperiam accusantium praesentium facilis laborum cum voluptate qui magnam. Expedita ducimus maiores harum iure consectetur consequuntur sed, fugit officia.
      Est soluta nostrum voluptate voluptates perferendis dolore eos? Tempore! Velit voluptate soluta possimus, voluptatem obcaecati nesciunt numquam laborum a aperiam suscipit necessitatibus veniam. Alias rerum veritatis quibusdam. A culpa est accusantium
      odio vero voluptate maxime veniam tempore. Animi, neque! Animi iusto a reprehenderit dolores inventore. Ipsum quo omnis voluptas. Perferendis, officia obcaecati ut consequuntur voluptas debitis dolores amet quasi accusantium possimus explicabo vitae
      harum veniam enim consequatur corrupti a? Omnis.