I'm currently facing an issue where I want a div to occupy a full line and force the next div onto a new line. This is typically achieved by using display:block in the CSS for the first div, or so I believe. However, this approach doesn't seem to be working for me. I'm not sure what I might be overlooking. To clarify, the div I want to span a full line is the flags-right div class. At the moment, it's displaying on the same line as the left-aligned photo. Below is my HTML code:
<div class="flags-right">
<div class="red-circle"></div>
<div class="blue-circle"></div>
<div class="yellow-circle"></div>
</div>
<div class="photo"><img [src]="rkPhoto" alt="photo" /></div>
Here is the corresponding CSS:
.flags-right {
float: right;
display: block
}
.photo {
float: left;
height: 4.563rem;
width: 4.688rem;
margin-right: 0.75rem;
}
.red-circle {
width: 20px;
height: 20px;
float: left;
margin-right: 4px;
background: #f9646a;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
.blue-circle {
width: 20px;
height: 20px;
float: left;
margin-right: 4px;
position: relative;
background: #54a6f4;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
.yellow-circle {
width: 20px;
height: 20px;
float: left;
margin-right: 4px;
position: relative;
background: #fcff26;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}Furthermore, here's the CSS for the container element:
.col-1-4 {
background: @containerBgColor;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
color: @flagText;
float: left;
padding: 10px;
text-align: left;
margin-bottom: 8px;
margin-right: 8px;
width: 24%;
}