0

I have the following CSS and HTML code:

div.container { height: 40px; }
div.container .title {}
div.container .link_buttons {}


<div>
  <div class="container">
    <div class="title">
      <img width="16" height="16" src="/favicon.ico" alt="Text">

      <a href="http://www.test.com">Test website</a>
    </div>

    <div class="link_buttons">
      <a target="_blank" href="http://www.test.com">
        <img src="transparent.gif" class="background_image" alt="Text">
      </a>
    </div>
  </div>

  <!-- The same structure as the above but with different data. -->
  <div class="container">...</div>
  <div class="container">...</div>
</div>

I would like to align on the same line all the content present in each div.container and inside each div.container to make the div.title content to be positioned on the left and the div.link_buttons content to be positioned on the right. Made this, I would like to vertical align div.title and div.link_buttons in the middle of div.container.

How can I style the CSS the proper way? Or, have I to rethink and change the whole HTML code so to simplify things? If so, what I can make in order to have the same result?

Note: I tried to use float, but I am in trouble mostly because then I can not vertical align the div.title and div.link_buttons inside the div.container (as you can see in the above code, it has height: 40px;).

Backo
  • 18,291
  • 27
  • 103
  • 170
  • I also come up to this: http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div – Backo Feb 08 '14 at 11:47

2 Answers2

0
.title { float: left } /* Float them */
.link_buttons { float: right }
.container:after { /* And clear the float */
    content: '';
    display: table;
    clear: both;
}
bjb568
  • 11,089
  • 11
  • 50
  • 71
  • In my tests I got almost your same results. The problem is that I cannot vertical align `div.title` and `div.link_buttons` inside the `div.container` (note: it has `height: 40px;`). I would like to *vertical align* those in the middle of the container. – Backo Feb 07 '14 at 20:13
0

Here you go:

div.container { height: 40px; line-height:40px;}
div.container .title {float:left;}
div.container .link_buttons {float:right}

http://jsfiddle.net/WH4eK/

CodeViking
  • 206
  • 1
  • 6