CSS Float Under and Left

Put divs below float:left divs

Rather than working with floats, you might consider simply setting the display attribute of the middle divs to "inline-block". Remember that be default, div elements have a block display, which means that they take up the entire width of its parent element, even if its width is less than the parent width. inline blocks on the other hand fit together like puzzle pieces and flow horizontally rather than vertically. I think this would make your code much cleaner than dealing with floats. Here's a demo:

http://jsfiddle.net/scMFC/

Floating left and right: left div is below right div

You need to be a little more careful about how often you are using "clear" when relating to "float" elements. Try putting the color divs inside of wrapper:

<div class="right">
  <div class="red">
  <div class="blue">
</div>

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/

HTML CSS div floating left goes under , below div floating right?

Thanks to everybody who gave me some tips and hints to solve my problem. After messing around abit in the code I found that placing the left column BEFORE the slideshow was the solution. Something I missed: the slideshow container was after the left column... Basically the order of things on the page was not right. As this html code is outputed with some PHP I didn't see it at first, also sorry but could hardly post the whole html code, thanks to everybody though I really appreciated your replies trying to help.

CSS float under and left

To do it with CSS only,

an option would be using column-count and a max-height on the container.

see DEMO

but I am not sure about browser sopport.

It kinda does what you want, at least to some extend, but you would probably be better of with something in javascript.

EDIT: here I paste the CSS:

.container {
    column-count: 3; 
    -webkit-column-count: 3;
    -moz-column-count: 3; 
    -ms-column-count: 3; 
    -o-column-count: 3;

    vertical-align:text-top;

    max-height:100px;
}

Right div on float:right appears a line below the left one

Just shift the div with ID rightDiv above the div with ID leftDiv. That's it.

Here is the WORKING SOLUTION

The Code:

<div id="wrapper">
    <!-- right div -->
    <div id="rightDiv">
        <h1>This is my heading</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>    
    <!-- left div -->
    <div id="leftDiv">
        <h1>This is my heading</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
</div>

Floating divs around and under an image

I got it working in your fiddle:

http://jsfiddle.net/BcjzK/4/

Because of the way div layouts work, its always going to start the green div below the red one if it comes after the red one in the HTML code unless you put it in a parent container that encapsules the entire left side.

As a fix I made another container div that would hold both the img and the green div and then floated that container left.

HTML:

<div class="container">
<div class="imgContainer">
    <img src="http://hazelden.ca/sample.png" alt="Some Image" width="320" height="auto" />
    <div class="extra-content">
        Text
    </div>
</div>
<div class="content">
...

CSS:

.container {
width:700px;
border:solid 1px gray;

}

.imgContainer{

 float: left;

}
.content {
 width:460px;
 border:solid 1px red;
 margin-right:0px;
 margin-left:auto;

}
.extra-content {
 width:230px;
 border:solid 1px green;
}
img {

 border:solid 1px blue;
}
blockquote {
 border:solid 1px gray;
 width:30%;
 float:right;
}

EDIT:

I noticed that the imgContainer box forces your content text to change position slightly to accommodate it's presence. if you want the content text to lay out precisely the same as before use this:

.imgContainer{  
 float: left;
 height: 450px;
 overflow: visible;    
}

http://jsfiddle.net/BcjzK/5/

You can even get the content text under the pic as close as it is on the side by changing the height property of imgContainer to 430px.

http://jsfiddle.net/BcjzK/6/

Hope this helps!

Float a DIV Left using CSS

If flexbox is an option, you can can make the main panel cover the rest of the horizontal space:

1. Specify display: flex on the wrapper element (body in the demo below)

2. Add flex: 1 to the main panel so that if grows to fit the remaining space available.

See simplified demo below:

body {  display: flex;}
.panel {  border: 1px solid;}
#sidebar {  width: 30%;}
#content {  flex: 1;}

<div id="sidebar" class="panel">  Sidebar</div>
<div id="content" class="panel">  <p>Content</p>  <p>Content</p>  <p>Content</p></div>

Floating elements within a div, floats outside of div. Why?

The easiest is to put overflow:hidden on the parent div and don't specify a height:

#parent { overflow: hidden }

Another way is to also float the parent div:

#parent { float: left; width: 100% }

Another way uses a clear element:

<div class="parent">
   <img class="floated_child" src="..." />
   <span class="clear"></span>
</div>

CSS

span.clear { clear: left; display: block; }

---

Related Topics