CODEWITHSUNDEEP
htmlcssalignment
Katrine Mira Arndt Lind
Katrine Mira Arndt Lind

Reputation: 153

Align div to right, without using float

I want the outcome on the pictures where the 3 bubbles are underneath each other - however when I do this with float, the third and last element aligns with the second that holds the float. How do I make it float right, without having the 3rd element align?

html: 

<section class="javascript">
    <div class="js-wrapper">
        <h3>JAVASCRIPT</h3>
    </div>  
</section>
<section class="javascript">
    <div class="js-wrapper2">
        <h3>JAVASCRIPT</h3>
    </div>  
</section>
<section class="javascript">
    <div class="js-wrapper3">
        <h3>JAVASCRIPT</h3>
    </div>  
</section>

css: 

.js-wrapper {
   background-color: #8E8ABC;
   border-bottom-right-radius: 12em;
   border-top-right-radius: 12em;
   width: 40%;
}
.js-wrapper2 {
   background-color: #8AACBA;
   border-bottom-left-radius: 12em;
   border-top-left-radius: 12em;
   width: 40%;
   float: right;
}
.js-wrapper3 {
   background-color: #76B783;
   border-bottom-right-radius: 12em;
   border-top-right-radius: 12em;
   width: 40%;
}

Upvotes: 1

Views: 3159

Answers (2)

Manikandan2811
Manikandan2811

Reputation: 841

Without using float concept..

css

.javascript:nth-child(2n+2) {
    justify-content: flex-end;
    -webkit-justify-content: flex-end;
}
.javascript {
    display: flex;
    display: -webkit-flex;
}

or

.javascript {
  clear: both;
}

Upvotes: 1

Lalji Tadhani
Lalji Tadhani

Reputation: 14149

Use display:inline-block your child element on section

add text-align:right :nth-child(2n+2) to your .javascript section element

.javascript:nth-child(2n+2) {
  text-align:right;
}

.js-wrapper {
    background-color: #8E8ABC;
    border-bottom-right-radius: 12em;
    border-top-right-radius: 12em;
    width: 40%;
    display:inline-block;
}
.js-wrapper2 {
    background-color: #8AACBA;
    border-bottom-left-radius: 12em;
    border-top-left-radius: 12em;
    width: 40%;
    display:inline-block;
}
.js-wrapper3 {
    background-color: #76B783;
    border-bottom-right-radius: 12em;
    border-top-right-radius: 12em;
    width: 40%;
    display:inline-block;
}

https://jsfiddle.net/lalji1051/qgfLnd1s/21/

Upvotes: 3

Related Questions