inline div shrinks to nothing

Giganews Newsgroups
Subject: inline div shrinks to nothing
Posted by:  Robbie Brown (dac@nomail.invalid)
Date: Sun, 24 May 2015

I have the following

in a separate stylesheet

..promotion{
    background-color:#FFA500;
    border:1px solid black;
    margin-bottom:10px;
    font-size: 0.9em;
    border-radius:3px;
}

..promotiontitle{
    padding:5px;
    font-weight:bold;
}

..promotiontext{
    padding-left:5px;
    padding-right:5px;
}

..promotionlink{
    padding:5px;
}

promotions.jsp

<div class='container' style='display:block; max-width:182px'>
    //for each visible promotion
    <div class='promotion'>
      <div class='promotiontitle'>
          //promotion title
      </div>
      <div class='promotiontext'>
          //promotion text
      </div>
      <div class='promotionlink'>
        //promotion link
      </div>
    </div>
</div>
<div class='container' style='display:block; max-width:182px'>
    //for each pending promotion
    <div class='promotion'>
      <div class='promotiontitle'>
          //promotion title
      </div>
      <div class='promotiontext'>
          //promotion text
      </div>
      <div class='promotionlink'>
        //promotion link
      </div>
    </div>
</div>
<div class='container' style='display:block; max-width:182px'>
    //for each archived promotion
    <div class='promotion'>
      <div class='promotiontitle'>
          //promotion title
      </div>
      <div class='promotiontext'>
          //promotion text
      </div>
      <div class='promotionlink'>
        //promotion link
      </div>
    </div>
</div>

I'm trying to get each container to appear side by side
If I set the container style to display:block the containers appear one
above the other

If I set display:inline the container shrinks to 0 x 0 pixels and the
promotions expand the fill the entire screen width.

Any ideas where I'm going wrong?
Thanks

Rob

--
Rob - not floundering, fishing.

Replies