Position Floated Elements Directly Under Each Other

Position floated elements directly under each other

Because of the different heights, this looks like the problem where I still haven't found a general purpose pure CSS technique to handle it properly, despite trying really hard.

I've posted this answer before: css alignment question

I've given up and used a jQuery plugin
to do this in the past for something
similar:

jQuery Masonry

A picture is worth a thousand words:

Float does not Align Elements beside Each Other

You need to give width to loginbox div and socialmedia, say something like 50%, otherwise it is going to take 100% width.
Also make sure that you clear floats

Your CSS should be something like below

.loginbox, .socialmedia
{
    float:left;
    width:50%;
}
.clear
{
     clear:both
}

Add a sibling div to loginbox and socialmedia divs and add the "clear" css class to this new div

Position elements underneath each other

The simplest thing to do would be to wrap your button in a <div>.

Since you are floating both the button and the console DIV they will appear next to one another instead of one on top of one another. By having two DIVs as the child of .containDebug they will both take up the full width of their container elements since they are block level elements.

$("#btn_debug, #console_debug").click(function(e) {
  e.stopPropagation();  $("#console_debug").toggle();
});

#console_debug {  display: none;  width: 40vw;  height: 80vh;  overflow-y: scroll;  background-color: #FFFFFF;  box-shadow: -2px 2px 5px #CCCCCC;  pre {    word-break: break-all;    white-space: normal;  }}#btn_debug {  float: right;}.containDebug {  position: absolute;  top: 5px;  right: 5px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="containDebug">
  <div>    <button id="btn_debug">Button</button>  </div>
  <div id="console_debug">    <h1>Page Array</h1>    <pre> Some text from PHP code </pre>    <h1>GET</h1>    <pre> Some text from PHP code </pre>    <h1>POST</h1>    <pre> Some text from PHP code </pre>  </div>
</div>

Position div under floated div

maybe try with an additional div to get both up and down together?

<div id="up_down">
<div id="up"></div>
<div id="down"></div></div>
<div id="mid"></div>
<div id="right"></div>

And you will changed your css to :

up_down{
width: 33.3%;
height: 200px;
}

#up {
width: 100%;
height: 50%;
background: #CCCCCC;
float: left;
}
#down {
width: 100%;
height: 50%;
background: #999999;
float: left;
}

Position an HTML element right under another as opposed to positioned to the right or left

If you use bootstrap you can simply wrap your image and like button inside <div class="col"></div>

and Voila! you have a column of contents, very simple.

Place div beneath other div while float right

You can use clear: both; to set a floated element on a new line. Also, setting #right and #left to inline-block does nothing for your purposes. Setting the width and then setting the float property with put both elements side by side splitting the page in half.

Inline-block TYPICALLY is used for nav elements. Or for vertically centering objects in special cases.

Make 2 images float to the right and directly under each other

Unless you need the float for something else, change your CSS to:

#div1, #div2 {
    text-align:right;
    margin-bottom: 10px;
}

EDIT:
As per your comment, the images are in a container with text.

Here is a solution for such case: http://jsfiddle.net/PNxRZ/2/

HTML

<div class="text-container">
    <img src="img1.png">
    <img src="img2.png">
Lorem ipsum ...
</div>

CSS

.text-container img {
    float:right;
    margin: 0 0 10px 10px;
}

How can I float two divs left (under each other) and two divs right (under each other)

Try changing the order of the HTML and change the clear of the divs.

<div class="div1"></div>
<div class="div3"></div>
<div class="div2"></div>
<div class="div4"></div>

And CSS

.div1 {
  height:69px;
  float:left;
  width:48%;
  background:pink;
  clear:left;
}

.div2 {
  height:200px;
  margin-top:10px;
  display:block;
  float:left;
  width:48%;
  background:lightblue;
  clear:left;
}

.div3 {
  height:69px;
  line-height:30px;
  float:right;
  width:48%;
  background:red;
  clear:right
}

.div4 {
  height:200px;
  float:right;
  width:48%;
  background:yellow;
  clear:right
}

JSFiddle: https://jsfiddle.net/6ywja6dn/

---

Related Topics