How to align text and images on one line and position those to the left and/or right?

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;).

Answers


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/


.title { float: left } /* Float them */
.link_buttons { float: right }
.container:after { /* And clear the float */
    content: '';
    display: table;
    clear: both;
}

Need Your Help

Can maven-exec-plugin fail the build?

maven-2

I have a maven execution that runs a javascript compressor as a command line program, however, this tool also does some jslint checks as well.

Conflict between Fancybox and other JQuery

jquery slider fancybox

i'm using 3 different JQuery plugins to build a website.