Allow images in a
to be wider than lines of text in the same

Question

I want to fit text in a <div> to the width of the <div>, but fit images in the same <div> to the width of the parent <div>

This diagram should make things clear:

(here's the URL if it's too small: http://dl.dropbox.com/u/2792776/screenshots/2012-01-22_1838.png)

I want lots of things too, but what have you tried so far? Where is your code? — Sparky, Jan 22 '12 at 23:45
Right now I've given images `max-width` of 100%, which prevents them from overflowing the inner `
` (but it also makes them artificially narrow!) — Tom Lehman, Jan 23 '12 at 00:30

score 10 · Answer 1 · edited May 23 '17 at 12:24

I would solve this one of two ways. Here is idea #1:

CSS

#inner {width:400px; position:relative; float:left;}

HTML:

<div id="inner">
    <img src="awesomeimage.jpg" alt="this awesome image" />
    <p>text goes here</p>
    <img src="awesomeimage.jpg" alt="this awesome image" />
</div>

SCRIPT:

<script>
var imgWidth = $(window).outerWidth();
$('#inner > img').css({
    width : imgWidth + 'px'
});
</script>

This is assuming you have jQuery loaded up, and that you are using Javascript on your site. If you want to adjust the width of the image, for padding, margins, and borders, do so in the variable.

You can have the image scale with the window, like in the example used in this JS fiddle I created for another question: http://jsfiddle.net/D544n/1/

Idea #2: With Out Javascript.

CSS

#outer {width:100%;} /* Outer becomes irrelevant */
#inner {width:100%;}
#inner img {width:100% !important}
#inner * {width:400px;} /* Set all childs to 400 */

HTML:

<div id="outer">
    <div id="inner">
        <img src="awesomeimage.jpg" alt="this awesome image" />
        <p>text goes here</p>
        <img src="awesomeimage.jpg" alt="this awesome image" />
    </div>
</div>

The selector for this was grabbed from another S.O. Question.

I don't think you are going to find a clear, simple way to do this. These are my two best ideas, and it could be solved other ways. If you are heading down this path to organize your content, you might want to re-think your strategy at accomplishing your goal.

Question on the second solution: suppose there are children of `#inner` not contained within a tag (i.e., text nodes). Will the `width: 400px` property apply to them? — Tom Lehman, Mar 10 '12 at 17:01
In solution #2 perhaps at least go for `#inner > *`, otherwise you set a width on way too many elements. — Jeroen, Mar 10 '12 at 19:09
Jeroen, from the requirements it needs to be universal, but thanks I am a fan of selecting all subelements in the manner you described. Horace, if text is not in an element, it is not technically a subelement. How you are describing this though, for best practice it is a good idea to keep everything in an element of a so called "positioning" div that is designed for page layout more than anything. Lists might not be a bad move in my opinion for subelements of #inner. Again hope this helps, are you using a CMS or what is your backend for this markup? — Brian Sweat, Mar 12 '12 at 02:20
Also, you don't really want to leave text to do it's own thing in a div that's more position based... At least throw it in a span! — Brian Sweat, Mar 13 '12 at 21:19

score 5 · Answer 2 · answered Jan 23 '12 at 01:05

5

What if you got rid of the inner div entirely but put a width of 400px on all p tags within the outer div? Then things would flow correctly and the images would be children of the outer div, so they could be limited by its width.

Of course, this could cause some problems if there are a lot of other elements that need to be contained within the 400px area, but if it's just the paragraphs and some headers then you're set.

answered Jan 23 '12 at 01:05

ellawren

947
7
16

That's a good call – unfortunately there *are* a lot of other elements that must be contained in the 400px area. I could solve this by doing a `* {width: 400px}` before I do `img {width: auto}`, but what about text that isn't contained in ANY other element at all? e.g., `
blah blah blah blah
` – Tom Lehman Jan 23 '12 at 01:08
If that's the case, couldn't you just do `
blah blah
blah blah
`? You could define your paragraph tags to not add additional margins if they bother you. – ellawren Jan 23 '12 at 01:23
I can't do that because the contents of the `
` are set by users (and they might not use paragraphs)
– Tom Lehman Jan 23 '12 at 02:26
4

Then you should sanitize user input before. If you don't there is a tremendous risk of exploitment – yunzen Mar 09 '12 at 13:19

score 5 · Answer 3 · edited May 23 '17 at 12:33

edit

I refined my approach. I was inspired by Adam Dunn's answer.
All you need to do is wrap each img with a <div class="sanitize">|</div>. Either do it on the server side (recommended) or with a little jQuery wrap call (left for the reader as a homework). Also don't allow divs only ps.

The secrets are:

Have the border/background in a separate div.border if you need any
Overwrite the max-width to inherit !important

http://jsfiddle.net/HerrSerker/PSPyZ/9/

HTML

<div class="container">
    <div class="border"></div>
    <div class="inner">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. .</p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut        <div class="sanitize">
            <img src="http://lorempixel.com/800/200/sports/2" /></div>
        </p>
        <div class="sanitize"><img src="http://lorempixel.com/800/200/sports/2" /></div>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>        
    </div>
    <br clear="left" />
</div>

CSS

.container {
    position: relative;
    width: auto;
    border: 1px solid red;
}
.container > .inner {
    border: 1px solid gold;
    width: 100%;
    min-width: 400px;
}
.container > .inner > * {
    max-width: 400px;
}
.container > .inner .sanitize {
    position: relative;
    max-width: inherit !important;
    border: 1px solid green;
    width: 100%;
}

.container > .inner .sanitize > img {      
    display: block;
    width: 100%;  
}
.container > .border {
    width: 400px;
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: 1px;
    height: 100%;
    border: 1px solid silver;
}

First answer

Why not so?
See here for an example: http://jsfiddle.net/HerrSerker/PSPyZ/

Doesn't work if you remove the
tag though. Didn't see the
tag initially so voted up. — Kaushtuv, Mar 09 '12 at 23:38
may be there is a problem with this because if you add background-color & border on .container DIV then it's make different what OP want. — sandeep, Mar 13 '12 at 11:42
this is pretty much the same answer as mine. I am starting to think that a more viable solution to this is to rethink your html/css structure. — Brian Sweat, Mar 13 '12 at 16:35

score 3 · Answer 4 · answered Mar 09 '12 at 02:10

With a little bit of js, you can do this with avoiding all the complication.

$(document).ready(function() {
    //read every images
    $("img").each(function(k,v) {
        //get the width parent's parent
        var width = $(this).parent().parent().innerWidth();
        //use it
        $(this).css('width',width);
    });
});

Demo

score 1 · Answer 5 · answered Jan 22 '12 at 23:45

1

You can use the CSS overflow property to allow the content to overflow the confines of the container. Try overflow: visible on your inner div.

answered Jan 22 '12 at 23:45

Lazarus

41,906
4
43
54

But then the image might overflow the confines of the **outer** `
` as well. How can allows the image to overflow the inner `
` but prevent it from overflowing the outer `
`?
– Tom Lehman Jan 23 '12 at 00:29

Sophie · Answer 6 · 2012-01-29T21:22:21.843

1

Expanding on Lazarus' answer:

Set overflow:visible; on your inner div. Then use Javascript to set the max-width of images to the size of your outer div, i.e. the browser viewport. Something like this, maybe?

document.body.innerdiv.img.style.maxWidth = window.innerWidth + 'px';

edited Jan 29 '12 at 21:22

answered Jan 29 '12 at 17:10

Sophie

88
4

And then re-set the max-width whenever the user resizes his browser? *There must be an easier way!!* ;) – Tom Lehman Jan 30 '12 at 16:44
I thought the goal was to ensure that images in the inner div would be able to overflow the inner div, while never overflowing the outer div? This dynamically sets the max-width of those images so that they are never wider than the outer div. Are you looking for a solution that allows the images to overflow the outer div when the viewport is smaller than the images? – Sophie Jan 30 '12 at 17:40
The outer div stretches to fill the browser window, so I'd have to re-execute this logic when the user resizes (since the outer div's width changes and therefore the images' max width should change too) – Tom Lehman Jan 30 '12 at 19:27

score 1 · Answer 7 · answered Mar 08 '12 at 13:44

#outer {position:absolute;top:0;left:1%;width:99%;}
#outer img{width:100%;position:absolute;left:0;}

The best I can thik of are the lines above but they wont wrap the text around cause absolute positioned elements are removed from the flow.

I think ellawren suggested the best solution till now : "got rid of the inner div entirely".

You say: "the contents of the DIV are set by users (and they might not use paragraphs)".

However you can run a simple REGEX pattern before stroring "the contents". The pattern will break text in divs/paragraphs where it is nedeed /before or after image tag/. Then you can style images separately.

Maybe there is some dirty css hack but hacks are never the best way to solve a problem.

score 1 · Answer 8 · answered Mar 13 '12 at 05:18

HTML

<div class="outer">
  <div class="inner"><p>Your content goes here</p>
  <img src="http://dl.dropbox.com/u/2792776/screenshots/2012-01-22_1838.png" alt="" /> 
  <p>Your content goes here</p></div>
</div>

CSS

.inner { float: left; width: 400px; overflow: visible; }
.inner img { width: 2000px; }

jQuery

var browserWidth = $(document).width();
$('div.inner img').css('width', browserWidth);

score 1 · Answer 9 · answered Mar 13 '12 at 11:38

1

May do like this with pure css.

CSS

.container{
   max-width:400px;
   border:1px solid red;
}
.container > img {
    width: 100%;
    position:absolute;
    height:200px;
}
img + p{
    margin-top:200px;
}

Check this http://jsfiddle.net/PSPyZ/5/

answered Mar 13 '12 at 11:38

sandeep

91,313
23
137
155

score 1 · Answer 10 · answered Mar 13 '12 at 18:25

Solution: Float the inner DIV left to make it not as wide as the outer DIV, then set max widths for the inner DIV and it's children.

HTML:

<div id="outer">
    <div id="inner">
        <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
        <img src="image.png" alt="image">
        <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </p>
    </div>
</div>

CSS:

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

#outer {
    width: 100%;
    height: 100%;
}

#inner {
    max-width: 100%;
    float: left;
}

#inner > * {
    max-width: 400px;
}

#inner > img {
    max-width: inherit !important;
}

DEMO: http://pastehtml.com/view/br8c4ht5n.html
(Resizing window shows OP requirements. Gray is outer DIV. Orange is inner DIV. Blue is actual IMG.)

Kaushtuv · Answer 11 · 2012-03-09T05:29:49.727

0

I am sure you have tried this but doesn't this work

Edit:

    <script type="text/javascript">
function viewport()
{
var width;
var height;
var e = window,
 a = 'inner';
if ( !( 'innerWidth' in window ) )
{
a = 'client';
e = document.documentElement || document.body;
}
 width = e[ a+'Width' ];

$('div#inner > img').attr('width', width);
}
</script>

You can read the browser width code from:http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

I just edited a bit and added the jQuery bit

    #outer
{
    width:100%;
    float:left; 
}
#inner
{
    width:400px;
    float:left; 
}

<body onload="viewport();">
<div id="outer">
  <div id="inner">
  Text
  <img scr="" />
  Text
  </div>
</div>
</body>

Example: http://projects.kausweb.com/stack

I am not sure if you wanted javascript thought

edited Mar 09 '12 at 05:29

answered Mar 08 '12 at 11:52

Kaushtuv

479
5
17

I thought the inner div should be 400px and only image should overflow that. I have put up an example of what I think it was: so what did i miss? http://projects.kausweb.com/stack/ – Kaushtuv Mar 08 '12 at 22:57
What you missed is that with inner div at 400px, he wants the image to stretch the full width of the outer div, flexing with the width of that depending on how wide the screen is, yet still be inflow inside the inner div. – ScottS Mar 08 '12 at 23:12
@ScottS Did you check the link I had posted. Doesn't it do the same thing? Thanks – Kaushtuv Mar 08 '12 at 23:23
I did check. Your image does not flex with the size of the outer div. It just remains the size it was on load. – ScottS Mar 09 '12 at 00:07

score 0 · Answer 12 · answered Mar 14 '12 at 07:03

I've used the max-width method, in the past, but had to also include a min-width to keep my images from getting too skinny.

Also, if you treat that inner div as a series of content blocks, your document will probably flow a little more intuitively, and you won't need a lot of positioning, etc.

#outer > div { width:400px; border:1px dotted gray; }
#outer > img { max-width:100%; min-width:400px }

<div id="outer">
    <div>Inner div block 1 content and whatnot. Inner div block 1 content and whatnot.<div>Nested block within div block 1 with image...<img src="http://jsfiddle.net/img/logo.png"></div></div>
    <img src="http://www.alenawooten.com/wp-content/uploads/2012/01/images1.jpg">
    <div>Inner div block 2 content and whatnot. Inner div block 2 content and whatnot.<div>Nested block within div block 2 with image...<img src="http://jsfiddle.net/img/logo.png"></div></div>
    <img src="http://www.alenawooten.com/wp-content/uploads/2012/01/images1.jpg">
</div>

Here's a jsfiddle: http://jsfiddle.net/B4gKS/ Slide the center divider to see the effect.

jchavannes · Answer 13 · 2012-03-14T18:10:12.777

I don't think you'll be able to achieve this using pure CSS. Here's an example using a little Javascript.

HTML

<div class="outer">
    <div class="inner">
        some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text
        <img src="http://tinyurl.com/7pl9cw8" />
        <p>more text more text more text more text more text more text more text more text more text more text more text more text more text more text more text more text more text more text</p>
    </div>
</div>

CSS

.outer {
    margin: 40px;
    border: 2px solid black;
    padding: 10px;
    min-width: 404px;
}
.inner {
    border: 2px solid black;
    width: 400px;
}

JS

function changeWidth() {
    var ele = document.getElementsByTagName("img");
    var width = (document.getElementsByTagName("div")[0].offsetWidth - 28) + "px";
    for(var i = 0; i < ele.length; i++) {
        ele[i].style.width = width;
    }
}
window.onload = window.onresize = changeWidth;

Allow images in a
to be wider than lines of text in the same

13 Answers13

edit

HTML

CSS

First answer

Demo

HTML

CSS

JS

DEMO

http://jsfiddle.net/XdAPU/

Allow images in a to be wider than lines of text in the same

13 Answers13

edit

HTML

CSS

First answer

Demo

HTML

CSS

JS

DEMO

http://jsfiddle.net/XdAPU/

Allow images in a
to be wider than lines of text in the same