Align 4 divs left and right?

Question

I have 4 divs, 1st should be on left side, 2nd on right side, 3rd on left under 1st and 4th on right side under 2nd div. Problem, 4th div is aligned right but refuse to go up.

How to fix vertical alignment with 4th div?

Also, I created print screen image, how it is now, and how it should be, hope it will help?

http://s27.postimg.org/k3g2tvxwj/4_divs.png

<!DOCTYPE html>
<html lang="en-US">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>test</title>
  <style>
  .container {
    width: 90%;
    margin 0 auto;
    border: 2px solid #000;
    margin: 5px;
  }
  .align-left {
    width: 60%;
    float: left;
    border: 2px solid #000;
    margin: 5px;
  }
  .align-right {
    width: 35%;
    float: right;
    border: 2px solid #000;
    margin: 5px;
  }

  </style>
</head>

<body>

  <div>
    <header>
      <header>
        <div class="container">

          <div class="align-left">
            1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
          </div>

          <div class="align-right">
            2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2
          </div>

          <div class="align-left">
            3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3
          </div>


          <div class="align-right" style="color:red">
            4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4
          </div>


        </div>

  </div>
  <!-- #page -->
</body>

</html>

This type of question asked many times before. Use some JQuery plugins like: http://masonry.desandro.com/ — ketan, Jan 29 '16 at 10:21
@ketan, true thing. If i was you, i would invest a little bit of time on bootstrap grid system. Try searching for video's on youtube. Ps: if your html you have a small typo-> "class='conainer'" — Frank W., Jan 29 '16 at 10:23
I tried to find solution, even after big effort I am still unable to resolve this. I do not wish to use any new plugin for this. Any help with CSS? — Advanced SEO, Jan 29 '16 at 10:26
If you don't want to use bootstrap, then make two divisions.Put two divs in one wrapper div and the other two in another wrapper div. — Sagar Raj, Jan 29 '16 at 10:28
I wish to use with 100% on resolution under 1000px for mobile devices, and then will be like this: content of div 1, content of div 2, then 3 and at the end content of div 4. If I put divs 1 and 3 in one division and 2 and 4 in another division I guess then it will be on mobile like this: 1, 3, 2, 4? — Advanced SEO, Jan 29 '16 at 10:36

score 2 · Accepted Answer · edited May 23 '17 at 11:51

I found it! (Hat tip to this post) which basically says take the float off the right containers and they will take up the available space left around the two floated left divs:

* {
box-sizing: border-box;
}
.container{
width:100%;
outline: 2px solid #000;
padding: 5px;
}

.half {
  width: 50%;
  }

.align-left{
width:60%;
  float: left;
display: inline-block;
outline: 2px solid #000;
padding: 5px;
}

.align-right{
width:30%;

display: inline-block;
outline: 2px solid #000;
padding: 5px;
}

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>

</head>
<body>

<div>
<header>
<header>
        <div class="conainer">

            <div class="align-left">
            1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 
            1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 
            1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1           
            </div>

            <div class="align-right">
            2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 
            </div>

            <div class="align-left">
            3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 
             </div>


             <div class="align-right" style="color:red">
            4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 
             </div>


        </div>

</div><!-- #page -->
</body>
</html>

On fist look this could be solution. On my test page it works. I will test it in my actual project and vote for your answer, I hope it will work. Give me few minutes. — Advanced SEO, Jan 29 '16 at 10:41
Cool. I'm assuming the example you gave is pretty close to your actual project code. ;) — Nathaniel Flick, Jan 29 '16 at 10:42
It works quite good on one temple, but not on another, I will need to check is there anything different between templates. Thank you, If I need future help I will update it here. — Advanced SEO, Jan 29 '16 at 11:01
Thank you again @NathanielFlick , I implemented your answer successfully in my project. I am glad this solution is pure CSS, other suggestions were to use bootstrap grid system, JQuery, plugins. — Advanced SEO, Jan 29 '16 at 16:11

score 1 · Answer 2 · answered Jan 29 '16 at 10:26

1

Use css style on your 4th div

position:relative;
top: -100px; // change according to your requirement

answered Jan 29 '16 at 10:26

Dilip Nayak

303
2
12

1

This answer assumes a lot about the layout, primarily what the height of the top right container will be in a layout. Probably won't work for most cases. – Nathaniel Flick Jan 29 '16 at 10:34
Yes, you are right, I tried this. But height of all divs is changeable from page to page, so I will have holes for sure. – Advanced SEO Jan 29 '16 at 10:43

score 0 · Answer 3 · answered Jan 29 '16 at 10:27

0

To achieve this it's best to use masonry jQuery plugin http://isotope.metafizzy.co

answered Jan 29 '16 at 10:27

Adnan Akram

641
3
11

1

A good, if not heavy handed, suggestion. I love Masonry, and Packery continously adjusts so I recommend it even more highly than Masonry (I know they are by the same metafizzy). – Nathaniel Flick Jan 29 '16 at 10:35
If nothing else help, I will try wist scripts, then I will update my progress. Thank you. – Advanced SEO Jan 29 '16 at 10:44

Align 4 divs left and right?

3 Answers3