0

I'm trying to create a page that has multiple 3 divs in a row, which are left right and center aligned.

I tried using float:left and float:right but it worked out really bad. The page scales super randomly and I want the divs to become in 2 columns when the page scales down and then to 1 column for mobile devices.

.container {
  display: inline-block;
  text-align: center;
  width: 100%;
  position: relative;
}
.left,
.middle,
.right {
  width: 200px;
  height: 200px;
  background-color: red;
  display: inline-block;
}
.left {
  float: left;
}
.right {
  float: right;
}
<div class="container">

  <div class="left">
    <div class="content">
    </div>
  </div>
  <div class="middle">
    <div class="content">
    </div>
  </div>
  <div class="right">
    <div class="content">
    </div>
  </div>

</div>

jsFiddle: https://jsfiddle.net/azizn/j4cgef5g/

Aziz
  • 7,685
  • 3
  • 31
  • 54
Shirohige
  • 90
  • 3
  • 12

2 Answers2

4

This is a textbook use case for flexbox:

.container{
  display: flex; 
  justify-content: space-between;
}

Here's an example: http://codepen.io/memoblue/pen/XKQqGg

There are many ways to deal with the responsive aspect, but I'd need to know more specifically what the layout is supposed to look like at the different breakpoints to give you a useful answer…

Yann
  • 604
  • 2
  • 7
  • 16
  • Yes but completely ignores the responsive aspect. – Aziz Aug 20 '16 at 00:22
  • Thanks, I tried using flex too and got the same result. Scaling was the problem though. I want when the screen gets to a certain width the 2 columns to to have the same position or to be in the center (not sure how it would look better) with some margin top and bottom. Basically I am making a partners page. It looks something like this: https://www.indiegogo.com/partners – Shirohige Aug 20 '16 at 10:54
  • I've updated my pen with a layout similar to the indiegogo page you linked to. It's pretty different from your original description though. I didn't look but I'm pretty sure they're just floating the elements… It's not even centered when there are 2 columns. Mine is ;) I'm using breakpoints that correspond to the width of the elements. You'll have to tweak to your sizes. I also cleaned up the HTML. I hope you don't mind! Let me know if you have any questions. – Yann Aug 20 '16 at 21:41
  • Yeah, theirs was the closest I could find to what I want. Yours seems great, but can you make it so that the left and the right are aligned left and right (so they touch the screen's edges)? – Shirohige Aug 21 '16 at 00:45
-1

Check out the examples I've included below (CSS and HTML script)

HTML

<div id='columns'>
    <div id='col1'></div>
    <div id='col2'></div>
    <div id='col3'></div>
</div>

CSS

#columns{
    position: absolute;
    height: 100%;
    width: 100%;
}

#columns #col1{
    float: left;
    width: 33.33%;
    height: 100%;
}


#columns #col2{
    float: left;
    width: 33.33%;
    height: 100%;
}


#columns #col3{
    float: left;
    width: 33.33%;
    height: 100%;
}

@media media only screen and (max-width:1024px) and (min-width:540px){
    #columns #col1{
        width: 50%;
    }


    #columns #col2{
        width: 50%;
    }


    #columns #col3{
        width: 100%;
    }
}

@media media only screen and (max-width:540px){
    #columns #col1{
        width: 100%;
    }


    #columns #col2{
        width: 100%;
    }


    #columns #col3{
        width:  100%;
    }
}

Take note I haven't actually tested the above example, but it should work. You can edit your width and height values as you wish, as well as the widths for the media queries. As the screen gets smaller, it removes the columns 3 and 2 from display, while making the other columns larger. To make the three columns in left, center and right positions you don't need to specify different floats, as being in blocks they will automatically collide and stack at the left until they hit the screen edge. This is also why the width can generally only be 33.33%, as going to 33.333% will generally make the third block be pushed down as there isn't enough space. In most cases, the 0.01% dead space isn't noticeable anyway.

Bilfred
  • 142
  • 1
  • 13
  • Thanks, the divs seem to take all the space, though, and I want to have some margins. But come to think of it, if I make more divs inside with the size I want it should work, right? – Shirohige Aug 20 '16 at 11:05
  • So I tried this method and it works for the most part. The problem is that everything is aligned left when I set a custom size on the columns. I basically want the left and right column to align with the edges and the middle to be in the center between them. Can you help me with that? – Shirohige Aug 20 '16 at 13:22
  • If you want to change the size of the 3 divs on the inside, you'll need to change the size of the container `columns`, as they take a third of its width. So if you want the divs to be 250px when they're all visible, you'd set the container to about 750px. Keep in mind it's never going to be exact, but within about 0.01-0.1px of error. – Bilfred Aug 20 '16 at 23:29
  • I can't get it to work somehow, I don't think it will work out this way. If I am using a smaller container, but the problem is I want the container to have 100% and the columns to be aligned left, right and center in it. If I set a custom width to the container it is no longer aligned with my header. Can you check this fiddle to see what I mean? https://jsfiddle.net/j4cgef5g/1/ – Shirohige Aug 21 '16 at 18:21
  • My example works for me, so I'm not entirely sure why it isn't working for you. One thing you could try is, leaving the container at 100%, set left to `float: left;`, set right to `float: right;` and finally set the middle to `margin: 0 auto;`. That way, you can set the inner columns to whatever width (as long as they total less than 100%) and it should have a left, center and right div. – Bilfred Aug 21 '16 at 22:18
  • When I try that, the 3rd column goes below. I think I don't know what I'm doing :D I copy pasted your code in jsfiddle. Can you check it out and tell me what's wrong? I tried giving the columns less percentage, but the third one stil goes on the next row. https://jsfiddle.net/qbur1g3x/ – Shirohige Aug 21 '16 at 22:49
  • I'm not entirely sure what's happening with the margin and right-floating element, but I just tested my original entry again and it works for me, with 3 columns left, middle and right. Have you tried clearing the default browser styles before doing any of this? – Bilfred Aug 22 '16 at 00:39
  • I got it to work somehow, but I realized that when scaling down the columns disappear, due to display:none. I don't want them to disappear, just to go below the others. I will try to add another class and use n-th child, if you have better ideas feel free to post, otherwise I'll choose you as best answer (I don't get why you got downvoted though). Thanks for the help – Shirohige Aug 22 '16 at 11:38
  • If you want it to pop down, you can simply change the width to 100% for the columns you want to go down. Check out my edit to see what I mean. When it hits the edge of the window, it'll automatically be pushed down. – Bilfred Aug 22 '16 at 23:59