Float Left and Right

Float left and right

You can use CSS3 column-count property for this. Write like this:

.parent{
    -moz-column-count: 2;
    -moz-column-gap: 50%;
    -webkit-column-count: 2;
    -webkit-column-gap: 50%;
    column-count: 2;
    column-gap: 50%;
}
.parent div{
    width:50px;
    height:50px;  
    margin:10px;
}
.left{
    background:red;
}
.right{
    background:green;
}

Check this http://jsfiddle.net/UaFFP/6/

Float left vs float right - why does the order change?

If they are both left, the image is pushed left first then the text is pushed left like you said. This is the same for the right. The image is pushed all the way to the right, and then the text is pushed to the right, basically bumping into the image.

The first item gets pushed in it's respective direction first, then the second item follows. You are basically just reversing the direction when you change the float to right. They move individually in the direction of the float in the order that they are laid out in the CSS but do not pass each other.

Float right and float left on different lines

add this to your css.!

.message-row{
    clear:both;
}

Working FIDDLE

Float left element and float right element get pushed up by a heading (chrome)

It seems to be a bug only on chrome & opera. In this case If an inline-block component has height bigger than the component floating to the left it's going to push the floating elements out of the container for some reason.

My hacky solution at the moment is to lower height of the inline element https://jsfiddle.net/4ud7vemL/

    <div class="center">
        <h2 class="center-text">Some-text</h2>
    </div>

.center-text {
  line-height: 1;
  margin: 0;
}

Element goes right even with float left

I moved the box with the float: left to the end and added a div named "clear" with css clear: both.

