change div width based on content and browser width

Question

Let's say I have something like below:

<div id="outer">
    <img src="my_first_image.gif" alt="My first image" />
    <div id="inner_div">Some text here...</div> <img src="my_second_image.gif" alt="My second image" />
</div>

My inner_div contains some texts. How do I make it so that I not only display my first image, my inner div and my second image next to one another and also make sure that the total width of my outer div expand to take the full width of the browser window (with my elements still displayed one next to each other no matter how long the text in my inner div becomes). Is this possible with just straight css or am I gonna need some jQuery to do that?

NOTE : The elements must also be vertically centered with regards to each other and within the outer div

Thank you

Answer 1

Actually, for the web standard, you shouldn't place <div> next to <img> or <img> next to <div> .

The solution to your question is to wrap all contents within #outer , say each item wrapped up in a tag, then applied some CSS to them (like float: left ).
For example,

<div id="outer">
   <div class="inner"><img src=".."/></div>
   <div class="inner"><img src=".."/></div>
   <div class="inner">some very long text</div>
</div>

Which

<style type="text/css">
   .inner {
      float: left;
   }
</style>

If you also want it to vertically centered to outer, your css would be like this.

<style type="text/css">
   #outer {
      display: table;
   }
   .inner {
      display: table-cell;
      vertical-align: middle;
   }
</style>

There are more approach to this, but I think this is the easiest one.

Hope this helps.

Answer 2

I think this is what you want, if I understand you correctly?

<style>
#outer #inner_div{float:left;}
#outer img{clear:left;}

</style>

Answer 3

Try this

CSS

#outer{
  width:100%;
}
#outer div, #outer img{
  width:33%;
  display:inline-block;
  vertical-align:middle;
  text-align:center;
}

HTML

<div id="outer">
  <img src="my_first_image.gif" alt="My first image" />
  <div id="inner_div">Some text here...</div>
  <img src="my_second_image.gif" alt="My second image" />
</div>

Need some cross-old-browser work for inline-block , but you get the idea.

Presto http://jsfiddle.net/EPpAn/

Answer 4

I expect this is what you want: http://jsfiddle.net/linmic/CCut8/

Cheers