Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

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.

like image 881
user2275909 Avatar asked Nov 04 '22 00:11

user2275909


1 Answers

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.

like image 51
Harry Svensson Avatar answered Nov 12 '22 14:11

Harry Svensson