I want to make a website that has a space at the top for a searchbar and then 4 divs in a layout like in 
[this image](https://i.stack.imgur.com/2Dx00.jpg)

I'm using d3 so the idea would be to represent the data in different ways, but I want the divs to adjust to the window, so something like this: 

```
    <div id ="main-bar">
    </div>
    <div id="view">
        <div id="topLeft" class="linked-container" >
        </div>
        <div id="topRight" class="linked-container">
        </div>
        <div id="botLeft" class="linked-container">
        </div>
        <div id="botRight" class="linked-container">
        </div>
    </div>

```

But I don't know how to make them adjust to the window size.

I'm not pretty good at web developing so I wanted to know how could I do this in a simple way. Any suggestions?

Thanks in advance.

Edit: People are telling me I should not ask for tutorials, which is true. Anyway thanks for your answers, this is what I ended up doing:

```
        #main-bar{top: 0; left:0; width:100%;  min-height: 40px; height:10%; position: fixed; background-color: pink; }
        #topLeft{top:10%; left:0; background-color: blue;}
        #topRight{top:10%; left: 50%; background-color: red;}
        #botLeft{top:55%; left:0; background-color: green ;}
        #botRight{top:55%; left:50%; background-color: orange;}

```

I will look into media queries so I can better adjust the searchbar cause the min-height property is not doing what I want.