I have simple HTML document with 3 div's. The first 2 divs needs to float to left and the 3 div needs to float to the right. I am keeping the styles inline just for demonstration purposes.
I am trying to get the second div element to float to the left but it keeps floating to the right. This is the div element I am trying to have to float to the left
<div style="width: 200px; float: left">Left Div #2</div>
Can anyone please help me correct this? Thank you!!!
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="width: 70%; float: left; clear: left">Left Div</div>
<div style="width: 200px; float: left">Left Div #2</div>
<div style="width: 30%; float: right; clear: right">Test</div>
</body>
</html>
The maximum width is 100% so you have 3 divs, 2 of them in percentage (70+30) which is equal to 100%, plus the 3rd div(Left Div #2) that you want to be floated left which has 200px.
So 100%-70-30=0 and 0-200px = -200px.
You have to fix either the width:70% or width 30% in order to match 100% (with 200px)
For example change your width:70% to width:50% and it works.
You always can try display them in inline-block
Updated answer based on the OP comment
you can't have 3 divs with the total more than 100% and what them to appear inline, as you did in your comment: 70%+70%+30% = 140% > 100%.
this code is working:
div {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
padding:10px;
display:inline-block;
vertical-align:top;
width:30%
}
.r1 {float:right} /*just because you said you want your 3rddiv floated right */
<div class="l1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sed nunc eu sem bibendum maximus. Quisque ante mi, porta at egestas sit amet, tempor vel ante. Aenean libero risus, mollis id efficitur sed, fermentum in lacus. Quisque ultricies eleifend leo, at convallis dui auctor eu. Vestibulum eu odio varius, sagittis lectus sit amet, varius elit. Aenean tincidunt vel eros in rhoncus. Curabitur sed est lorem. Nam sed lorem vestibulum, sagittis ex nec, euismod ipsum. Donec at eros mollis, pulvinar ex at, porttitor arcu. Integer posuere lectus sit amet nisl volutpat, pharetra commodo risus congue. Aenean tincidunt elit nec pulvinar vestibulum. Suspendisse potenti. Suspendisse volutpat magna nec nisl lacinia accumsan. Donec a auctor ante.
</div>
<div class="l2">Aliquam iaculis id sapien at hendrerit. Phasellus tempus euismod felis et interdum. Mauris vehicula felis sed nisl auctor lacinia. Mauris posuere orci at porttitor viverra. Mauris eget bibendum purus. Cras tristique dignissim ex. Phasellus eu ipsum finibus neque lacinia laoreet et non neque.</div>
<div class="r1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sed nunc eu sem bibendum maximus. Quisque ante mi, porta at egestas sit amet, tempor vel ante. Aenean libero risus, mollis id efficitur sed, fermentum in lacus. Quisque ultricies eleifend leo, at convallis dui auctor eu. Vestibulum eu odio varius, sagittis lectus sit amet, varius elit. Aenean tincidunt vel eros in rhoncus. Curabitur sed est lorem. Nam sed lorem vestibulum, sagittis ex nec, euismod ipsum. Donec at eros mollis, pulvinar ex at, porttitor arcu. Integer posuere lectus sit amet nisl volutpat, pharetra commodo risus congue. Aenean tincidunt elit nec pulvinar vestibulum. Suspendisse potenti. Suspendisse volutpat magna nec nisl lacinia accumsan. Donec a auctor ante.</div>
The box-sizing properties were added only to add the padding property without changing the width of the divs, so it is for demonstrations purposes only.
See more info here about box-sizing
See more info here about display and inline-block
Change the width:70% to match value.(In my case, width:30%)
This is a jsfiddle.
The reason why is width:70% has too much width to push other divs.
Related
I am experimenting with CSS's shape-outside property using an image, but at least in Safari, the resulting shape is always based on the original image size and I don't see any way of actually scaling the image based on the box size, which would be necessary for a truly responsive design (not to mention making life easier for initial testing purposes).
For example, in this CSS snippet:
#shapetest {
float: left;
width: 100px;
height: 300px;
background: url('some-image.png');
shape-outside: url('some-image.png');
background-size: contain;
}
while the background is scaled to cover the div, the shape is still at the original size of some-image.png, which isn't unexpected. However, I'd really like to be able to scale the shape to fit within the box, without having to generate multiple renditions of the shape.
Am I missing some sort of scaling function for shape-outside? The resources I can find on this indicate that the scaling factor for a shape-outside image isn't actually specified just yet, making this somewhat less useful for designs where the object might scale based on a viewport-relative size, for example.
EDIT: In particular I want to be able to specify the height of the image (and have the width respond accordingly). The initial answer on this question worked well with a specified width, but the following attempt at reproducing this doesn't work, as the specified height of the div flows the text downward, and setting the div to float:left causes its own box to supercede the shape in the flow:
div.inset {
height: 1.5in;
}
div.inset img {
float: left;
width: auto;
height: 100%;
shape-outside: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png');
}
<div class="inset"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rutrum ornare fermentum. Praesent at leo volutpat, tempus eros vel, tempus diam. Morbi in viverra tortor. Etiam lobortis cursus elementum. Mauris eget lectus eget dolor posuere varius vitae a mi. Praesent nec commodo tellus. Nam facilisis tincidunt risus ac consequat. Nam arcu tellus, aliquam sodales metus vel, mollis porta purus. Suspendisse sagittis hendrerit dolor, sit amet accumsan libero cursus sit amet. Duis non fringilla ante. Vestibulum vestibulum scelerisque leo, sit amet elementum mauris. Donec eget dui mollis, venenatis dui non, viverra urna. Nam molestie, felis ut mollis ultricies, erat turpis ullamcorper sem, nec eleifend quam ex ac eros. Praesent sodales ligula quis dui maximus fermentum. Suspendisse tempor luctus elit.
Doing it with a specified width and computed height works fine, however:
div.inset {
width: 1.5in;
}
div.inset img {
float: left;
width: 100%;
height: auto;
shape-outside: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png');
}
<div class="inset"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rutrum ornare fermentum. Praesent at leo volutpat, tempus eros vel, tempus diam. Morbi in viverra tortor. Etiam lobortis cursus elementum. Mauris eget lectus eget dolor posuere varius vitae a mi. Praesent nec commodo tellus. Nam facilisis tincidunt risus ac consequat. Nam arcu tellus, aliquam sodales metus vel, mollis porta purus. Suspendisse sagittis hendrerit dolor, sit amet accumsan libero cursus sit amet. Duis non fringilla ante. Vestibulum vestibulum scelerisque leo, sit amet elementum mauris. Donec eget dui mollis, venenatis dui non, viverra urna. Nam molestie, felis ut mollis ultricies, erat turpis ullamcorper sem, nec eleifend quam ex ac eros. Praesent sodales ligula quis dui maximus fermentum. Suspendisse tempor luctus elit.
The specs say the following:
The shape is computed to be the path or paths that enclose the area(s) where the opacity of the specified image is greater than the shape-image-threshold value. [...]
The image is sized and positioned as if it were a replaced element whose specified width and height are the same as the element’s used content box size.
So using the background-size property doesn't change anything to the element's content box size. Using the actual image element instead should make the computed shape respond to the current content box size of the image. You can now simply set a relative unit like % for the width of the image element to achieve responsiveness.
Here is a working example. You can change the width of the container and the width of the image as well as its shape should respond to the changing container width:
.shape {
float: left;
width: 100%;
shape-outside: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png);
}
.container {
width: 40%;
}
<div class="container">
<img class="shape" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png" />
</div>
This approach relies on a width-only div not having a height of its own, however. But this solution also works:
img.inset {
float: left;
width: auto;
height: 1.5in;
shape-outside: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png');
}
<img class="inset" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rutrum ornare fermentum. Praesent at leo volutpat, tempus eros vel, tempus diam. Morbi in viverra tortor. Etiam lobortis cursus elementum. Mauris eget lectus eget dolor posuere varius vitae a mi. Praesent nec commodo tellus. Nam facilisis tincidunt risus ac consequat. Nam arcu tellus, aliquam sodales metus vel, mollis porta purus. Suspendisse sagittis hendrerit dolor, sit amet accumsan libero cursus sit amet. Duis non fringilla ante. Vestibulum vestibulum scelerisque leo, sit amet elementum mauris. Donec eget dui mollis, venenatis dui non, viverra urna. Nam molestie, felis ut mollis ultricies, erat turpis ullamcorper sem, nec eleifend quam ex ac eros. Praesent sodales ligula quis dui maximus fermentum. Suspendisse tempor luctus elit.
I would like to... well look at the SO answer box. That is behavior what I'm looking for - scrollbar appears on text overflow but user can resize it manually.
My question is, is it possible to do such thing natively with CSS?
With my current setup, initially div is small (less then max-height) and I can resize it but only between current text height and max-height. When more text is inserted and scrollbar appear then I can't change it's size at all.
CSS
element.style {
resize: vertical;
max-height: 200px;
overflow: auto;
padding: 10px;
}
To be more precise I want following to happen:
If height of text is smaller then defined max-height then element sets it's size to minimal value needed for text to be completely visible (without scrollbar). - works
If height of text exceeds defined max-height then element will take max-height and scrollbar will appear. - works
If user don't wont to see scrollbar or simply want to see more text at once, he can resize the element to any desired height and max-height will take that new height as it's value. - don't work, user can't resize over max-height.
It would probably be faster to write JS than writing this question but I would like this have such behavior for static html pages.
Is this the styling you are looking for?
For example:
#element {
resize: vertical;
height: auto;
min-height:200px;
resize: vertical;
overflow: auto;
padding: 10px;
width: 95%;
border:1px solid;
}
<textarea id="element">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt, turpis eu aliquam aliquet, justo mi lobortis nibh, dictum sodales nunc quam non ipsum. Ut condimentum dui vel consectetur faucibus. Duis eu purus et massa ultricies blandit vel non felis. Morbi ut metus interdum, blandit mauris ac, vestibulum lorem. Etiam aliquam tincidunt magna, et ullamcorper enim pulvinar et. Aenean et auctor turpis, sed posuere eros. Integer magna lacus, accumsan sit amet hendrerit a, sagittis sed ipsum. Fusce leo neque, sollicitudin vel lectus eget, maximus cursus felis. Pellentesque rutrum volutpat enim, quis semper diam semper ac. Mauris ultrices molestie maximus. Vivamus feugiat posuere ultrices. Quisque blandit, lacus sed tempor ullamcorper, nunc ligula iaculis felis, ut eleifend mauris lacus a tortor. Fusce at cursus orci, at posuere nisi. In vel suscipit eros, eget cursus lacus.
Aenean ut neque sit amet orci gravida volutpat. Etiam vehicula nec augue ut vulputate. Integer fermentum est id leo mollis, quis accumsan quam commodo. Vivamus varius nibh turpis, ac tincidunt dolor consectetur non. Aliquam aliquam scelerisque orci sit amet posuere. Vivamus blandit quis ante vitae consectetur. Aliquam semper eros eu odio porttitor sollicitudin. Donec id mollis arcu. Etiam tortor est, dignissim sagittis lorem non, auctor commodo velit. Nulla facilisi. Morbi ultrices eleifend urna sit amet suscipit. Maecenas augue ante, lobortis at justo sit amet, malesuada faucibus justo. Nulla sit amet lorem in felis convallis feugiat ac fringilla urna. Vivamus finibus aliquam auctor. Fusce ante tortor, tempor id elit eget, sodales ultrices quam.
</textarea>
This question already has answers here:
CSS - How to align image left bottom to the text block?
(5 answers)
Closed 6 years ago.
Given the below HTML:
<div>
lorem ipsum...
<img style="float:left;margin-top:-100px" />
</div>
I would expect to get something like this:
But what I actually end up getting is this:
.Block {
width: 300px;
margin: auto;
}
.Image {
width: 150px;
float: left;
margin-top: -100px;
}
<div class="Block">
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur.
<br><br>
Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Vestibulum id ligula porta felis euismod semper.
<img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" class="Image" />
</div>
Here is a pen showing how the code behaves. Is something like this possible? Why does margin-bottom result in behaviour that I would expect but margin-top does not?
There are few ways through which you can align img tag and add some more tags for text and get result as your first img as you have asked in your question.
Solution 1 :- We have added 2 <p> tags. And then added margin-left to 2nd <p> tag using nth-child() selector, which is equal to the width of image+10px . And negative value too is added to bring img tag to top and replace 2nd <p> tag.
.box{
width:300px;
margin:auto;
position:relative;
}
.box > p:nth-child(2){
margin-left:110px;
}
.image{
width:100px;
margin-top:-140px;
float:left;
}
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum hendrerit metus. Vestibulum dignissim cursus ex, eget aliquam leo. Sed at nunc ut orci feugiat vehicula. Integer arcu tellus, bibendum eget ante id, accumsan euismod leo. Nunc volutpat augue id odio fermentum, ut feugiat magna vestibulum. Pellentesque quam ante, tincidunt quis egestas quis, consectetur ut tellus.</p>
<p>
Mauris rutrum odio massa. Donec non molestie ipsum, ac pharetra justo. Phasellus sed orci mollis, lacinia nibh id, scelerisque urna. Praesent nunc elit, feugiat sed quam ut, blandit dignissim est.
</p>
<img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" class="image" />
</div>
Solution 2:- We have added 2 <p> tags. But this time no negative margin is added to img tag or .image just float left, and even no margin-left value to 2nd <p> tag. Well that's because we used float:left for .image and float:right for 2nd <p> tag so by default they both get aligned.
.box{
width:300px;
margin:auto;
position:relative;
}
.box > p:nth-child(2){
float:right;
width:180px;
margin:0px;
}
.image{
width:100px;
float:left;
}
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum hendrerit metus. Vestibulum dignissim cursus ex, eget aliquam leo. Sed at nunc ut orci feugiat vehicula. Integer arcu tellus, bibendum eget ante id, accumsan euismod leo. Nunc volutpat augue id odio fermentum, ut feugiat magna vestibulum. Pellentesque quam ante, tincidunt quis egestas quis, consectetur ut tellus.</p>
<p>
Mauris rutrum odio massa. Donec non molestie ipsum, ac pharetra justo. Phasellus sed orci mollis, lacinia nibh id, scelerisque urna. Praesent nunc elit, feugiat sed quam ut, blandit dignissim est.
</p>
<img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" class="image" />
</div>
Solution 3:- No need of adding any <p> tag or other tags to style your text, but it's good practice if you add some default assigned tags to your text.
Just make changes in you HTML codes i.e. add your <img> in-between you text and then it works fine.
.box{
width:300px;
margin:auto;
position:relative;
}
.image{
width:100px;
float:left;
padding:10px 10px 0px 0px;
}
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum hendrerit metus. Vestibulum dignissim cursus ex, eget aliquam leo. Sed at nunc ut orci feugiat vehicula. Integer arcu tellus, bibendum eget ante id, accumsan euismod leo. Nunc volutpat augue id odio fermentum, ut feugiat magna vestibulum. Pellentesque quam ante, tincidunt quis egestas quis, consectetur ut tellus.
<img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" class="image" />
Mauris rutrum odio massa. Donec non molestie ipsum, ac pharetra justo. Phasellus sed orci mollis, lacinia nibh id, scelerisque urna. Praesent nunc elit, feugiat sed quam ut, blandit dignissim est.
</div>
margin-top (positive value) - When we assign margin-top positive value to an element it pushes that element from top and if it has some element below it than that too move bit down.
margin-top (negative value) - But When we assign margin-top negative value to an element, so at that point we are making that element to get into a field of an another element which itself has some properties already assigned i.e. pulling or forcing the below to the top.
This is what the issue in your question too, either you make changes in you HTML code i.e. <img> in-between text or add <p> tag and work.
.Block {
width: 300px;
margin: auto;
}
.Image {
width: 100px;
height:100px;
float:left;
margin-right: 1em;
}
<div class="Block">
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur.
<br><br>
Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum.<img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" class="Image" /> Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Vestibulum id ligula porta felis euismod semper.
</div>
In html \ css, I've got a div element that can appear at different y positions of a page (conditional to the populated html above it). Problem occurs when content of the div rendered is too tall. In that case I'd like the div to expand to at most the page's height (e.g. based on screen resolution) and add a scrollbar to match its content.
Is there any pure html \ css solution for this, without using js?
Attached is an example of the div structure. Notice that I'd like to have a scroll inside the big blue div, without tying to a specific height, as I do not know in advance what are the given sizes (they're dynamic).
http://jsbin.com/jaboxoneju/edit?html,output
Here is a flexbox layout that causes the second div to scroll when its height would exceed the height of the window.
Live Demo:
html, body {
margin: 0;
padding: 0;
}
html, body, #container {
width: 100%;
height: 100%;
}
#container {
display: flex;
flex-direction: column;
}
#upper {
background-color: red;
}
#scrolling {
background-color: blue;
flex-grow: 1;
overflow: auto;
}
<div id="container">
<div id="upper"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultricies nisl lacus, sit amet viverra magna scelerisque a. Morbi rutrum quam a tellus fermentum, vel ultricies ligula dignissim. Nam bibendum nisi in metus bibendum, sit amet tristique massa molestie.</p></div>
<div id="scrolling"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultricies nisl lacus, sit amet viverra magna scelerisque a. Morbi rutrum quam a tellus fermentum, vel ultricies ligula dignissim. Nam bibendum nisi in metus bibendum, sit amet tristique massa molestie. Quisque pretium arcu non magna pretium, nec fringilla augue pretium. Etiam a tellus ipsum. Curabitur ultrices vel nibh sit amet feugiat. Etiam consequat id ligula eget suscipit. Vestibulum sagittis tincidunt quam porta eleifend. Suspendisse interdum metus et tellus maximus dapibus. Phasellus vel bibendum leo, eu faucibus nisi. Sed vestibulum interdum arcu, et sodales diam cursus vel. Aliquam tristique lorem posuere tortor aliquet, sit amet pharetra lectus tristique. Maecenas consectetur laoreet tellus. Proin interdum tincidunt ex non commodo. Morbi non tristique orci, vel porta ligula. Duis sollicitudin in elit eu laoreet.</p>
<p>Sed volutpat vel tortor id placerat. In nisl odio, ornare at enim sit amet, mollis ultricies libero. Mauris et auctor lorem, in maximus felis. Fusce elementum nisi odio, sed venenatis enim convallis euismod. Sed sed pharetra ligula. Donec venenatis imperdiet turpis, vitae vehicula leo luctus a. Cras ultrices rutrum aliquet. Proin scelerisque nisl vitae posuere consectetur. Sed viverra rutrum nulla ut accumsan. Curabitur posuere consectetur nulla nec cursus. Donec id massa odio.</p></div>
</div>
JSFiddle Version: https://jsfiddle.net/9gtLughL/
<div style="overflow:Auto;">
<h2>my code</h2>
</div>
use this code at the start of the div
You can do this using a table structure.
HTML:
<div class="container table">
<div class="table-row">
Top Content
</div>
<div class="table-row height-100">
<div class="table-cell">
<div class="height-100">
<div class="scroll">
Bottom scrollable content with 100% remaining height
</div>
</div>
</div>
</div>
</div>
CSS:
.table { display:table; }
.table-row { display:table-row; width:100%; }
.table-cell {display:table-cell; height:0; overflow:hidden; }
.container { height:100vh; }
.height-100 { height:100%; }
.scroll { overflow:auto; height:100%; }
The 100vh attributes makes the body tag to have 100% of view height(screen height).
In a table structure, the div with class table-row will get height as much as needed by children, but if it also has height-100 will get 100% of what the other rows do not occupy. Inside it I did a few ugly twitches to get the overflow running on a dynamic height table-cell,
Demo: http://jsfiddle.net/alexix/70vf92e3/2/
I have a content container that is 500px wide and floated to the right. This container contains text and then an image and then some more text. Ultimately I would like to pull this image out of the bounding 500px container and have it span the full width of the page, which for argument sake is 1000px wide. In effect the images will be full-width (1000px wide) while the content container is only 500px wide. What is the best way to do something like this so that the image can be at full width?
jsfiddle.net/QCb3R/
I would like to pull the image to extend fully outside of the .content div.
<div class="container">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id dapibus mauris. Curabitur lectus metus, tincidunt sit amet varius et, euismod et neque. Sed a odio odio. Morbi placerat condimentum fermentum. Nam eleifend congue malesuada. Vivamus vel lorem eu leo blandit placerat. Nunc turpis justo, iaculis vestibulum interdum sit amet, luctus nec dui. Duis ultrices eleifend sem eget mattis. Quisque at purus nisi. Duis porta porttitor nisi nec ornare. Nam eu dolor urna, a suscipit libero. Morbi risus dui, egestas eget consectetur quis, malesuada vitae orci. Maecenas pulvinar malesuada elit eget sagittis. Curabitur congue, mauris quis pretium ultricies, augue nisl dapibus libero, eu lacinia sem nunc commodo purus. Quisque tellus purus, sodales a consequat in, adipiscing in odio. Donec non felis at felis sodales varius vitae non lorem.</p>
<img src="http://lorempixel.com/500/300/" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id dapibus mauris. Curabitur lectus metus, tincidunt sit amet varius et, euismod et neque. Sed a odio odio. Morbi placerat condimentum fermentum. Nam eleifend congue malesuada. Vivamus vel lorem eu leo blandit placerat. Nunc turpis justo, iaculis vestibulum interdum sit amet, luctus nec dui. Duis ultrices eleifend sem eget mattis. Quisque at purus nisi. Duis porta porttitor nisi nec ornare. Nam eu dolor urna, a suscipit libero. Morbi risus dui, egestas eget consectetur quis, malesuada vitae orci. Maecenas pulvinar malesuada elit eget sagittis. Curabitur congue, mauris quis pretium ultricies, augue nisl dapibus libero, eu lacinia sem nunc commodo purus. Quisque tellus purus, sodales a consequat in, adipiscing in odio. Donec non felis at felis sodales varius vitae non lorem.</p>
</div>
</div>
And the CSS:
.container {
width: 1000px;
background-color: #eee;
}
.content {
width: 500px;
float: right;
}
It is quite easy to create that effect, but not by setting the image to be absolutely positioned.
Here's a jsFiddle
.container {
width: 1000px;
background-color: #eee;
}
p {
width: 500px;
float: right;
}
.content {
width: 1000px;
float: right;
}
The problem with setting the image to be absolutely positioned is exactly because it takes the image out of the normal document flow. You would have to fill up the gap left by the original image with a place holder element of the same height, and then position the absolutely positioned image over the top of the place holder element. That sounds like a job for JavaScript as it would require access to the DOM to retrieve the position of elements on the page, that can't be done with CSS and HTML only.