I have got text beside an image, but i am having difficulty with margin-left, Because it is not pushing the text 25px away from the images.
.standards img {
float: left;
margin-top: 50px;
width: 400px;
height: 350px;
margin-left: 50px;
}
.standard-main p {
margin-top: 50px;
margin-left: 50px;
margin-right: 50px;
}
<div class="standards">
<img src="https://placekitten.com/100/100" alt="">
</div>
<div class="standard-main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis
imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>
</div>
Screenshot
Any help would be appreciated and thanks in advance
Well, float and margins have a complicated relationship.
What you could do is give the p a margin-left of 475px (the width of the picture and its margins, plus the 25px desired gap). But then the text in the p won't flow around the image any more. So in this case, the easiest solution is to give the img a right margin of 25px.
.standards img {
float: left;
margin-top: 50px;
width: 400px;
height: 350px;
margin-left: 50px;
margin-right:25px;
}
.standard-main p {
margin-top: 50px;
margin-left: 50px;
margin-right: 50px;
}
<div class="standards">
<img src="https://placehold.it/400x350" alt="">
</div>
<div class="standard-main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis
imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>
Related
I am using a 1400px header (the size of the width of my image). Because of my header my following text is not displayed instead of my page
body {
background-color: blue;
}
.infos {
display: flex;
justify-content: center;
color: white;
}
header {
width: 1400px;
height: 787px;
background-color: black;
}
<link href="https://unpkg.com/tailwindcss#%5E1.0/dist/base.min.css" rel="stylesheet" />
<header></header>
<div class="infos">
<p>soremm ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi mauris, lobortis eu rutrum in, tempor ac turpis. Donec hendrerit finibus leo vel iaculis. Suspendisse pretium sapien justo, at pulvinar elit egestas eu. Sed accumsan, lacus ac pharetra
iaculis, lorem nisl eleifend tellus, varius feugiat mauris leo sit amet nibh. Cras consectetur dictum ligula et interdum. Nulla facilisi. Sed eget erat a neque varius feugiat. Vivamus fermentum dapibus leo non convallis. Donec non purus quam. Etiam
ut turpis libero. Morbi ex orci, consequat pulvinar urna ac, blandit ultrices mi</p>
</div>
I tried flex, text align. Nothing to do I can not center my text in the middle of my page
Is this what you had in mind?
body {
background-color: blue;
}
.infos {
display: flex;
justify-content: center;
color: white;
width:1400px;
margin:0 auto;
}
header {
width: 1400px;
height: 787px;
background-color: black;
margin:0 auto;
}
<link href="https://unpkg.com/tailwindcss#%5E1.0/dist/base.min.css" rel="stylesheet" />
<header></header>
<div class="infos">
<p>soremm ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi mauris, lobortis eu rutrum in, tempor ac turpis. Donec hendrerit finibus leo vel iaculis. Suspendisse pretium sapien justo, at pulvinar elit egestas eu. Sed accumsan, lacus ac pharetra
iaculis, lorem nisl eleifend tellus, varius feugiat mauris leo sit amet nibh. Cras consectetur dictum ligula et interdum. Nulla facilisi. Sed eget erat a neque varius feugiat. Vivamus fermentum dapibus leo non convallis. Donec non purus quam. Etiam
ut turpis libero. Morbi ex orci, consequat pulvinar urna ac, blandit ultrices mi</p>
</div>
justify-content only has an effect if there's space left over after your flex items have flexed to absorb the free space. It doesn't align the text itself.
Change justify-content:center; to text-align:center;
For more info check out this answer
If you want to center every line of text to the center of parent element use
text-align: center
body {
background-color: blue;
}
header {
width: 1400px;
height: 787px;
background-color: black;
}
.infos {
text-align: center;
}
<link href="https://unpkg.com/tailwindcss#%5E1.0/dist/base.min.css" rel="stylesheet" />
<header></header>
<div class="infos">
<p>soremm ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi mauris, lobortis eu rutrum in, tempor ac turpis. Donec hendrerit finibus leo vel iaculis. Suspendisse pretium sapien justo, at pulvinar elit egestas eu. Sed accumsan, lacus ac pharetra
iaculis, lorem nisl eleifend tellus, varius feugiat mauris leo sit amet nibh. Cras consectetur dictum ligula et interdum. Nulla facilisi. Sed eget erat a neque varius feugiat. Vivamus fermentum dapibus leo non convallis. Donec non purus quam. Etiam
ut turpis libero. Morbi ex orci, consequat pulvinar urna ac, blandit ultrices mi</p>
</div>
Simplest way to center a div use using margin: auto
body {
background-color: blue;
}
header {
width: 1400px;
height: 787px;
background-color: black;
}
.infos {
width: 50%;
margin: auto;
}
<link href="https://unpkg.com/tailwindcss#%5E1.0/dist/base.min.css" rel="stylesheet" />
<header></header>
<div class="infos">
<p>soremm ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi mauris, lobortis eu rutrum in, tempor ac turpis. Donec hendrerit finibus leo vel iaculis. Suspendisse pretium sapien justo, at pulvinar elit egestas eu. Sed accumsan, lacus ac pharetra
iaculis, lorem nisl eleifend tellus, varius feugiat mauris leo sit amet nibh. Cras consectetur dictum ligula et interdum. Nulla facilisi. Sed eget erat a neque varius feugiat. Vivamus fermentum dapibus leo non convallis. Donec non purus quam. Etiam
ut turpis libero. Morbi ex orci, consequat pulvinar urna ac, blandit ultrices mi</p>
</div>
I have 3 div, 2 are floating left and the other floating right. However it is not aligning in the way I want.
.numb1, .numb2 {
float: left;
width: 60%;
display: inline-block;
}
.numb3, .numb4 {
float: right;
width: 35%;
display: inline-block;
}
Here is a snippet so you have an idea of what problem; https://jsfiddle.net/rnty32gt/
I want the class numb3 to be aligned with numb1. I tried to use inlineblock but it is not working. Sorry for my English.
Make this way using this css and html
.numb2 ,.numb3 {
padding: 0;
text-align: left;
border: 1px solid #c4c4c4;
margin: 5px 0;
background: linear-gradient(180deg,#fff 0,#e6e6e6);
}
.numb1 {
float: left;
width: 60%;
}
.numb3 {
float: right;
width: 35%;
}
<!DOCTYPE html>
<html>
<body>
<h1>The float Property</h1>
<div class="numb1">
<div class="numb2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.
</div><div class="numb2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.
</div></div><div class="numb3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</div>
</body>
</html>
This is how you could do it to have it fixed as you wish. But you could also use flex-box. Here is some info about flex-box: https://www.w3schools.com/css/css3_flexbox.asp
div {
padding: 0;
text-align: left;
border: 1px solid #c4c4c4;
margin: 5px 0;
background: linear-gradient(180deg,#fff 0,#e6e6e6);
}
.numb1, .numb2 {
float: left;
width: 60%;
}
.numb3 {
float: right;
width: 35%;
}
<h1>The float Property</h1>
<div class="numb1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.
</div>
<div class="numb3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</div>
<div class="numb2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.
</div>
So as you can see i have changed the order of div2 and div3 in your HTML.
There you go.
div {
padding: 0;
text-align: left;
border: 1px solid #c4c4c4;
margin: 5px 0;
background: linear-gradient(180deg,#fff 0,#e6e6e6);
}
.wrap-l
{
margin:0px;
float: left;
width: 60%;
border:none;
}
.numb1, .numb2 {
}
.numb3 {
float: right;
width: 35%;
}
<div class="wrap-l">
<div class="numb1">
Text 1
</div>
<div class="numb2">
Text 2
</div>
</div>
<div class="numb3">
Text 3
</div>
give width: 30%; for numb1 and numb 2
If you want to use floats, just put the .numb3 above the other divs in your markup : https://jsfiddle.net/5vbvjwcs/
Otherwise you can use flex :
section {
display: flex;
}
.leftColumn {
width: 60%;
}
.content {
padding: 10px;
background-color: #eaeaea;
margin: 10px;
flex: 1;
}
<section>
<div class="leftColumn">
<div class="content">
Numb1
</div>
<div class="content">
Numb2
</div>
</div>
<div class="content">
Numb3
</div>
</section>
Doe,
If you want div.numb3 align with div.numb1 you should change the order like this:
div {
padding: 0;
text-align: left;
border: 1px solid #c4c4c4;
margin: 5px 0;
background: linear-gradient(180deg,#fff 0,#e6e6e6);
}
.numb1, .numb2 {
float: left;
width: 60%;
}
.numb3 {
float: right;
width: 35%;
}
<!DOCTYPE html>
<html>
<body>
<h1>The float Property</h1>
<div class="numb1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.
</div>
<div class="numb3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</div>
<div class="numb2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.
</div>
</body>
</html>
I am a beginner and I trying to style a webpage with css.
I am now using a Wordpress template (activello).
I would like the text in the page to have more margin than the image (see picture) but when I am editing the css with this code
p {
margin: 30px;
}
both the text and the image are affected...
What shall I write?
Here the code:
<div class="entry-content">
<p><img src="http://localhost/wp/wp-content/uploads/2017/09/banner-1.png" alt="" width="2880" height="672"></p>
<p style="text-align: justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada iaculis nisi id consectetur. Suspendisse quis elementum mi, ac luctus libero. Nunc sapien eros, tempor in mattis in, pulvinar eget enim. Aliquam id molestie risus. Donec ligula orci, pulvinar sed turpis non, porta suscipit eros. Phasellus condimentum tincidunt scelerisque. Integer tempus risus in massa venenatis, a rhoncus urna fringilla.</p>
<p>Nam vulputate rutrum neque. Phasellus ultrices imperdiet imperdiet. Aenean viverra ipsum ligula, in mattis risus ultrices in. Nam vel nunc congue, fringilla nisl in, hendrerit magna. Donec et luctus nisi, non dapibus dolor. Sed euismod tempor odio, ut pharetra mi vehicula.</p>
</div>
You can apply a negative margin to the image to counteract the p margin:
p {
margin: 30px;
}
p.entry-content > img {
margin-left: -30px;
margin-right: -30px;
display: block;
}
I have the following html/css:
#wrapper {
width: 400px;
background-color: red;
}
#text {
margin-right: 50px;
}
#subcontent {
float: right;
width: 50px;
}
<div id="wrapper">
<div id="subcontent">
<img src="http://lorempicsum.com/futurama/50/50/1" width="50">
</div>
<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis leo sapien. Nunc convallis elit purus, non fringilla quam lobortis at. Integer pharetra auctor luctus. In congue dolor a pretium facilisis. Donec et risus lacinia augue pellentesque mollis
eget a urna. Sed dapibus est enim, id iaculis arcu ultrices sit amet. Donec quis dolor risus. Suspendisse a nunc a enim mattis finibus eget vitae diam. Phasellus dictum commodo metus, ut rutrum dolor pretium a. Aliquam at sem vel tortor mollis tristique.
Proin neque dolor, pellentesque ut euismod id, finibus sed lacus. Mauris varius tempor diam, at varius risus. Etiam dictum metus et augue bibendum commodo. Vestibulum imperdiet elit vitae bibendum finibus. Maecenas mollis dui ex, id suscipit mauris
cursus vitae. Vivamus nec faucibus elit.</div>
</div>
This is achieving the desired effect of making the text stay left and the sub content stay right, without having to specify a width for the text (for responsive behaviour). However, semantically this is incorrect as I have had to place <div id="subcontent"/> before <div id="text"/> in the html, even though the text should appear before the sub content (assuming reading rtl). I can live with this to get the job done but unfortunately when the screen size is very small I need to make <div id="text"/> full width and let the sub content flow naturally afterwards. This currently means the sub content is at the top and I need it to be at the bottom.
How can I change the css so that when the html is ordered
<div id="text"/>
<div id="subcontent"/>
the sub content will float right without being pushed down by the text?
I need to support IE9+
Float is a pain.
Try to use flex and media queries for a responsive design :
Note: since you mention rtl reading, I strongly advise you to have a look on the flex-direction property (MDN)
#wrapper {
display: flex;
width: 400px;
background-color: red;
/* this is the default behavior - you can skip it */
flex-direction: row;
}
#text {
}
#subcontent {
width: 50px;
}
#media (max-width: 400px) {
#wrapper {
flex-direction: column;
}
}
<div id="wrapper">
<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis leo sapien. Nunc convallis elit purus, non fringilla quam lobortis at. Integer pharetra auctor luctus. In congue dolor a pretium facilisis. Donec et risus lacinia augue pellentesque mollis
eget a urna. Sed dapibus est enim, id iaculis arcu ultrices sit amet. Donec quis dolor risus. Suspendisse a nunc a enim mattis finibus eget vitae diam. Phasellus dictum commodo metus, ut rutrum dolor pretium a. Aliquam at sem vel tortor mollis tristique.
Proin neque dolor, pellentesque ut euismod id, finibus sed lacus. Mauris varius tempor diam, at varius risus. Etiam dictum metus et augue bibendum commodo. Vestibulum imperdiet elit vitae bibendum finibus. Maecenas mollis dui ex, id suscipit mauris
cursus vitae. Vivamus nec faucibus elit.</div>
<div id="subcontent">
<img src="http://lorempicsum.com/futurama/50/50/1" width="50">
</div>
</div>
Something like this?
#wrapper {
width: 400px;
background-color: red;
position: relative;
}
#text {
margin-right: 50px;
}
#subcontent {
position: absolute;
top: 0;
right: 0;
width: 50px;
}
<div id="wrapper">
<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis leo sapien. Nunc convallis elit purus, non fringilla quam lobortis at. Integer pharetra auctor luctus. In congue dolor a pretium facilisis. Donec et risus lacinia augue pellentesque mollis
eget a urna. Sed dapibus est enim, id iaculis arcu ultrices sit amet. Donec quis dolor risus. Suspendisse a nunc a enim mattis finibus eget vitae diam. Phasellus dictum commodo metus, ut rutrum dolor pretium a. Aliquam at sem vel tortor mollis tristique.
Proin neque dolor, pellentesque ut euismod id, finibus sed lacus. Mauris varius tempor diam, at varius risus. Etiam dictum metus et augue bibendum commodo. Vestibulum imperdiet elit vitae bibendum finibus. Maecenas mollis dui ex, id suscipit mauris
cursus vitae. Vivamus nec faucibus elit.</div>
<div id="subcontent">
<img src="http://moviesalbum.com/wp-content/themes/sunny/timthumb.php?src=http://moviesalbum.com/wp-content/uploads/2013/05/Koala-300x225.jpg&h=120&w=120&zc=1&q=90" width="50">
</div>
</div>
Cool. If I understand your question correctly, you are trying to change the order of the HTML, yet have the output still look the same?
If this is the case, you need to give #text AND #subcontent a float:left; add a clearing div and use a calc width on your text to make sure that the image will always fit in whilst the text can be responsively sized.
Here's a fiddle: https://jsfiddle.net/hk9ntyd2/1/
And here's the code:
#wrapper {
width: 400px;
background-color: red;
}
#text {
width: calc(100% - 50px);
float: left;
}
.clear {
clear: both;
}
#subcontent {
float: left;
width: 50px;
}
<div id="wrapper">
<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis leo sapien. Nunc convallis elit purus, non fringilla quam lobortis at. Integer pharetra auctor luctus. In congue dolor a pretium facilisis. Donec et risus lacinia augue pellentesque mollis
eget a urna. Sed dapibus est enim, id iaculis arcu ultrices sit amet. Donec quis dolor risus. Suspendisse a nunc a enim mattis finibus eget vitae diam. Phasellus dictum commodo metus, ut rutrum dolor pretium a. Aliquam at sem vel tortor mollis tristique.
Proin neque dolor, pellentesque ut euismod id, finibus sed lacus. Mauris varius tempor diam, at varius risus. Etiam dictum metus et augue bibendum commodo. Vestibulum imperdiet elit vitae bibendum finibus. Maecenas mollis dui ex, id suscipit mauris
cursus vitae. Vivamus nec faucibus elit.</div>
<div id="subcontent">
<img src="http://moviesalbum.com/wp-content/themes/sunny/timthumb.php?src=http://moviesalbum.com/wp-content/uploads/2013/05/Koala-300x225.jpg&h=120&w=120&zc=1&q=90" width="50">
</div>
<div class="clear"></div>
</div>
The margin-left:50px; solution should have worked fine, I personally find that the calc solution is a little neater, but feel free to use margin instead :)
One picture worth a thousand words:
How to implement this layout? I want text to flow freely from Column-1 to Column-2.
Note that inset width is greater than column width, so it "pushes" text in Column-1 a bit. Below inset Column-1 returns to normal width.
I want compatibility with latest releases of modern browsers (Chrome, FF). No IE is OK. Safari, Mobile Safari, Opera are desirable.
JS is OK, but I'd prefer a solution without it.
Update about known dimensions:
I know width and height of whole "page".
I know width and height of image.
I know width of inset, but not its height (since there is additional caption text there).
Update:
Below is my test code. If I move inset out of columns div, it is displayed as "third column".
If inset is in front of the text, it is displayed in the left column at the top, clipped from the left side to the column width.
If inset is in end of the text, it is displayed in the right column at the bottom, clipped from the left side to the column width in Chrome, and overflowing to the left column in FF (without pushing its text).
I must be missing something... :-(
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Column test</title>
<style type="text/css">
div.columns
{
text-align: left;
-webkit-column-count: 2;
-webkit-column-gap: 40px;
-moz-column-count: 2;
-moz-column-gap: 40px;
column-count: 2;
column-gap: 40px;
}
div.columns p
{
margin-top: 0px;
margin-bottom: 20px;
text-indent: 20px;
}
</style>
</head>
<body>
<div class="columns" style="width:800px">
<!-- BEGIN INSET -->
<div style="float:right; width: 500px; margin-left: 40px; margin-bottom: 40px;">
<div style="width: 500px; height: 300px; background-color: #5a5a5a;">
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc neque elit, mollis a vulputate ac, mollis vitae augue. Sed augue enim, congue ac laoreet hendrerit, ultricies a sem. Integer dignissim molestie erat quis lacinia.
</div>
<!-- END INSET -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc neque elit, mollis a vulputate ac, mollis vitae augue. Sed augue enim, congue ac laoreet hendrerit, ultricies a sem. Integer dignissim molestie erat quis lacinia. Nulla pellentesque sodales dolor, et egestas tortor ultricies et. In hac habitasse platea dictumst. Nunc semper dui sit amet sem condimentum vitae molestie arcu cursus. Morbi rhoncus posuere gravida. Sed bibendum ullamcorper lectus, id mollis nulla pulvinar hendrerit. Mauris id est nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam tempor venenatis vehicula. Nam a enim justo, nec viverra sem. Vivamus faucibus ullamcorper lobortis.
</p>
<p>
Cras nulla ante, tincidunt non accumsan nec, adipiscing eget odio. Nam gravida ligula at elit interdum lacinia. Mauris condimentum justo venenatis mauris condimentum eu fringilla augue hendrerit. Duis eget enim et erat faucibus blandit et lobortis ligula. Integer felis justo, feugiat et scelerisque non, vehicula in urna. Aliquam dignissim tristique ornare. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam volutpat ullamcorper purus, ut auctor magna consectetur at. Aliquam vitae odio in lectus lobortis fermentum. Nunc tortor quam, luctus et consequat vel, fringilla at lorem. Cras ut molestie diam. In aliquet purus sed massa sagittis id dapibus est ultricies. Mauris sed laoreet est.
</p>
<p>
In hac habitasse platea dictumst. Integer mollis dapibus tellus, at venenatis mi euismod quis. Donec quis ullamcorper nulla. Maecenas semper porttitor nibh, et porttitor ipsum convallis eget. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec est turpis, faucibus id venenatis ac, mollis ut risus. Nam tincidunt scelerisque lectus.
</p>
<p>
Donec euismod neque id est accumsan eu egestas tortor adipiscing. Curabitur tortor ante, mattis at ultrices vel, facilisis eu sapien. Nullam congue ipsum vel nisi condimentum quis condimentum turpis pretium. In aliquet imperdiet ligula, ut dictum lorem ultrices at. Quisque ac nunc arcu. Pellentesque egestas venenatis urna, in blandit purus ullamcorper at. Ut lobortis, nisi at pharetra consequat, est nibh interdum est, vitae tempor felis magna sed erat. In hac habitasse platea dictumst.
</p>
<p>
Sed ligula felis, volutpat ac pulvinar a, porta sed felis. Aenean eu turpis nec magna mollis tincidunt quis vitae massa. Praesent faucibus nisl in leo rutrum gravida. Donec aliquet interdum vestibulum. Aenean faucibus posuere ornare. Donec sed velit id sem pulvinar faucibus ut tempor tellus. Donec ante justo, egestas eget venenatis vitae, tempor et nulla. Suspendisse dapibus pellentesque nulla sit amet tempor. Curabitur auctor, sem id ullamcorper ultricies, nisl tortor rhoncus lorem, eleifend ornare tortor ante vel lectus. Nunc lectus sem, ullamcorper vitae aliquam sed, volutpat eu justo. Nam et nisl est, dictum vestibulum dolor. Cras ipsum orci, vestibulum ac convallis a, laoreet in lorem. Aliquam at adipiscing lacus. Donec quis dui sed felis sollicitudin ultricies in vel libero. Donec tincidunt felis et metus mollis at congue elit molestie.
</p>
<p>
Ut posuere lobortis est, sit amet adipiscing neque vehicula eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id fermentum felis. Aenean nunc neque, faucibus vel consectetur eget, ullamcorper ac est. Nulla sit amet metus sed erat fringilla lacinia. In at pulvinar sapien. Mauris volutpat scelerisque elit, quis lobortis orci imperdiet pretium. Ut facilisis interdum dapibus. Sed luctus dignissim blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sollicitudin ultricies tortor nec rutrum.
</p>
<p>
Quisque sed sollicitudin lacus. Quisque egestas interdum dui, eget gravida sem convallis in. Sed auctor justo et urna gravida tincidunt. Proin erat nibh, euismod et varius at, aliquam in diam. Nullam condimentum libero id libero pretium ac ullamcorper arcu luctus. Sed gravida mattis tortor sit amet accumsan. Etiam vitae consequat dolor.
</p>
</div>
</body>
</html>
How about making the image with its caption in a separate CSS layer and "pinning" it into the right position, coupled with some DIV's underneath which take care of pushing the content out from under it? Something like this:
In CSS:
#column1 {
color: white;
width: 200px;
background: #444;
height: 300px;
float: left;
margin-right: 5px;
}
#column1-spacer {
float: right;
width: 45px;
height: 170px;
}
#column2 {
color: white;
width: 200px;
height: 300px;
background: #444;
float: left;
margin-left: 5px;
}
#column2-spacer {
height: 175px;
}
#imageWrapper {
background: white;
position: absolute;
left: 170px;
width: 250px;
height: 170px;
}
#image {
margin-left: 10px;
width: 240px;
height: 125px;
background: #888;
}
#caption {
font-size: 0.85em;
margin-left: 10px;
}
And in HTML:
<div id="column1">
<div id="column1-spacer"></div>
Column 1
</div>
<div id="column2">
<div id="column2-spacer"></div>
Column 2
</div>
<div id="imageWrapper">
<div id="image">Image</div>
<div id="caption">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas vel vulputate justo.
</div>
</div>
In my Firefox, it produces this:
curtisdf has answered the issue of the image placement but as far as flowing text freely from column 1 to column 2 the easiest way would be to use CSS 3 columns. You can make CSS 3 columns work in browsers that don't support CSS 3 by adding modernizer to your site.
Modernizer: http://www.modernizr.com/
CSS 3 Columns: http://www.w3.org/TR/css3-multicol/