CODEWITHSUNDEEP
csscss-floathtml-listsbackground-color
Ari Linn
Ari Linn

Reputation: 207

UL and floating DIV: list text wraps but background color doesn't

Need help with a floating DIV and a list. A DIV is floating to the right side of a page while list entries flow around it. The problem is that on applying background color to LI elements of the list the color stretches full width while text wraps on reaching DIV. How to make background color of LI's wrap like text does while keeping LI's display as blocks?

Here is the example code:

<html>
<style>
  .mydiv {
    height: 200px;
    width: 200px;
    background-color: red;
    margin-right: 45px;
    float: right;
    clear: right;
  }
  
  li {
    background-color: cyan;
  }
</style>

<body>

  <div class="mydiv"></div>

  <ul>
    <li>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.</li>
  </ul>
</body>

</html>

Upvotes: 2

Views: 3025

Answers (3)

Daniel
Daniel

Reputation: 4946

How about applying a margin on your ul tag

try this css and perhaps that brings you where you want to go. The div is not floating, so you need to decide if you really need it to be.

<style>
    .mydiv
    {
    height:200px;
    width:200px;
    background-color:red;
    margin-left:45px;
    position: absolute;
    right: 0px;
    }
    li
    {
    background-color:cyan;
    }
   ul{
    margin-right: 200px;
    }
</style>

Upvotes: 0

andyb
andyb

Reputation: 43823

If you change the CSS to:

li {
    background-color:cyan;
    margin-right:45px;
}

then the <li> will end where the <div class="mydiv"> ends. You could even set it to margin-right:245px;, which will cause the <li> to end at the left edge instead.

Upvotes: 0

Guganeshan.T
Guganeshan.T

Reputation: 583

Try display: inline; as follows

li
{
    background-color:cyan;
    display: inline;
}

EDIT:

Another way, assuming you can add a fixed with to your UL

ul
{
    width: 700px;
}

Upvotes: 2

Related Questions