display: inline; causes chaos

[madmatter23]

Hello,

I'm having some trouble with display: inline;

SITUATION:
Without it using the property, everything "works" fine. But, I need to display a couple of these "working" list items on the same line and in the center of their parent div.

PROBLEM:
As far as I know, using inline display is the only way to do this, but once I assign the property, everything goes crazy. Overflow:hidden; breaks, which causes the widths and heights to go all wrong, etc.

GOAL:
I need to find a way to display the two elements li.group to be displayed inline and centered without screwing everything else up.

PLEA:
Can anyone please tell me if there is something wrong with my code and if there is a way to achieve the desired goal? I would really appreciate the help. Thank you.

CODE:

relevant css:


#groups {
margin: 10px;
}

.group {
position: relative;
width: 130px;
height: 290px;
overflow: hidden;
margin: 40px auto;
background: #444444;
border: 5px solid;
border-color: #444444;
padding: 0;
display: inline;
}

.group_title {
position: relative;
top: 90px;
color: white;
font-size: 1.3em;
text-align: center;
background: #444444;
}

.group_link {
margin: 0;
padding: 0;
border: none;
color: white;
text-decoration: none;
}

.group_img {
position: absolute;
top: 0;
left: -20px;
margin: 0;
padding: 0;
border: none;
}


relevant html:


<div id="groups">
<ul>
<li class='group'>
<p class='group_title'>2008</p>
<a href='group.php?exid=1' class='group_link'>
<img src='/medium_1/exhibition_1/ex_mids/paul.jpg' alt='' class='group_img'/>
</a>
</li>
<li class='group'>
<p class='group_title'>2007</p>
<a href='group.php?exid=2' class='group_link'>
<img src='/medium_1/exhibition_2/ex_mids/2007.jpg' alt='' class='group_img'/>
</a>
</li>
</ul>
</div>


Without display: inline; (http://www.stephenshaheen.com/groups.php?medium_id=1)
With display: inline; (http://www.stephenshaheen.com/groups1.php?medium_id=1)

Turning off or removing all JavaScript has no effect. I don't think it's the source of the problem.

[_Aerospace_Eng_]

Will the width of the images always be the same width or will that change?

[madmatter23]

Well I think that technically the width stays the same...BUT, without display:inline, overflow:hidden is functional, so the image appears cropped (which is intended)

There are links at the bottom of the original post if you want to check out the effect first hand.

Thank you!

[_Aerospace_Eng_]

#groups {
margin: 10px auto;
width:440px; /* this needs to be the total width of .group times the number of images you have. 130px + 80px + 10px = 220px */
}

.group {
position: relative;
float:left;
width: 130px;
height: 290px;
overflow: hidden;
margin: 40px;
background: #444444;
border: 5px solid;
border-color: #444444;
padding: 0;
}

[madmatter23]

I modified the code in the way that you suggested, and this does center the list items, but it does not help to place both list items on the same line. Adding display: inline; still has the same effect.

Do you have any ideas on how to combat this problem? Or perhaps just what might be causing it?

Thanks for you help.

[_Aerospace_Eng_]

You've missed the most important part. You don't need display:inline; but you DO need float:left; on .group. I also changed the margins. Learn to read the code properly rather than copying and pasting.

[madmatter23]

OH! I see.

I actually didn't copy and paste your code, that's why it didn't work for me at first. I guess I've been adding and removing float so many times, I missed the discrepancy.

I had tried something very similar to this solution myself. I floated .group and changed the margins in the same way, but didn't specify the width.

The problem with specifying the exact width is that these groups are echoed by php according to a mysql loop, so the quantity of groups isn't static. However... I could have the php just calculate the number of groups and write some inline css to specify the width. That'd work.

Thanks a lot for your help, I didn't think to control the width rather than control the positioning withing the parent div!