Geek asks and answers

How can I stack divs next to and on top of others?

I don’t know much about html or css, but I did it a lot,

enter image description here

I want to fold the divs so that it looks (please excuse the bad picture);

enter image description here

I have googled, like I tried another, but boxes with cute / dislikes always end up without moving or moving left / 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 the three divs that I have. The first has links [add / post, etc.]

The second has "thelastgecko" and profile text.

And I'm trying to use the last field for likes / dislikes, but everything he does doesn't work.

+5
source share
3 answers

"" div, 1024 , , . div "add me-message me-gallery" "float: left" "position: absolute". . div, " " +, div, div "float: right", "position: absolute; left:" ".

, .



, :

<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>

, , . , , .

+2

- : 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;
        }

, / . .

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>
0

float divs - . , , . ( . , ).

Another solution is as follows: Use the option width. Of course, you set the width of any div of your html to a fixed number, in percent. Check out this example. But if you do, you will have to pay attention to very large and very small screens, I think you will have to write alternative CSS stylesheets that work with (max-width)and (min-width).

And there is another solution: gridlayout. This is part of the standards since 2013 (I think), but so far it is not very well maintained. But perhaps in the future.

Hope i can help

0
source

More articles:


All Articles