Css Tricks - How to align 4 div's


Tags: css,html,vertical-alignment,alignment

Problem :

I have 4 divs in my HTML, I'd love to stay the same this appearance: (Each color a div, totaling 4 (not counting the background color))

enter image description here

For the current scenario: enter image description here

I have the following jsFiddle: HERE

My big problem is when I add another item <li> in my <ul>, the result is that I have the following: enter image description here

Css with the way they are one overlaps the other :'( (crying)

  body {
    background-image:url('http://subtlepatterns.com/patterns/shattered.png');
    margin:0;
}
.chatBody {
    position:absolute;
    bottom:0;
    height:200px;
    width:100%;
    background-color:#3c454f;
    border-top: 10px solid #7ac943;
}
#navlist li {
    display: inline;
    list-style-type: none;
    width:300px;
}
.avatarUser {
    height:80px;
    width:80px;
    background-color:yellow;
    float:left;
    margin-right:20px;
    margin-bottom:20px;
}
li > .frdImage {
    position: relative;
    /*margin-top:-25px;*/
    top:50%;
    float:left;
    margin-left:5px;
    border-radius: 6px;
    border: solid 2px #aaa;
    height:80px;
    width:80px;
    background-color:yellow;
    margin-right:10px;
    margin-bottom:20px;
}
li > span.frdName {
    position:absolute;
    float:left;
    margin-top:10px;
    font-weight: bold;
    font-family:'Verdana', cursive;
    font-size: 15px;
    color: white;
    margin-right:200px;
}
.active{
    width:300px;
}
.frdStatusIndicator{
    float:left;
    margin-top:40px;
    height:15px;
    width:15px;
    background-color: #7ac943;
    border-radius: 10px;
}
.frdStatusName{
    float:left;
    margin-top:40px;
    border-radius: 10px;
    font-family:'Verdana', cursive;
    font-size: 15px;
    color: white;
    line-height:15px;
    padding-left:5px;
}

Could someone kindly help me with this? Since already very grateful for the time you guys!



Solution :

How about this for html

<div class="chatBody">
    <div id="navlist">
        <div class="tile active">
            <div class="frdImage"></div>
            <div class="stuff">
                <div class="frdName">Igor Gomes</div>
                <div class="frdStatusIndicator online"></div>
                <div class="frdStatusName">Online</div>
            </div>
        </div>
        <div class="tile active">
            <div class="frdImage"></div>
            <div class="stuff">
                <div class="frdName">Igor Gomes the second</div>
                <div class="frdStatusIndicator idle"></div>
                <div class="frdStatusName">Idle</div>
            </div>
        </div>
        <div class="tile active">
            <div class="frdImage"></div>
            <div class="stuff">
                <div class="frdName">Igor Gomes the third</div>
                <div class="frdStatusIndicator online"></div>
                <div class="frdStatusName">Online</div>
            </div>
        </div>
        <div class="tile active">
            <div class="frdImage"></div>
            <div class="stuff">
                <div class="frdName">Igor Gomes the fourth</div>
                <div class="frdStatusIndicator offline"></div>
                <div class="frdStatusName">Offline</div>
            </div>
        </div>
        <div class="tile active">
            <div class="frdImage"></div>
            <div class="stuff">
                <div class="frdName">Igor Gomes the fifth</div>
                <div class="frdStatusIndicator idle"></div>
                <div class="frdStatusName">Idle</div>
            </div>
        </div>
    </div>
</div>

and this for css:

  body {
    background-color: #3c454f;
  }
  #navlist > div.tile {
      display: inline-block;
      width:300px;
      border: solid 1px red;
      position: relative;
  }
  .avatarUser {
      height:80px;
      width:80px;
      background-color:yellow;
      float:left;
      margin-right:20px;
      margin-bottom:20px;
  }
  div.tile > .frdImage {
      border-radius: 6px;
      border: solid 2px #aaa;
      height:80px;
      width:80px;
      background-color:yellow;
      display: inline-block;
  }
  div.tile > div.stuff > div.frdName {
      position:relative;
      display: inline-block;
      right: 0px;
      margin-top:10px;
      font-weight: bold;
      font-family:'Verdana', cursive;
      font-size: 15px;
      color: white;
      width: 200px;
  }
  .active{
      width:300px;
  }
  div.tile > div.stuff {
      position: relative;
      top: -2em;
      width: 208px;
      /* border: solid 1px green; */
      display: inline-block;
  }
  .frdStatusIndicator{
      position: relative;
      height:15px;
      width:15px;
      background-color: #7ac943;
      border-radius: 10px;
      display: inline-block;
  }
  .frdStatusName{
      position: relative;
      border-radius: 10px;
      font-family:'Verdana', cursive;
      font-size: 15px;
      color: white;
      line-height:15px;
      padding-left:5px;
      display: inline-block;
  }
  .offline {
      background-color: #FF0000;
  }
  .online {
      background-color: #00FF00;
  }
  .idle {
      background-color:  #FFFF00;
  }

I suppose I have to do a jsfiddle for this ... http://jsfiddle.net/bbutler/TMgs5/1/


    CSS Howto..

    How to click on a link from the header and then go back with HTML, Javascript and CSS? [closed]

    css selector question, how to change font colover of parent li when child ul is focused

    How to wrap div containing spans containing the text to be wrapped?

    How do you deal with the designing issues of a website?

    CSS: How to prevent contents of scrollable div from appearing behind a fixed div

    How can I hide page elements till an AJAX call completes?

    HTML/CSS slideshow without javascript

    How to center checkbox vertically in a table-cell?

    How to create a border that will outline div minus the margins

    How to override CSS code with a new class?

    Getting an class to show when item is clicked

    How can I change the color CSS property of an element using jQuery

    How to select, focused textarea?

    jQuery: How to get DIV to slide-off the screen and another to slide in?

    How to override previous onClick css class change (jQuery)

    How do I vertically align text inside an anchor element, which is nested within an unordered list

    How to change asp:DropDownList extended background color ? CSS class

    How to add color to text in my div with code

    How to make div expand all the way to the right

    How can I wrap this text so it doesn't overflow past the widget container?

    How to parameterize CSS selectors? [duplicate]

    How do I find out if a CSS class exists in a StyleSheet? [duplicate]

    How do I create a 'linklist' like a tooltip with HTML and CSS or jQuery and CSS?

    How to show and hide fieldset content on click of the legend

    How to space children evenly horizontally in css

    How to edit ol tags in rich text editor

    How to get page content to stretch and stick footer to bottom of page?

    Website Content Shown on Moz but not Chrome

    How to Make Radio Button Into CSS Button?

    How to revise the css transitions with a delay