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.

Make use of flex property in css. http://stackoverflow.com/questions/36530458/is-it-possible-to-mix-rows-and-columns-with-flexbox/36530665#36530665 — Shubham Khatri, Jul 23 '16 at 17:10
@ShubhamKhatri thank you friend! Exactly what I was looking for! I just didnt know the term. — Jack, Jul 23 '16 at 17:25
@ShubhamKhatri I've playing around with this for some time now, but I can't shape it, since I dont fully understand this CSS code. Can you assist me some more? — Jack, Jul 23 '16 at 17:46

Shubham Khatri · Accepted Answer · 2016-07-23T19:43:45.547

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.

score 0 · Answer 2 · answered Jul 23 '16 at 19:06

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>

Aligning multiple elements in HTML

2 Answers2

Linked