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


Tags: html,css,image,text,alignment

Problem :

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



Solution :

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/


    CSS Howto..

    How to automatically resize the wrapper div using CSS

    How to create a floating JavaScript Clock for UTC and Local Time?

    how to add items into a CSS based text rotator (similar to news ticker)

    how to position radio button outside of a block with css

    How to design a CSS for a centered floating confirm dialog?

    How to design multiple time clock wise rotation of a image in css

    How to align/move Vaadin buttons

    css how to center this content

    How to avoid setting CSS class to one table among two tables?

    how to show text in a button with css

    How to remove CSS and JS from a certain content-type in Drupal 7

    How to load content in a “virtual window” like “LightBox”

    How to make slanted CSS arrow pointing to a div

    how to remove a CSS property using jquery

    How do I prevent a child element from inheriting parent element's attached attribute (in notched navigation)?

    How to make this css readable?

    How to center a image with transparent background in css?

    How to reach 'this' element in the .css part in Jquery

    if i clone an element, when i customize (css) that element how can customize also the element cloned?

    How to center li tags list

    How to override applied CSS rules in media queries?

    jquery hide and show for printing

    How to move a carousel item to the middle when it's clicked in jquery

    How to remove css : hover using jquery?

    How to put four images 2x2 on other image as background, CSS?

    How can I use a CSS transform to vertically-center two overlapping elements?

    How can I know if I am clicking on a transparent or non-transparent part of a png on a web page?

    How can I use an inline style to add a shadow around the used portion of my page?

    How to center a paragraph of text on a particular word in HTML, CSS, or JavaScript?

    How do you style TextFlow with CSS Styles in Flex 4.5.1?