CODEWITHSUNDEEP
htmlcss
crazyvi
crazyvi

Reputation: 57

css list goes out of position

My HTML:

  <div id="content">
    <ul>
     <li>first list---ipsum ipsum ipsum<li>list inside list....ipsumipsumipsumipsum</li></li>
     <li class="last">last list content--ipsumipsumipsumipsum</li>
    </ul>
   </div>

My CSS:

   #content{
 padding:30px 0 25px 0;
}

   #content ul{
display:inline;
margin:0;
padding:0;
list-style:none;
}

    #content li{
display:block;
float:left;
width:500px;
margin:0 45px 0 0;
}
    #content li.last{
width:290px;
float:right;
}

The output I get is list with 'last' class comes parallel to the list inside the first list. My intention is to get it parallel with the first list.

Upvotes: 0

Views: 142

Answers (5)

Afshin
Afshin

Reputation: 4215

Your code works fine just change html like this as @ZoltanToth said and reduce li width 

<div id="content">
 <ul>
   <li>first list---ipsum ipsum ipsum
       <ul>
           <li>list inside list....ipsumipsumipsumipsum</li>
       </ul>
   </li>
   <li class="last">last list content--ipsumipsumipsumipsum</li>
 </ul>
</div>​

http://jsfiddle.net/xBEQc/1/

Upvotes: 0

Sirwan Afifi
Sirwan Afifi

Reputation: 10824

put these code into #content li.last style

position:absolute;
top:30px;
margin-left:300px;

Upvotes: 0

Sven Bieder
Sven Bieder

Reputation: 5681

If you change your CSS to this, it does what you want.

#content ul{
    display:inline;
    margin:0;
    padding:0;
    list-style:none;
    position relative;   
}

#content li{
    float:left;
    width:500px;
    margin:0 45px 0 0;
}

#content li.last{
    width:290px;
    position:absolute;
    top:0;
    right:0;
    clear:both;
}

Upvotes: 0

bookcasey
bookcasey

Reputation: 40463

Demo

Use a negative margin on .last.

Upvotes: 1

Rick Calder
Rick Calder

Reputation: 18695

http://jsfiddle.net/calder12/eXFYY/

Like that? You're floating the last list element right, what did you expect to happen exactly?

#content li.last{
width:290px;
float:left;
}​

And yeah looking closer at the HTML that is messed up, you shouldn't have list elements inside list elements. You can however have another list inside a list element like this:

<ul>
  <li>Something
    <ul>
       <li>Something else</li>
    </ul>
  </li>
</ul>

Upvotes: 0

Related Questions