StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I guess, what you want is, your <code>paragraph</code> to be always just below the image.</p> <p>and since you have made your img <code>position:absolute</code>, it will behave independent of it's parent div. that's why the paragraph gets rendered just after the h1 tag.</p> <p>also, fixations through setting <code>margin</code> values of a <code>position:absolute</code> element, or padding, won't help you much, as you can never tell what width and size your image can be, combined with range of resolutions(including IE). so i'am not gonna suggest you those temporary workouts:</p> <p>What best you should do in my views is, changing your layout structure: see, anyway, content-area behind your img is not going to be visible, so why not keep three separate containers? and position them relatively?</p> <p>see this markup:</p> <pre><code><div class="wrapper"> <div class='header'> <h1>Some Title</h1> </div> <div class="image"> <figure> <img src="someimage.jpg" /> </figure> </div> <div class="para"> <p id="paragraph">Some description</p> </div> </div> </code></pre> <p>and see this css:</p> <pre><code> .header { position: relative; left:10%; width:80%; height: 20%; background-color: #CCCCCC; text-align: center; } .wrapper { width: 100%; height: auto; } .image { position: relative; top:20%; width: auto; background-color: #EEEEEE; height: auto; text-align: center; } .image > figure >img { width: 1800px; height: 800px; border:1px Solid #CCCCCC; } .para { position: relative; left:10%; width:80%; height: 20%; background-color: #555555; text-align: center; } </code></pre> <p><a href="http://jsfiddle.net/manishmishra256/FkyF9/1/" rel="nofollow">fiddle</a></p> <p>benefits:</p> <ol> <li><p>this will work in all resolutions.</p></li> <li><p>your paragraph container will position itself according to the img height;</p></li> <li><p>right now, i've given a very high value for the img, all you have to do is to set height and width of the img to 100%, so that it remains original.</p></li> </ol> <p>it should work. tell me if it doesn't</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload