List Misbehaving

[TheN00b]

Hello CSS Friends

I am having some trouble with a horizontal list of blocks, here is a screenshot:

As you can see the last two items have moved down a bit ! I don’t know why that is ! I am checking in FireBug and all seems fine in terms of padding and margins !

Here is the HTML and CSS Markup:

HOW TO APPLY


Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Read More





ACCOMMODATION


TOFFL & IELTS

#actBtns

{

margin: 0 0 20px 0;

}



#actBtns ul li

{

display: inline-block;

height: 136px;

width: 300px;

margin-right: 10px;

background: #fff url('Images/actBtnBg.jpg') repeat-x;

border: 1px solid #c8eef9;

-webkit-border-radius: 8px;

-moz-border-radius: 8px;

border-radius: 8px;

}



#actBtns ul li img

{

float: left;

padding: 15px 0 0 20px;

}



#actBtns ul li h3

{

font-weight: bold;

color: #04516b;

padding: 15px 0 0 130px;

}



#actBtns ul li p

{

padding: 6px 0 8px 130px;

color: #3b3b3b;

font-size: 85%;

}



#actBtns ul li a

{

padding: 0 0 0 14px;

color: #04516b;

}



#actBtns ul li.lastItem

{

margin-right: 0;

}

I would greatly appreciate any help with this.

Thank You.

[yomoore]

Try giving your main div height and width + display: inline; for your ”li” instead of display: inline-block;

[Ethan27]

By the way dude the design looks great!!!

[TheN00b]

Hi Guys

@Yamoore: I just tried that, it did not work. The layout remains messed up.

@Ethan: Thanks !

[TheDoc]

Why don’t you just change them to Divs and float them all to the left?

[yomoore]

display: inline-block;
float: left;

works for me in chrome.

[TheN00b]

hehe thank you so mcuh TheDoc. I don’t know why I didn’t think of that ! :D

It worked.

Thank You once again.

[yomoore]

Instead of putting one sentence, you could of course change everything about your design and making them all divs. youre brilliant.

[noahgelman]

@yomoore, switching those from list items to divs is more semantic anyways. It uses less code and makes more sense since it’s not actually a list. Overall it’s an improvement

[Author]

Posts