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

Are you doing this just for web browser? or mobile?

Rayshawn
– Rayshawn

2012-05-25 01:57:30 +00:00
Commented May 25, 2012 at 1:57 — Rayshawn
– Rayshawn, Commented May 25, 2012 at 1:57

Karun S. · Accepted Answer · 2012-05-25 02:43:12Z

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.

edited May 25, 2012 at 2:43

answered May 25, 2012 at 1:46

Karun S.

661 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user765368 Over a year ago

I want the elements to also be vertically centered to each other. The vertical-align property doesn't seem to work if I use float on the elements

Karun S. Over a year ago

You can try to change display type to table on #outer and display type to table-cell on #inner, then you can set vertical position to middle.

Karun S. Over a year ago

I've edited my answer, please kindly read it again. and hope it helps :-)

Rayshawn · Accepted Answer · 2012-05-25 01:59:28Z

0

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

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

</style>

edited May 25, 2012 at 1:59

answered May 25, 2012 at 1:53

Rayshawn

2,6274 gold badges30 silver badges46 bronze badges

Comments

DACrosby · Accepted Answer · 2012-05-25 04:55:09Z

0

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/

answered May 25, 2012 at 4:55

DACrosby

11.5k3 gold badges42 silver badges52 bronze badges

Comments

Linmic · Accepted Answer · 2012-05-25 06:52:12Z

0

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

Cheers

answered May 25, 2012 at 6:52

Linmic

8015 silver badges12 bronze badges

Collectives™ on Stack Overflow

change div width based on content and browser width

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related