html {  background-color: black;}.blogPostsContainer {  width: 100%;  border: solid;  margin-top: 100px;}.blogPost {  display: inline-block;  background-color: black;  width: 49%;  border: solid;  border-color: #FFF010;  border-radius: 1px;  color: white;  margin-top: 10px;  height: 240px;  overflow: hidden;}.blogPost h3 {  color: white;}.blogPost h1 {  text-align: center;  border-color: dodgerblue;  border: solid;  border-left: none;  border-right: none;}.blogPost img {  width: 95%;  height: 200px;  margin: 10px;}.clear {  clear: both;}

<div class="BlogPostsContainer">  <div class="blogPost" style="height:700px; float:left">    <img src="home_page/images/test/hqdefault-1.jpg" />    <h1>This is the Title section</h1>    <h3>This is the description.This is the description.This is the description.This is the description.                This is the description.This is the description.This is the description.This is the description.                This is the description.This is the description.This is the description.This is the description.                This is the description.This is the description.This is the description.This is the description.            </h3>  </div>  <div class="blogPost" style="float:right">    <img src="home_page/images/test/hqdefault-2.jpg" />    <h1>DESCRIPT</h1>    <h3>THIS IS DESCRIPTIONNNN            </h3>  </div>  <div class="blogPost" style="float:right">    <img src="home_page/images/test/hqdefault-3.jpg" />    <h1>This is the Title section</h1>    <h3>This is the description.This is the description.This is the description.This is the description.                This is the description.This is the description.This is the description.This is the description.                This is the description.This is the description.This is the description.This is the description.                This is the description.This is the description.This is the description.This is the description.            </h3>  </div>  <div class="clear"></div>  <div class="blogPost" style="float:left">    <img src="home_page/images/test/hqdefault-3.jpg" />    <h1>This is the Title section</h1>    <h3>This is the description.This is the description.This is the description.This is the description.                This is the description.This is the description.This is the description.This is the description.                This is the description.This is the description.This is the description.This is the description.                This is the description.This is the description.This is the description.This is the description.            </h3>  </div></div>

How to make the float left and float right on the same line?

The reason it doesn’t work as expected is that the <ul> on the left is expanding out to the right, thus pushing the content down. The solution might be to set an explicit fixed width for the left and right areas which is what I have done when I have faced this scenario in the past. But will say that a mix of floats and even absolute positioning is what will ultimately work.

Float left and Float Right in Fixed div element

Just use flex on the header and remove all floats. You will have more control on your content.

.header {  height: 10%;  width: 80%;  position: fixed;  border-style: solid;  border-width: 1px;  display: flex;  justify-content: space-between;}
.image {}
.navigation {}
.content {  padding-top: 8%;}

<div class="header">
  <div class="image">    image of page goes here  </div>
  <div class="navigation">    Navigation of page goes here  </div>
</div>

<div class="content">  <p>Am no an listening depending up believing. Enough around remove to barton agreed regret in or it. Advantage mr estimable be commanded provision. Year well shot deny shew come now had. Shall downs stand marry taken his for out. Do related mr account    brandon an up. Wrong for never ready ham these witty him. Our compass see age uncivil matters weather forbade her minutes. Ready how but truth son new under. Breakfast procuring nay end happiness allowance assurance frankness. Met simplicity nor difficulty    unreserved who. Entreaties mr conviction dissimilar me astonished estimating cultivated. On no applauded exquisite my additions. Pronounce add boy estimable nay suspected. You sudden nay elinor thirty esteem temper. Quiet leave shy you gay off asked    large style. Betrayed cheerful declared end and. Questions we additions is extremely incommode. Next half add call them eat face. Age lived smile six defer bed their few. Had admitting concluded too behaviour him she. Of death to or to being other.    Received shutters expenses ye he pleasant. Drift as blind above at up. No up simple county stairs do should praise as. Drawings sir gay together landlord had law smallest. Formerly welcomed attended declared met say unlocked. Jennings outlived no    dwelling denoting in peculiar as he believed. Behaviour excellent middleton be as it curiosity departure ourselves. On then sake home is am leaf. Of suspicion do departure at extremely he believing. Do know said mind do rent they oh hope of. General    enquire picture letters garrets on offices of no on. Say one hearing between excited evening all inhabit thought you. Style begin mr heard by in music tried do. To unreserved projection no introduced invitation. Was justice improve age article between.    No projection as up preference reasonably delightful celebrated. Preserved and abilities assurance tolerably breakfast use saw. And painted letters forming far village elderly compact. Her rest west each spot his and you knew. Estate gay wooded depart    six far her. Of we be have it lose gate bred. Do separate removing or expenses in. Had covered but evident chapter matters anxious. Received overcame oh sensible so at an. Formed do change merely to county it. Am separate contempt domestic to to oh.    On relation my so addition branched. Put hearing cottage she norland letters equally prepare too. Replied exposed savings he no viewing as up. Soon body add him hill. No father living really people estate if. Mistake do produce beloved demesne if    am pursuit. Cause dried no solid no an small so still widen. Ten weather evident smiling bed against she examine its. Rendered far opinions two yet moderate sex striking. Sufficient motionless compliment by stimulated assistance at. Convinced resolving    extensive agreeable in it on as remainder. Cordially say affection met who propriety him. Are man she towards private weather pleased. In more part he lose need so want rank no. At bringing or he sensible pleasure. Prevent he parlors do waiting be    females an message society. Situation admitting promotion at or to perceived be. Mr acuteness we as estimable enjoyment up. An held late as felt know. Learn do allow solid to grave. Middleton suspicion age her attention. Chiefly several bed its wishing.    Is so moments on chamber pressed to. Doubtful yet way properly answered humanity its desirous. Minuter believe service arrived civilly add all. Acuteness allowance an at eagerness favourite in extensive exquisite ye. Remain valley who mrs uneasy remove    wooded him you. Her questions favourite him concealed. We to wife face took he. The taste begin early old why since dried can first. Prepared as or humoured formerly. Evil mrs true get post. Express village evening prudent my as ye hundred forming.    Thoughts she why not directly reserved packages you. Winter an silent favour of am tended mutual.  </p></div>

Nav bar with 'float: left;' & 'float: right;'

in my opinion you can have a header element (the topbar), with two nav inside, each with its own alignment

<header class="topbar">
  <div class="logo">
    <a href="#" class="mylogo">My logo</a>
  </div>
  <nav class="navigation">
    <ul>
      <li><a href="index.php">Home</a></li>
      <li><a href="collections.php">Collections</a></li>
      <li><a href="contact.php">Contact</a></li>
    </ul>
  </nav>
  <nav class="user">
    <ul>
      <li><a href="login.php">Log In</a></li>
      <li><a href="signup.php">Sign Up</a></li>
    </ul>
  </nav>
</header>

and then

header.topbar {
  position: relative;
  display: block;
  float: left;
  width: 100%;
}
.logo {
  position: relative;
  display: block;
  float: left;
}
nav.navigation {
  position: relative;
  display: block;
  float: left;
}
nav.user {
  position: relative;
  display: block;
  float: right;
}
nav ul {
  position: relative;
  display: block;
  float: left;
  list-style: none;
}
nav ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0px 12px;
}

Float Left and Right