Why my divs are not working properly on big windows?

Question

I have encountered some errors when coding a website in CSS. I would be grateful if somebody could help me out.

What I want to do: I have 2 different divs, Main and Additional. I want for the Main div to be 60% of the total width, no matter the size of window. The second div, Additional one, should obviously have the width of the rest, it is 40% of window (again: no matter what size the window is).

What I have instead? Well, the Main div is very thin, for sure not 60% of window. I also think that the Additional div is not filling the rest of window, but filling it to some extend and then ending abruptly (?). I think (?) that for some reason when the windows of my Internet Browser is the smallest possible (mobile), then they are respectively 60% and 40%. But, for a reason that is beyond me, when the windows gets extended (for example, when I maximize in on a desktop) the divs are not “fluid” and are not changing according to the window, but staying as they were before.

So my question is: what I did wrong and how to fix that?

Source code below:

body {
  background-color: #003399;
  color: #FFCC00;
  margin: 0;
  padding: 0;
}

a:link {
  color: #FFCC00;
}

a:visited {
  color: #FFCC00;
}

.container {
  display: table;
  border-collapse: separate;
  /* border-spacing: 10px */
}

.divs-equal {
  display: table-cell;
}

.div-padding {
  padding: 10px;
}

#main-part {
  /* float: left; */
  width: 60%;
  border-right-style: solid;
  border-right-color: #FFCC00;
  border-right-width: 3px;
  /* margin-right: 10px; */
  height: 100%;
  /* min-height: 100vh; */
}

#additional-part {
  /* width: 40%; */
  height: 100%;
  /* min-height: 100vh; */
  /* margin-left: 10px; */
}

<div class="container">
  <!-- <div class="container2"> -->
  <div id="main-part" class="divs-equal">
    <div class="div-padding">
      <h1>Main info</h1>

      <p>Some text</p>
      <p>Some text</p>
      <p>Some text</p>
    </div>
  </div>
  <!-- </div> -->

  <!-- <div class="container3"> -->
  <div id="additional-part" class="divs-equal">
    <div class="div-padding">
      <h1>Additional info</h1>

      <p>Aaaaa</p>
      <p>Aaaaa</p>
      <p>Aaaaa</p>
      <p>Aaaaa</p>
      <p>Aaaaa</p>
      <p>Aaaaa</p>
    </div>
  </div>
  <!--</div> -->

</div>

first 2 mistakes for modernw eb development is to sue a table for stylign purpose and then using float. You can do it either with flexbox or css-grid. — tacoshy, Dec 16 '20 at 18:21
Does this answer your question? [Two divs side by side - Fluid display](https://stackoverflow.com/questions/17217766/two-divs-side-by-side-fluid-display) — disinfor, Dec 16 '20 at 18:47

score 1 · Answer 1 · answered Dec 16 '20 at 18:27

The modern Web-Development solution is to either use Flexbox or CSS-Grid. Both are way less coding efford, allow for full reponsiveness and have a few advantages over float and tables which can create a mess.

CSS-Grid solution: you declare a 2 column grid with the left column of 60% and the right column of 40% with: .container { display: grid; grid-template-columns: 60% 40%; }

body {
  background-color: #003399;
  color: #FFCC00;
  margin: 0;
  padding: 0;
}

a:link {
  color: #FFCC00;
}

a:visited {
  color: #FFCC00;
}

.container {
  display: grid;
  grid-template-columns: 60% 40%;
  min-height: 100vh;
}

.div-padding {
  padding: 10px;
}

#main-part {
  border-right-style: solid;
  border-right-color: #FFCC00;
  border-right-width: 3px;
}

<div class="container">
  <!-- <div class="container2"> -->
  <div id="main-part">
    <div class="div-padding">
      <h1>Main info</h1>

      <p>Some text</p>
      <p>Some text</p>
      <p>Some text</p>
    </div>
  </div>
  <!-- </div> -->

  <!-- <div class="container3"> -->
  <div id="additional-part">
    <div class="div-padding">
      <h1>Additional info</h1>

      <p>Aaaaa</p>
      <p>Aaaaa</p>
      <p>Aaaaa</p>
      <p>Aaaaa</p>
      <p>Aaaaa</p>
      <p>Aaaaa</p>
    </div>
  </div>
  <!--</div> -->

</div>

