CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
readJohn
readJohn

Reputation: 173

DIV incorrect positions after float:right

Heading

I want to have one of my blocks(BBB) in the right side of screen. It's ok, but the other div(CCC) is getting up.How can I force to CCC dont to getting the empty space of BBB.Here is my code:

                        <div class="row text-left">
                         <div class="col-xs-2">
                                <h5>AAA</h5>
                                <field name="AAA"/>
                            </div>
                        </div>
                        <div class="row text-left" style="float: right;">
                            <div class="col-xs-2 ">
                                <h5>BBB</h5>
                                <field name="BBB" />
                            </div>
                        </div>

                         <div class="row text-left" >
                            <div class="col-xs-2">
                                <h5>CCC</h5>
                                <field name="CCC"/>
                            </div>
                        </div>

Upvotes: 0

Views: 77

Answers (2)

Lorenzo028
Lorenzo028

Reputation: 17

Try this code:

div.col-xs-2 {
  position: relative;
}
div.col-xs-2:first-of-type {
  top: 0;
  left: 0;
}
div.col-xs-2:nth-of-type(2) {
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  background-color: green;
}
div.col-xs-2:last-of-type {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background-color: blue;
}

Upvotes: 0

Przemysław Niemiec
Przemysław Niemiec

Reputation: 1714

Just don't use css "float" property. There are a lot of newer alternatives. You can use flexbox or grid instead.

Here you have the solution of this problem using flexbox:

HTML:

<div class="wrapper">
   <div class="aaa">aaa</div>
   <div class="bbb">bbb</div>
   <div class="ccc">ccc</div>
</div>

CSS:

.wrapper {
   display: flex;
   flex-direction: column;
}
.aaa, .ccc {
   align-self: flex-start;
}
.bbb {
   align-self: flex-end;
}

You can read about flexbox here, or about grid here.

Upvotes: 1

Related Questions