CODEWITHSUNDEEP
htmlcss
Bartosz Zakurzewski
Bartosz Zakurzewski

Reputation: 43

2 divs - same height different widths, fixed and dynamic

OK, I edited my question and code to easily show what I mean. I need to have:

  1. "menu" - positioned-left, min-height=500px, width=250px - at all times.
  2. "content" - positioned on the right side of "menu", dynamic width to take all remaining space.
  3. Same height for "menu" and "content" at all times. No matter there will be 1 box or 100 inside "content".

  4. "Boxes" should be lined up from left to right and if there are more, they should stretch height of "content" and "menu" should follow the same height.

<div class="header" style="height:150px; background-color:black;" >
</div>

<div class="navbar" style="height:40px; background-color:yellow;" >
</div>

<div class="menu" style="min-height:500px; width:250px; background-color:orange; float:left;" >
</div>

<div class="content" style="height:auto; background-color:blue; float: left; " >

    <?php for ($col = 0; $col < 50; $col++)
            {
    ?><div class="box" style="width:80px; height:80px; background-color:white; margin:10px;" ></div><?php
        }  
    ?>
</div>

Upvotes: 3

Views: 115

Answers (2)

Armin Ayari
Armin Ayari

Reputation: 619

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

div {
  border: 1px solid black
}

body {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 150px 40px minmax(500px , 1fr)
}

.header, .navbar {
  grid-column: 1 / -1
}

.content {
  display: grid;
  grid-gap: 20px;
  padding: 20px;
  grid-template-columns: repeat(auto-fill, 80px);
  align-content: start;
  justify-content: space-evenly;
}

.box {
  width: 80px;
  height: 80px;
}
<body>
  <div class='header'>
    Header
  </div>
  <div class='navbar'>
    Navbar
  </div>
  <div class='menu'>
    Menu
  </div>
  <div class='content'>
    <div class='box'>box</div>
    <div class='box'>box</div>
    <div class='box'>box</div>
    <div class='box'>box</div>
    <div class='box'>box</div>
    <div class='box'>box</div>
    <div class='box'>box</div>
    <div class='box'>box</div>
    <div class='box'>box</div>
    <div class='box'>box</div>
    <div class='box'>box</div>
    <div class='box'>box</div>
    <div class='box'>box</div>
    <div class='box'>box</div>
    <div class='box'>box</div>
    <div class='box'>box</div>
  </div>
</body>

Upvotes: 2

Michal D
Michal D

Reputation: 425

Your goal is easier to achieve with flexbox, as shown in the solution below.

.header {
  height: 150px; 
  background-color: black;
}

.navbar {
  height: 40px; 
  background-color: yellow;
}

.container {
  min-height: 500px;
  display: flex;
  align-items: flex-start;
}

.menu {
  min-height: 500px;
  height: 100%;
  width: 250px; 
  background-color: orange; 
}

.content {
  min-height: 500px;
  background-color: blue; 
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.box {
  width: 80px; 
  height: 80px; 
  background-color: white; 
  margin: 10px;
}
<div class="header">
</div>

<div class="navbar">
</div>

<div class="container">
  <div class="menu">
  </div>

  <div class="content">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

Upvotes: 0

Related Questions