Flexbox solution: you declare the wrapper .container as Flexbox with display: flex;. Next you give it a flex-direction: row; so that the divs are displayed next to each other. Last but not least you give the both main divs the width of 60% and 40%.

body {
  background-color: #003399;
  color: #FFCC00;
  margin: 0;
  padding: 0;
}

a:link {
  color: #FFCC00;
}

a:visited {
  color: #FFCC00;
}

.container {
  display: flex;
  flex-direction: row;
  min-height: 100vh;
}

.div-padding {
  padding: 10px;
}

#main-part {
  width: 60%;
  border-right-style: solid;
  border-right-color: #FFCC00;
  border-right-width: 3px;
}

#additional-part {
  width: 40%;
}

<div class="container">
  <!-- <div class="container2"> -->
  <div id="main-part">
    <div class="div-padding">
      <h1>Main info</h1>

      <p>Some text</p>
      <p>Some text</p>
      <p>Some text</p>
    </div>
  </div>
  <!-- </div> -->

  <!-- <div class="container3"> -->
  <div id="additional-part">
    <div class="div-padding">
      <h1>Additional info</h1>

      <p>Aaaaa</p>
      <p>Aaaaa</p>
      <p>Aaaaa</p>
      <p>Aaaaa</p>
      <p>Aaaaa</p>
      <p>Aaaaa</p>
    </div>
  </div>
  <!--</div> -->

</div>

score 0 · Answer 2 · answered Dec 16 '20 at 18:21

0

The problem is that the % CSS unit is relative and is the percentage of the parent's height and width. Normally, that wouldn't be a problem, but if the parent is not 100% of the window height or width then the div's inside it couldn't be either. You could use the CSS vh and vw units for the viewport height and viewport width instead of using %.

answered Dec 16 '20 at 18:21

Timothy Chen

431
3
8

1

While this _may_ answer the question, post code to show it working. – disinfor Dec 16 '20 at 18:30
your technically wrong. Parents dont have to be 100% do work correctly. The problem is, that a child with a width of 100% will have 100% of the parents width on top of existing margin, paddings and border. This will cause an overflow to break it. so he would need to use `calc` to subtrate the 60%/40% minus the existing paddings and broder. – tacoshy Dec 16 '20 at 18:34
@tacoshy you're partially correct. If OP doesn't have `margin` set, then `box-sizing: border-box` would work here. No need for `calc`. – disinfor Dec 16 '20 at 18:46

score 0 · Answer 3 · answered Dec 16 '20 at 18:23

You need to add width: 100%; to .container. See here:

body
{
    background-color: #003399;
    color: #FFCC00;
    margin: 0;
    padding: 0;
}

a:link
{
    color: #FFCC00;
}

a:visited
{
    color: #FFCC00;
}

.container
{
    display: table;
    border-collapse: separate;
    width: 100%;
    /* border-spacing: 10px */
}
.divs-equal
{
    display: table-cell;
}

.div-padding
{
    padding: 10px;
}

#main-part
{
    /* float: left; */
    width: 60%;
    border-right-style: solid;
    border-right-color: #FFCC00;
    border-right-width: 3px;
    /* margin-right: 10px; */
    height: 100%;
    /* min-height: 100vh; */
}

#additional-part
{
    width: 40%;
    height: 100%;
    /* min-height: 100vh; */
    /* margin-left: 10px; */
}

<HTML>
    <body>
                
        <div class="container">
             <!-- <div class="container2"> -->
                <div id="main-part" class="divs-equal">
                    <div class="div-padding">
                        <h1>Main info</h1>
                        
                        <p>Some text</p>
                        <p>Some text</p>
                        <p>Some text</p>
                    </div>
                </div>
            <!-- </div> -->
            
            <!-- <div class="container3"> -->
                <div id="additional-part" class="divs-equal">
                    <div class="div-padding">
                        <h1>Additional info</h1>
                
                        <p>Aaaaa</p>
                        <p>Aaaaa</p>
                        <p>Aaaaa</p>
                        <p>Aaaaa</p>
                        <p>Aaaaa</p>
                        <p>Aaaaa</p>
                    </div>  
                </div>
             <!--</div> -->
             
        </div>
        
    </body>
</HTML>

Or alternatively, you can add width: 60vw; to #main-part and width: 40vw; to #additional-part See here: https://jsfiddle.net/gthuw8d5/

Why my divs are not working properly on big windows?

3 Answers3