CODEWITHSUNDEEP
htmlcsscss-float
CSS Apprentice
CSS Apprentice

Reputation: 939

How Can I Bring 2 Separate Float's Together?

I have 2 floats, one on the left side of the screen and one right. My goal is to move the left float to the right side of the screen, but without moving it to the right side of my other float. I am unable to change their order in the HTML, so the first float is currently taking precedence. Am I overlooking something? If not, what alternatives do I have?

jsFiddle: http://jsfiddle.net/h7y9bwre/

HTML:

<!-- Section 1 -->
<div class="left">
    <p>Some Text</p>
    <p>Other Stuff</p>
</div>

<!-- Section 2 -->
<div class="right">
    <img src="http://placehold.it/30x30" />
    <img src="http://placehold.it/30x30" />
</div>

"Section 1" has to stay above "Section 2" in the HTML.

Currently: Currently

Goal: Goal

Upvotes: 0

Views: 83

Answers (7)

Samuell
Samuell

Reputation: 215

You don't need to use floats for this. Just set wrappers as inline-blocks and align them into the right.

.right,
.left {
  display: inline-block;
}
#bar-container {
  text-align: right;
}

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 114990

flexbox can do that

#bar-container {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
#bar-container div {
    border:1px solid red;
}
p {
    display: inline-block;
    padding: 0 1%;
    margin: 0;
}
<div id="bar-container" class="clearfix">
    <div class="left">
        <p>Some Text</p>
        <p>Other Stuff</p>
    </div>
    <div class="right">
        <img src="http://placehold.it/30x30" />
        <img src="http://placehold.it/30x30" />
    </div>
</div>

Upvotes: 2

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

As per your picture, you can do like this:

#bar-container{
    float: right;
    width: 300px;
}

demo

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32172

Hi now define your class .left float: right; margin-left:50%;

as like this 

#bar-container .left{
    float: left;
    width:25%;
    margin-left:50%; 
}
#bar-container .right{

    width:25%; 
}

Upvotes: 0

Abhitalks
Abhitalks

Reputation: 28387

Just change the floats in your css.

Instead of:

.left {float: left;}
.right {float: right; }

Invert it:

.left {float: right;}
.right {float: left; }

Fiddle: http://jsfiddle.net/abhitalks/h7y9bwre/1/

Edit (based on Op's edit to question):

Change the percent width and margins of your divs. Currently, they are 50% of the entire width. Change to:

.left, .right {width: 25%;}
.left {float: left; margin-left: 50%;}
.right {float: right; }

Fiddle 2: http://jsfiddle.net/abhitalks/h7y9bwre/5/

Upvotes: 0

chrona
chrona

Reputation: 1911

You can override the current CSS to let the <div>s align to the right by making them inline-block.

#bar-container {width: 100%;}
.left, .right {width: 50%;}
.left {float: left;}
.right {float: right; }

p {display: inline-block; padding: 0 1%}

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */


/**
 * YOUR STYLES
 */



#bar-container {
  text-align: right;
}

.left, .right {
  display: inline-block;
  float: none;
  vertical-align: middle;
  width: auto;
}

.left {
  min-width: 200px;
}
<div id="bar-container" class="clearfix">
    <div class="left">
        <p>Some Text</p>
        <p>Other Stuff</p>
    </div>
    
    <div class="right">
        <img src="http://placehold.it/30x30" />
        <img src="http://placehold.it/30x30" />
    </div>
</div>

Upvotes: 2

Baoyun Chen
Baoyun Chen

Reputation: 281

I just change .right css with 

position:relative;
top:100px;
left:300px;

I have update jsFiddle: the http://jsfiddle.net/h7y9bwre/4/ Don't know if that is what you want. Hope it is helpful.

Upvotes: 0

Related Questions