Jerson Jerson - 5 months ago 13
CSS Question

Float content with width 100%

I'm trying align all content to left side, but doesn't work well.
This is my code:



<div style="float: left; width: 250px; background-color: red;">
asdfasdf
<br>asdfasdf
<br>asdfasdf
<br>asdfasdf
<br>asdfasdf
<br>asdfasdf
<br>
</div>
<div>
<div class="top-content-right" style="border-left: 15px solid #37afd2; background-color: #444444; color: #FFFFFF; font-weight: 600; height: 40px; line-height: 40px; width:600px;">
<span class="fa fa-briefcase space-left" aria-hidden="true"></span>
<span class="text-title-right">Example</span>
<p style="color: #000000;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

</div>
</div>





I what this (but with example bar, width:100%):

Example1:
enter image description here
Example2:
enter image description here

Is possible?

Answer

Is this what you look for?

Move the top-content-right below the left floated div, remove its width: 100% and add margin-left: 250px and it will work as expected

When you float an element to the left and want another appear at its right, the right element need to be after in the markup and have a left margin matching the floated's width.

And if you would like to float an element to the right and want another appear at its left, the left element need to be after in the markup and have a right margin matching the floated's width.

.top-content-right ~ .top-content-right {
  width: 100%;
  margin-left: 0 !important;
}
<div style="float: left; width: 250px; background-color: red; margin: 0 5px 5px 0;">
  asdfasdf<br>
  asdfasdf<br>
  asdfasdf<br>
  asdfasdf<br>
  asdfasdf<br>
  asdfasdf<br>
</div>
<div class="top-content-right" style="border-left: 15px solid #37afd2; background-color: #444444; color: #FFFFFF; font-weight: 600; height: 40px; line-height: 40px; margin-left: 250px;">
  <span class="text-title-right">Example</span> 
</div>
<div>
  <span class="fa fa-briefcase space-left" aria-hidden="true"></span> 
  <p style="color: #000000;">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>
<div class="top-content-right" style="border-left: 15px solid #37afd2; background-color: #444444; color: #FFFFFF; font-weight: 600; height: 40px; line-height: 40px; margin-left: 250px;">
  <span class="text-title-right">Example</span> 
</div>
<div>
  <span class="fa fa-briefcase space-left" aria-hidden="true"></span> 
  <p style="color: #000000;">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>