This is element that I'm trying to achieve: http://i.imgur.com/9XmGXkt.png
This is "template" of what I have to work with: https://jsfiddle.net/hcgpyutj/

I tried floating, staticing, absoluting, relativizing, tables, transform. I changed file about 10 times and of each situation something went wrong one way or another. I cannot use flexbox. I don't have any other ideas. I'm out. I don't know.

I don't know height of the parent div (it is set by padding + font-size). I would really need it centered vertically and on the right side. With objects within "here"-div, also being vertically middle aligned.

Could someone help me out on this?

https://jsfiddle.net/hcgpyutj/1/

Recommended Answers

All 3 Replies

Something like this?

<div id="generalbox">
  <div id="box3">
    <div id="item1" class="item" >This is example forum</div>
    <div id="item2" class="item" >This is example forum's description</div>
  </div>
  <div id="righthand">
    <div class="rightHandBlock"></div>
    <div class="rightHandBlock"></div>
   <div class="rightHandBlock"></div>
  </div>
</div>

CSS:

#generalbox {
    display: block;
    padding: 1.5%;
    margin-bottom: .15%;
    background-color: #222;
}

#box3 {
    display: inline-block;
    width: 54%;
    background-color: #a1a1a1;
}
.item {
  text-align: center;
  border: 3px solid #000;
}
#item1 {
    font-size: 1.8em;
    color: #000;
    text-decoration: none;
}

#item2 {
    font-size: 1.8em;
    color: #555;
}    
#righthand {
    display: inline-block;
    background-color: red;
    float: right;
    width: 90px;
}
.rightHandBlock {
  display: inline-block;
  border: 1px solid #fff;
  height: 40px;
  width: 40px;
}

Not quite. Floating to the right, gives about the same result. The problem with it, is that the red part needs to be vertically centered and on the right. Which I succeeded, one or the other, never both at the same time.

Member Avatar for diafol
#generalbox {
    display: block;
    padding: 1.5%;
    margin-bottom: .15%;
    background-color: #222;
    position:relative;
}

#box3 {
    display: inline-block;
    width: 54%;
    background-color: red;
}

#item1 {
    font-size: 1.8em;
    color: #000;
    text-decoration: none;
}

#item2 {
    font-size: .8em;
    color: #555;
}

#righthand {
   background-color: red;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.