CODEWITHSUNDEEP
htmlcsscss-float
Thuan Do
Thuan Do

Reputation: 51

Float div inside another div

I'm trying to make a div float: right inside another div but it does not work? I need help, Here is my code:

.next-week {
  width: 100%;
  height: auto;
  position: relative;
  display: flex;
  background: green;
}

.next-week .next-icon {
  width: auto;
  float: right;
  padding: 12px;
  color: #fff;
  border-radius: 3px;
  border: 1px solid #fff;
  position: relative;
  font-size: 18px;
  line-height: 18px;
  font-weight: 300;
}

.sche-content .next-week .next-icon p {
  display: inline-block;
  margin: 0;
  margin-right: 10px;
}
<div class="next-week">
  <div class="next-icon">
    <p>Next week</p>
    <i class="fa fa-chevron-right" aria-hidden="true"></i>
  </div>
</div>

http://jsbin.com/barenahiru/edit?html,css,output

Upvotes: 0

Views: 1792

Answers (4)

satyajit rout
satyajit rout

Reputation: 1651

you are using display: flex so use margin-left: auto; to make float right in child div

.next-week {
  width: 100%;
  height: auto;
  position: relative;
  display: flex;
  background: green;
}

.next-week .next-icon {
  width: auto;
  float: right;
  padding: 12px;
  color: #fff;
  border-radius: 3px;
  border: 1px solid #fff;
  position: relative;
  font-size: 18px;
  line-height: 18px;
  font-weight: 300;
  margin-left: auto;
}

.sche-content .next-week .next-icon p {
  display: inline-block;
  margin: 0;
  margin-right: 10px;
}
<div class="next-week">
  <div class="next-icon">
    <p>Next week</p>
    <i class="fa fa-chevron-right" aria-hidden="true"></i>
  </div>
</div>

Upvotes: 1

user7207170
user7207170

Reputation:

As mentioned in the comment as well, you just need to use the flex property of justify-content to align elements horizontally. In this case it will take the value of flex-end to align at the end.

.next-week {
  width: 100%;
  height: auto;
  position: relative;
  display: flex;
  justify-content:flex-end;
  background: green;
}

.next-week .next-icon {
  width: auto;
  padding: 12px;
  color: #fff;
  border-radius: 3px;
  border: 1px solid #fff;
  position: relative;
  font-size: 18px;
  line-height: 18px;
  font-weight: 300;
}

.sche-content .next-week .next-icon p {
  display: inline-block;
  margin: 0;
  margin-right: 10px;
}
<div class="next-week">
  <div class="next-icon">
    <p>Next week</p>
    <i class="fa fa-chevron-right" aria-hidden="true"></i>
  </div>
</div>

Upvotes: 0

Subash
Subash

Reputation: 816

Just try to change the attribute in css like this,

.next-week {
  width: 100%;
  height: auto;
  position: relative;
  display: flow-root; // Changed the display style
  background: green;
}

Upvotes: 0

sashaikevich
sashaikevich

Reputation: 197

Floats are ignored in flex containers. So, if you get rid of the flex, and then clear it with a pseudo element, you'll get it on the right :-)

 .next-week {
   width: 100%;
   height: auto;
   position: relative;
   /* display: flex; */
   background: green;
 }
.next-week:after {
 content:"";
 display:block;
 clear:both;
}

Upvotes: 0

Related Questions