Aligning multiple elements in HTML

Question

I'm relatively new to HTML, and I've googled around for some time now, but was unable to come up with something, or perhaps my search terms were wrong.

Anyway, I'm familiar with border layout(North, South, West, East, Center) but what I can't understand is how to align my elements in a different matter.

For example:

|-----------------------------------------------------|
|                Navbar goes here                     |
|-----------------------------------------------------|
|                                                     |
| ---------------------          -------------------- |
| |Box1|               |         |Box2|             | |
| |----                |         |----              | |
| |                    |         -------------------- |
| |                    |                              |
| |                    |         -------------------- |
| |                    |         |Box3|             | |
| |                    |         |----              | |
| ---------------------          -------------------- |
|                                                     |
| --------------------------------------------------  |
| |Box4|                                            | |
| |----                                             | |
| |                                                 | |
| --------------------------------------------------  |
------------------------------------------------------

Can something like the above be achieved with border layout? or am I missing something?

I came up with another StackOverflow post but the mentioned css code makes my boxes overlap with one another.

Answer 1

I worked on this for quite some time now.

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li> 
      <li><a href="#">Page 3</a></li> 
    </ul>
  </div>
</nav>

<div class="container">                


    <div>                                                    

        <div>Box 1</div>      
        <div>                           

            <div>Box 2</div>      

            <div>Box 3</div>       

        </div>  


    </div>                             

  <div>Box 4</div>                     

</div>   

CSS:

html, body, .container {
    height: 100%;
    background-color: white;
}

.container {
    display: flex;
    flex-direction: column; 
    margin-top: 50px;
}

.container div {                   
    margin: 10px;
    flex: 1;
    background-color: blue;
}

.container > div:nth-child(2) { }

.container > div:first-child {
    display: flex;
    background-color: white;

}
.container > div:first-child > div:first-child {
    margin-right: 20px;

}

.container > div:first-child > div:nth-child(2) {
    display: flex;
    flex-direction: column;
    background-color: white;

}

.container > div:first-child div {
    flex: 1;
    margin: 0;
}

.container > div:first-child > div:nth-child(2) > div:first-child {
    margin-bottom: 20px;
}

.container > div:last-child { }

JSFIDDLE

In order to have the design you want you need to make use of flex css property. Some examples of this are here. and documentation is here.

The div:nth-child() as the name suggest is used to find the nth div belonging to the parent div container. In the first row you needed an horizontal flex and the second box must itself be a vertical flex. flex-direction: column; will lead to a vertical flex display.

I hope I explained it properly.

Answer 2

Check this out.. This gives you exactly the same design..

<div class="container">
  <nav>
    Navbar goes here
  </nav>
  <div class="second">
    <div class="box1">box1</div>
    <div class="inner">
      <div class="box2">box2</div>
      <div class="box3">box3</div>
    </div>
  </div>
  <div class="box4">box4</div>
</div>

<style>
*{
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: content-box;
}
.container{
  display: block;
  width: 100%;
}
nav{
  display: block;
  background: #000;
  color: white;
  text-align: center;
  padding: 20px;
}
.second{
  display: flex;
}
.second .box1{
  width: 100%;
  height: 80vh;
  background: #d2c3c3;
}
.second .inner{
  width: 100%;
}
.second .inner .box2{
  height: 40vh;
  background: #ddd;
}
.second .inner .box3{
  height: 40vh;
  background: #9e8181;
}
.box4{
  display: block;
  background: #000;
  color: white;
  padding: 20px;
}
</style>