CODEWITHSUNDEEP
csshtmlwebcss-float
joshreesjones
joshreesjones

Reputation: 1954

HTML and CSS: Float a block element inside another block element?

Is it possible to float a <ul> inside a <div>? If so, how?

Upvotes: 1

Views: 1701

Answers (2)

madhushankarox
madhushankarox

Reputation: 1477

[YES]

CSS:

<style type="text/css">
  div.my-div {
    width: 200px;
    height: 200px;
  }
  div.my-div ul.left-floated {
    width: 100px;
    height: 200px;
    float: left;
    /* display: block; */
  }
  div.my-div ul.right-floated {
    width: 100px;
    height: 200px;
    float: right;
    /* display: block; */
  }
  .clearfix {
    clear: both;
    line-height: 0;
    font-size: 0;
    height: 0;
  }
</style>

HTML:

<div class="my-div">
  <ul class="left-floated">
  </ul>

  <ul class="right-floated">
  </ul>

  <br class="clearfix" />
</div>

Upvotes: 1

Marty
Marty

Reputation: 39456

Is this what you want:

div > ul
{
    float: left;
}

Upvotes: 3

Related Questions