How do i stack divs next to and on top of eachother?

Question

I don't know much about html or css but I have done this much;

enter image description here

I want to stack divs so it looks like this (please excuse the bad drawing) ;

enter image description here

I have googled how to and tried different thing but the likes/dislikes boxes always end up not moving or move to the very left/very right.

<div style="float:left;width:300px;height:350px;text-align:center;">
<div style="float:left;width:500px;height:200px;text-align:center;">
<div id="wrapper">
<div style="align=center;">
<div id="first">1</div>
<div id="second">2</div>

These are th three divs I have. First one has links [the add/message etc]

Second one has "thelastgecko" and profile text.

And I am trying to use the last box for likes/dislikes but whatever im doing it isn't working.

http://stackoverflow.com/questions/1909648/stacking-divs-on-top-of-each-other — PW Kad, Apr 12 '13 at 20:58

Harry Svensson · Answer 1 · 2013-04-12T22:28:36.077

You usually use one "huge" div, set it below 1024 pixels wide so old screens can view it and then you usually center it in the middle of the screen. Then inside of that big div you put the "add me - message me - gallery" with a "float:left" or "position:absolute" I prefer the latter. then you make another div containing the "The last gecko" + dislikes & likes and center that div, then after that I would make another div and either do a "float:right" or a "position:absolute; left:'huge width minus this ones width".

I did write everything in text and readable since giving the code away doesn't teach as well.

But in case you still didn't get it, here's my idea:

<html>
  <head>
    <style>
      body{margin:0px;padding:0px;width:100%;height:100%;}
      #container{width:900px;margin:auto;margin-top:200px;}
      #add_me,#dislike_text{position:absolute;width:200px;background-color:#ace;}
      #last_gecko,#holder{margin:auto;width:500px;background-color:#eca;}
      #likes,#dislikes{float:left;width:250px;display:block;background-color:#cae;}
      #dislikes{background-color:#cea;}
      #dislike_text{margin-left:700px;background-color:#eac;}
    </style>
  </head>
  <body>
    <div id="container">
      <div id="add_me">add me<br>message me<br>wuts going on</div>
      <div id="dislike_text">dislike text</div>
      <div id="last_gecko">
      Last Gecko
        <div id="holder">
          <div id="dislikes">dislikes</div>
          <div id="likes">likes</div>
        </div>
      </div>
    </div>
  </body>
</html>

Made it workable, it will at least show you in what direction to move, It might not be the best way but it is my way.

No use of `display: inline-block;'? Do you dislike that or are you unaware of it. I thought it would be key to answering his question. — Hydrox24, Apr 12 '13 at 21:33
I can't tell you how long it's been since I've seen a 1024px display in the analytics of any of the dozens of sites I admin... anything that size or smaller these days are mobile. Granted, I build to about 1000px wide anyway, but if you're justifying 1024 for old screens you better still be accommodating IE6; both represent a negligible percentage of web usage (in the US, anyway). — Mike, Apr 12 '13 at 22:00
I had a friend with glasses who use 1024x768 settings to make everything bigger, I myself(with no eye-sight problem) got an asus eee(laptop) which comes with a 1024x600 screen. IE6.. Dear god why does that forsaken web browser still exist. — Harry Svensson, Apr 12 '13 at 22:32

score 0 · Answer 2 · answered Apr 12 '13 at 21:56

You could do something like this: http://jsfiddle.net/jAKgd/

CSS

        #wrapper {
            width: 800px;
        }
        #leftColumn {
            float: left;
            height: 800px;
            width: 200px;
            margin-right: 5px;
        }
        #leftColumn a {
            display: block;
        }
        #rightColumn {
            width: 100%;
        }
        #contentDislike,
        #contentLike {
            display: inline-block;
            width: 250px;
        }

Obviously the height/widths can be changed to meet your needs. I was just doing a quick example.

HTML

<div id="wrapper">
  <div id="leftColumn"> <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
   </div>
   <div id="rightColumn">
    <div id="contentTop">
        <img src="/images/image_name.jpg" alt="image text here" />
        <p>THIS IS WHERE YOUR PROFILE TEXT WOULD SHOW. IT CAN EXPAND HEIGHT AS NEEDED.</p>
    </div>
    <div>
        <div id="contentDislike">DISLIKE CONTENT HERE</div>
        <div id="contentLike">LIKE CONTENT HERE</div>
    </div>
    <div>YOUR LOWER TWO COLUMNS WILL GO IN THIS DIV</div>
  </div>
</div>

score 0 · Answer 3 · answered Feb 02 '17 at 20:29

It's a bad way of design to use floats to place divs at some place. It's a much better way to use, for example, a flex layout. But this is not supported by all browsers (But nearly. If you can, take this option).

Another solution is this one: Use the width option. You set the width of any div of your html to a fixed number, in percent, of course. Watch this example But if you do this, you will have to pay attention for very large and very little screens, I think you would have to write alternative css style sheets which are working with (max-width) and (min-width).

And there is another solution: the gridlayout. It is part of the standards since 2013 (I think) but it's not well supported yet. But maybe in future.

Hope I could help

How do i stack divs next to and on top of eachother?

3 Answers3