CODEWITHSUNDEEP
htmlcss
NickG
NickG

Reputation: 138

Why doesn't this case of display inline work?

I'm trying to arrange the content like a 2 X 3 table would, but using css. However when I try to use inline-block it doesn't work(I have tried multiple browsers). See the items tagged with the "content" class.This is what I'm trying to do "http://aggiebass.net63.net/" Edit: After changing ".content div ul li" to ".content ul li" the text still doesn't act correctly. 

<head><style>
  .content{
    background-color:white;
    margin:auto;
    width:80%;
  }
  .content img{
    width:200px;
    height:250px;
  }
 .content ul li{
    display:inline-block;
    list-style:none;
</style></head><body>
  <div class="content">
    <ul>
      <li><div class="tbox">
        <img src="Calendar.jpg" >
        <h2>Calendar</h2>
        <p>Check here to moniter meetings and other events. Additionally this calendar can be synchronized with other calendar programs.</p>
      </div></li>
      <li><div class="tbox">
        <img src="Calendar.jpg" >
        <h2>Resources</h2>
        <p>When you join BASS you not only benafit from a strong community but also from our club resources such as our class notes & study guide database.</p>
      </div></li>
      <li><div class="tbox">
        <img src="Contact.jpg" >
        <h2>Newsfeed</h2>
        <p>Catch up on the latest club news. Check here for anouncments and details on recent club events. This feed is also availible on facebook.</p>
      </div></li>
    </ul>
  </div>
</body></html>

Upvotes: 1

Views: 81

Answers (5)

NickG
NickG

Reputation: 138

Correcting the syntax fixed the issue for the pictures, but still let the paragraphs underneath sprawl.

Correcting the syntax and adding a class for the paragraphs seems to work.

  div.tbox {
    width:200px;
    padding:10px;
  }

Upvotes: 0

bn00d
bn00d

Reputation: 1136

You have a error in your CSS You are not cascading your element correctly. I think you wanted to do something like

div.content ul li{
    display:inline-block;
    list-style:none;
}

Not

.content div ul li{
    display:inline-block;
    list-style:none;
}

The second one is not valid for your HTML structure

Upvotes: 1

maioman
maioman

Reputation: 18734

Try changing 

.content div ul li

to

.content ul li

Upvotes: 1

j08691
j08691

Reputation: 207881

Probably because your CSS is incorrect. .content div ul li is looking for a div descendant of .content (and there isn't one). It should be:

.content ul li {
    display:inline-block;
    list-style:none;
}

jsFiddle example

Upvotes: 4

Steve Sanders
Steve Sanders

Reputation: 8651

.content div ul li does not exist, instead you should use:

.content ul li{
    display:inline-block;
    list-style:none;
}

Upvotes: 1

Related Questions