CODEWITHSUNDEEP
htmlcss
Pwnna
Pwnna

Reputation: 9538

Make ul tags behave properly when having a float element wrapping it

#wrap{
    border: 1px solid black;
    margin: 10px;
    float: left;
    width: 200px;
    height: 150px;
}

ul{
    list-style: square;
}

<div id="wrap">
    MEH!
</div>

<ul>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
</ul>

<p>Perfect stuff!</p>

http://jsfiddle.net/Z2p8Z/3/

As you can see, the bullet points appears inside the box.

The requirement is not changing the HTML or the #wrap CSS. Is it possible? If so, how?

Upvotes: 1

Views: 650

Answers (2)

Christian Schlensker
Christian Schlensker

Reputation: 22478

You need to set margin-left:236px on the ul. Or the easy way would be to set:

ul{
 list-style-position:inside;
}

They both have the same effect.

EDIT: If you want to make sure that both the ul and the text below it are aligned then you should wrap them in a div and add the margin to that div:

<div id="right-col">
  <ul>
    <li>bullet</li>
  </ul>
  <p>text</p>
</div>

CSS:

div#right-col{
  margin-left:236px;
}

Upvotes: 1

BoltClock
BoltClock

Reputation: 723729

Either shift the bullets in:

ul {
    list-style: square inside;
}

Or shift the entire list in with some margin/padding:

ul {
    list-style: square;
    margin-left: 1em; /* Or padding-left: 1em */
}

There is a slight difference between these two: the margin/padding solution lets you adjust how far out you want to push the list items. Either solution works here, though.

The difference is more significant if your li text spans multiple lines; having an inside list position means only the line with the bullet point gets pushed in. Margin/padding on the ul or the li elements doesn't cause this issue.

Upvotes: 2

Related Questions