Need to get scroller in textarea. Current code not working.
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>jQuery asScrollable</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/asScrollable.css">
<style type="text/css">
body {
background-color: #f7f7f7;
}
.section {
padding: 20px;
}
.inner {
margin: 0 auto;
max-width: 960px;
}
.example {
overflow: hidden;
border: 1px solid #e0e0e0;
-webkit-box-shadow: 1px 1px 2px 0px rgba(200, 200, 200, 0.3);
-moz-box-shadow: 1px 1px 2px 0px rgba(200, 200, 200, 0.3);
box-shadow: 1px 1px 2px 0px rgba(200, 200, 200, 0.3);
background-color: #fefefe;
}
.box,
.simple, .special {
height: 200px;
}
</style>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div>
<div>
<section>
<h3>Vertical Scrollable</h3>
<div>
<div>
<div>
<textarea class="special" style="overflow-y: scroll !important;
border-radius: 25px;
position: relative;
height: 279px;"data-options='{"direction": "vertical", "contentSelector": ">", "containerSelector": ">"}' rows="10" cols="10">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</textarea>
</div>
</div>
</div>
</section>
<section>
<h3>Horizontal Scrollable</h3>
<div class="example box" data-options='{"direction": "horizontal", "contentSelector": ">", "containerSelector": ">"}'>
<div>
<div>
<img data-src="holder.js/1500x200/sky" width="2000" />
</div>
</div>
</div>
</section>
<section>
<h3>Both Scrollable</h3>
<div class="example box" data-options='{"direction": "both", "contentSelector": ">", "containerSelector": ">"}'>
<div>
<div>
<img data-src="holder.js/1500x400/sky" width="1500" height="400" />
</div>
</div>
</div>
</section>
<section>
<h3>Both Scrollable With No scroll</h3>
<div class="example box" data-options='{"direction": "both", "contentSelector": ">", "containerSelector": ">"}'>
<div>
<div>
<img data-src="holder.js/100%x200/lava" width="100%" height="200" />
</div>
</div>
</div>
</section>
<section>
<h3>Auto x</h3>
<div class="example box" style="overflow-x: auto; overflow-y: hidden" data-options='{"direction": "auto", "contentSelector": ">", "containerSelector": ">"}'>
<div>
<div>
<img data-src="holder.js/1200x200/vine" width="1200" height="200" />
</div>
</div>
</div>
</section>
<section>
<h3>Auto y</h3>
<div class="example box" style="overflow-y: auto; overflow-x: hidden" data-options='{"direction": "auto", "contentSelector": ">", "containerSelector": ">"}'>
<div>
<div>
<img data-src="holder.js/958x300/vine" width="958" height="300" />
</div>
</div>
</div>
</section>
<section>
<h3>Auto both</h3>
<div class="example box" style="overflow: auto" data-options='{"direction": "auto", "contentSelector": ">", "containerSelector": ">"}'>
<div>
<div>
<img data-src="holder.js/1200x300/vine" width="1200" height="300" />
</div>
</div>
</div>
</section>
<section>
<h3>Auto none</h3>
<div class="example box" data-options='{"direction": "auto", "contentSelector": ">", "containerSelector": ">"}'>
<div>
<div>
<img data-src="holder.js/958x200/lava" width="958" height="200" />
</div>
</div>
</div>
</section>
<section>
<h3>Simple Structure</h3>
<div class="simple example">
<div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam malesuada at metus eget sodales. Aenean tincidunt mi sed orci sollicitudin placerat. Nullam tempus nisl augue, sed pulvinar eros lacinia vitae. Mauris vehicula velit a nibh dapibus vehicula. Fusce dui tellus, tincidunt sit amet porttitor efficitur, aliquam ac arcu. Cras non tempor dui. Nunc a dolor sit amet dolor bibendum auctor a eu ipsum.</p>
<p>Pellentesque lobortis facilisis risus, sit amet maximus turpis venenatis vitae. Donec nec eros iaculis, congue risus at, tempus augue. Donec quis felis vel purus pretium tincidunt. Integer sodales ultricies tristique. Phasellus et risus sagittis, dictum tortor a, semper lorem. Vivamus quis ipsum velit. Nam molestie ut ipsum ultricies volutpat. Integer molestie sagittis tempor. Integer vitae mauris est. Ut laoreet dignissim tellus, non accumsan erat gravida vel. Curabitur non erat id velit aliquam malesuada. Proin aliquet cursus orci quis pulvinar.</p>
<p>Duis elit massa, scelerisque sed nisl sed, tempus iaculis felis. Duis accumsan eget justo id auctor. Aliquam consequat odio non dolor efficitur, hendrerit porttitor neque porttitor. Integer varius maximus nunc, at malesuada leo tristique id. Sed aliquet pharetra ipsum, non interdum lacus dictum sit amet. Curabitur semper imperdiet sem eget interdum. Nunc at egestas tellus, vel tincidunt lacus. Fusce eget neque vel leo volutpat tincidunt ac non enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus cursus leo in felis viverra interdum.</p>
<p>Mauris id ultricies magna. Quisque rutrum lobortis elit blandit rutrum. Curabitur mattis enim lorem, eget tempor nunc pretium dignissim. Cras tincidunt ac nisl eget finibus. Fusce lobortis turpis sed dui mollis, eget fringilla risus porttitor. In id neque vitae lorem pharetra sodales. Morbi neque ex, mattis at dolor quis, consequat tincidunt leo. Vivamus sagittis placerat sem at porta.</p>
<p>Proin varius arcu ac ligula suscipit, sit amet pretium lectus tincidunt. Aliquam eu mi imperdiet, efficitur tellus ac, mollis eros. Cras malesuada feugiat pharetra. Curabitur lectus lacus, bibendum sed odio at, egestas tempor nisl. Vivamus sagittis est porta velit pretium, in elementum arcu tempus. Ut id cursus libero, non ullamcorper velit. Cras pretium arcu lacus, nec dignissim elit accumsan vitae. Aliquam tristique lorem et tempus congue. Donec vel metus enim. Praesent sed turpis et magna suscipit tincidunt. Proin efficitur neque non sapien cursus vehicula. Suspendisse iaculis, neque vel convallis lobortis, mauris dui posuere mi, at maximus lorem tortor a metus. Ut in quam efficitur, finibus nulla et, feugiat orci.</p>
<p>Sed mattis volutpat enim eget porttitor. Sed lectus ligula, condimentum nec elit eget, vehicula porttitor nunc. Curabitur pulvinar leo velit, a convallis tellus suscipit ac. Donec tempor est ut sagittis varius. Mauris maximus nunc metus, non venenatis justo ornare vel. Phasellus iaculis erat sit amet enim fermentum mattis. Cras sollicitudin tortor dolor, ac aliquam dolor iaculis non. Donec sed sodales enim. Suspendisse potenti. Integer quis turpis cursus enim consectetur fringilla eu eu ante.</p>
</div>
</div>
</div>
</section>
<section>
<div>
<button class="api-scroll-to" data-to="0">Scroll to 0</button>
<button class="api-scroll-to" data-to="50">Scroll to 50</button>
<button class="api-scroll-to" data-to="0%">Scroll to 0%</button>
<button class="api-scroll-to" data-to="100%">Scroll to 100%</button>
<button class="api-scroll-to" data-to="50%">Scroll to 50%</button>
</div>
<div>
<button class="api-scroll-by" data-by="10">Scroll by 10</button>
<button class="api-scroll-by" data-by="+10">Scroll by +10</button>
<button class="api-scroll-by" data-by="-10">Scroll by -10</button>
<button class="api-scroll-by" data-by="10%">Scroll by 10%</button>
<button class="api-scroll-by" data-by="+10%">Scroll by +10%</button>
<button class="api-scroll-by" data-by="-10%">Scroll by -10%</button>
</div>
<div>
<button class="api-init">Init</button>
<button class="api-enable">enable</button>
<button class="api-disable">disable</button>
<button class="api-destroy">Destroy</button>
</div>
</section>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/holder.js"></script>
<script src="js/jquery-asScrollbar.js"></script>
<script src="js/jquery-asScrollable.js"></script>
<script type="text/javascript">
jQuery(function($) {
Holder.run();
$('.box').asScrollable();
jQuery(function($) {
$('.special').asScrollable();
});
$('.simple').asScrollable({
contentSelector: ">",
containerSelector: ">"
});
$('.box').on('asScrollable::scrolltop', function(e, api, direction) {
console.info('top:' + direction);
});
$('.box').on('asScrollable::scrollend', function(e, api, direction) {
console.info('end:' + direction);
});
$('.api-scroll-to').on('click', function() {
var to = $(this).data('to');
$('.simple').asScrollable('scrollTo', 'vertical', to);
$('.simple').asScrollable('scrollTo', 'horizontal', to);
});
$('.api-scroll-by').on('click', function() {
var to = $(this).data('by');
$('.simple').asScrollable('scrollBy', 'horizontal', to);
$('.simple').asScrollable('scrollBy', 'vertical', to);
});
$('.api-init').on('click', function() {
$('.simple').asScrollable({
contentSelector: ">",
containerSelector: ">"
});
});
$('.api-enable').on('click', function() {
$('.simple').asScrollable('enable');
});
$('.api-disable').on('click', function() {
$('.simple').asScrollable('disable');
});
$('.api-destroy').on('click', function() {
$('.simple').asScrollable('destroy');
});
});
</script>
</body>
</html>
Here is the example.
Please help.
Thanks
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
#Nate. Please add below style.
.asScrollable-content {
box-sizing: border-box;
padding-right: 30px;
}
It's due to box-sizing property.
Hope this helps. Happy coding~ :)
I tried this on your vertical scrollable section and i think it did what you wanted.
Set a padding of your liking to the div after h3 vertical scrollable
and for the asScrollable-container div take off the width: 975px;
and the text should be able to scale with the padding you want and the scrollbar will not overlap with the text
Related
I'm trying to create a 2 column layout around an image but no success
This is what I want the layout to be:
This is what I can do so far:
<!DOCTYPE html>
<html>
<head>
<title>
Wrapping an Image with the text
</title>
<style>
img {
float: right;
margin: 5px;
}
p {
font-size: 20px;
}
</style>
</head>
<body>
<h1>Testing</h1>
<div class="square">
<div>
<img style="width: 300px" src="https://picture-origin.rumah123.com/news-content/img/2020/11/01111044/mansion-mewah-5.jpg" alt="">
</div>
<!-- <div style="column-count: 2"> -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor porttitor ligula, eu porta tellus tincidunt vehicula. Nam faucibus facilisis sapien, ac vehicula nulla congue vitae. Phasellus dictum dui a sollicitudin viverra. Morbi nisi turpis, interdum ut tortor in, blandit hendrerit enim. Aenean nisl mi, scelerisque in finibus eget, suscipit sed augue. Ut ac odio non odio laoreet pellentesque vitae sit amet diam. Vivamus eros urna, condimentum et nisi et, pulvinar aliquam risus. Donec auctor justo eu lobortis finibus.
Proin ultrices bibendum odio, eu sodales metus ultricies a. Nullam a ex neque. Quisque vel justo sed quam rhoncus eleifend a eget lorem. Duis accumsan nibh ullamcorper dolor porttitor suscipit. Sed in orci augue. Proin hendrerit magna sit amet felis efficitur, in consectetur leo luctus. Nulla imperdiet arcu quis neque maximus, vel molestie est rutrum.
</p>
<!--</div>-->
</div>
</body>
</html>
if I activated the div with column style 2, the layout will be a mess like this:
What is the solution for this? It's been days and I haven't found any solution yet. Please help.
UPDATE
Sorry, forgot to mention that the sentences must be continuous, so when a sentence is not completed in left column, it will be continued to right column under the image.
Make the text into two paragraphs, place the image in the second one, and float it to the top.
<!DOCTYPE html>
<html>
<head>
<title>
Wrapping an Image with the text
</title>
<style>
img {
float: right top;
margin: 5px;
}
p {
font-size: 20px;
}
</style>
</head>
<body>
<h1>Testing</h1>
<div class="square">
<div style="column-count: 2">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor porttitor ligula, eu porta tellus tincidunt vehicula. Nam faucibus facilisis sapien, ac vehicula nulla congue vitae. Phasellus dictum dui a sollicitudin viverra. Morbi nisi turpis, interdum ut tortor in, blandit hendrerit enim. Aenean nisl mi, scelerisque in finibus eget, suscipit sed augue. Ut ac odio non odio laoreet pellentesque vitae sit amet diam. Vivamus eros urna, condimentum et nisi et, pulvinar aliquam risus. Donec auctor justo eu lobortis finibus.</p>
<p> <img style="width: 300px" src="https://picture-origin.rumah123.com/news-content/img/2020/11/01111044/mansion-mewah-5.jpg" alt="">
Proin ultrices bibendum odio, eu sodales metus ultricies a. Nullam a ex neque. Quisque vel justo sed quam rhoncus eleifend a eget lorem. Duis accumsan nibh ullamcorper dolor porttitor suscipit. Sed in orci augue. Proin hendrerit magna sit amet felis efficitur, in consectetur leo luctus. Nulla imperdiet arcu quis neque maximus, vel molestie est rutrum.
</p>
</div>
</div>
</body>
</html>
Try wraping it using table like this
img {
float: right;
margin: 5px;
}
p {
font-size: 20px;
}
<table>
<tr>
<td width="70%">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor porttitor ligula, eu porta
tellus tincidunt vehicula. Nam faucibus facilisis sapien, ac vehicula nulla congue vitae. Phasellus
dictum dui a sollicitudin viverra. Morbi nisi turpis, interdum ut tortor in, blandit hendrerit enim.
Aenean nisl mi, scelerisque in finibus eget, suscipit sed augue. Ut ac odio non odio laoreet
pellentesque vitae sit amet diam. Vivamus eros urna, condimentum et nisi et, pulvinar aliquam risus.
Donec auctor justo eu lobortis finibus.
Proin ultrices bibendum odio, eu sodales metus ultricies a. Nullam a ex neque. Quisque vel justo sed
quam rhoncus eleifend a eget lorem. Duis accumsan nibh ullamcorper dolor porttitor suscipit. Sed in
orci augue. Proin hendrerit magna sit amet felis efficitur, in consectetur leo luctus. Nulla
imperdiet arcu quis neque maximus, vel molestie est rutrum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor porttitor ligula, eu porta
tellus tincidunt vehicula. Nam faucibus facilisis sapien, ac vehicula nulla congue vitae. Phasellus
dictum dui a sollicitudin viverra. Morbi nisi turpis, interdum ut tortor in, blandit hendrerit enim.
Aenean nisl mi, scelerisque in finibus eget, suscipit sed augue. Ut ac odio non odio laoreet
pellentesque vitae sit amet diam. Vivamus eros urna, condimentum et nisi et, pulvinar aliquam risus.
Donec auctor justo eu lobortis finibus.
Proin ultrices bibendum odio, eu sodales metus ultricies a. Nullam a ex neque. Quisque vel justo sed
quam rhoncus eleifend a eget lorem. Duis accumsan nibh ullamcorper dolor porttitor suscipit. Sed in
orci augue. Proin hendrerit magna sit amet felis efficitur, in consectetur leo luctus. Nulla
imperdiet arcu quis neque maximus, vel molestie est rutrum.
</p>
</td>
<td width="40%">
<img style width="100%"
src="https://picture-origin.rumah123.com/news-content/img/2020/11/01111044/mansion-mewah-5.jpg"
alt="">
</td>
</tr>
<tr>
<td width="60%">
</td>
<td width="20%">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias amet adipisci, possimus illo animi
maiores vitae corrupti. Similique suscipit, unde cupiditate sequi, sed rerum non officiis nisi nesciunt
quo vero ab reprehenderit quae ad aut saepe voluptate? Aliquam sint similique quibusdam iure
perspiciatis at quidem facere autem, iste velit in omnis! Atque repudiandae cupiditate ab nemo suscipit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor porttitor ligula, eu porta
tellus tincidunt vehicula. Nam faucibus facilisis sapien, ac vehicula nulla congue vitae. Phasellus
dictum dui a sollicitudin viverra. Morbi nisi turpis, interdum ut tortor in, blandit hendrerit enim.
Aenean nisl mi, scelerisque in finibus eget, suscipit sed augue. Ut ac odio non odio laoreet
pellentesque vitae sit amet diam. Vivamus eros urna, condimentum et nisi et, pulvinar aliquam risus.
Donec auctor justo eu lobortis finibus.
Proin ultrices bibendum odio, eu sodales metus ultricies a. Nullam a ex neque. Quisque vel justo sed
quam rhoncus eleifend a eget lorem. Duis accumsan nibh ullamcorper dolor porttitor suscipit. Sed in
orci augue. Proin hendrerit magna sit amet felis efficitur, in consectetur leo luctus. Nulla
imperdiet arcu quis neque maximus, vel molestie est rutrum.
</td>
</tr>
</table>
div {
margin: 2px;
}
#app {
display: flex;
}
.vd-grid-left-col {
display: flex;
flex-wrap: wrap;
flex-basis: 70%;
justify-content: space-between;
}
.main {
width: 100%;
background-color: blue;
}
.vd-grid-right-col {
display: flex;
flex-direction: column;
flex-basis: 30%;
}
.feature {
width: 100%;
background-color: grey;
}
img {
width: 100%;
margin: 5px;
}
p {
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>
Wrapping an Image with the text
</title>
</head>
<body>
<h1>Testing</h1>
<div id="app">
<div class="vd-grid-left-col">
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor porttitor ligula, eu porta
tellus tincidunt vehicula. Nam faucibus facilisis sapien, ac vehicula nulla congue vitae. Phasellus
dictum dui a sollicitudin viverra. Morbi nisi turpis, interdum ut tortor in, blandit hendrerit enim.
Aenean nisl mi, scelerisque in finibus eget, suscipit sed augue. Ut ac odio non odio laoreet
pellentesque vitae sit amet diam. Vivamus eros urna, condimentum et nisi et, pulvinar aliquam risus.
Donec auctor justo eu lobortis finibus. Proin ultrices bibendum odio, eu sodales metus ultricies a.
Nullam a ex neque. Quisque vel justo sed quam rhoncus eleifend a eget lorem. Duis accumsan nibh
ullamcorper dolor porttitor suscipit. Sed in orci augue. Proin hendrerit magna sit amet felis
efficitur,
in consectetur leo luctus. Nulla imperdiet arcu quis neque maximus, vel molestie est rutrum.</p>
</div>
</div>
<div class="vd-grid-right-col">
<div class="feature">
<img src="https://thumbs.dreamstime.com/b/environment-earth-day-hands-trees-growing-seedlings-bokeh-green-background-female-hand-holding-tree-nature-field-gra-130247647.jpg"
alt="nature" width="500" height="300">
</div>
<div class="feature">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor porttitor ligula, eu porta
tellus tincidunt vehicula. Nam faucibus facilisis sapien, ac vehicula nulla congue vitae. Phasellus
dictum dui a sollicitudin viverra. Morbi nisi turpis, interdum ut tortor in, blandit hendrerit enim.
Aenean nisl mi, scelerisque in finibus eget, suscipit sed augue. Ut ac odio non odio laoreet
pellentesque vitae sit amet diam. Vivamus eros urna, condimentum et nisi et, pulvinar aliquam risus.
</p>
</div>
</div>
</div>
</body>
Weil, I finally managed to solve it. Here's my solution:
<!DOCTYPE html>
<html>
<head>
<title>
Wrapping an Image with the text
</title>
<style>
div {
column-count: 2;
position: relative;
padding-top: 33%;
font-size: 20px;
column-gap: 5%;
}
div img {
position: absolute;
top: 0;
right: 0;
width: 47.5%;
}
.first-el {
margin-top: -70%;
}
</style>
</head>
<body>
<h1>Testing</h1>
<div>
<img src="https://picture-origin.rumah123.com/news-content/img/2020/11/01111044/mansion-mewah-5.jpg">
<p class="first-el">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?orem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?</p>
</div>
</body>
</html>
The image is positioned absolute on top right. It will be placed over the text so I used padding-top in the container and negative margin top in first element of the container which is first-el class to make a space for the image. Both padding-top and margin-top are in percentage to make the room responsive to image's height.
I hope this can help someone who have similar issue.
I want to convert html to pdf. I was wondering if there is any way to add fixed header and footer to the pdf. I have been looking around the web, #page css is used to add it but its not working for me. Or am i using it wrong? Please help.
window.print();
*,
::after,
::before {
box-sizing: border-box;
}
html {
font-family:'sans-serif';
line-height: 1.15;
}
body {
margin: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
color: #000000;
text-align: left;
background-color: #fff;
}
.wrapper {
margin: 0 auto;
padding: 20px;
}
#page {
size: A4;
margin-top: 0.25in;
margin-bottom: 0.25in;
border: 1px solid black;
#top-center {
content: 'Hello World';
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Html</title>
</head>
<body>
<div class="wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lobortis scelerisque fermentum dui faucibus in ornare quam viverra. Rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque. Purus sit amet luctus venenatis lectus magna fringilla urna porttitor. Massa tincidunt dui ut ornare lectus sit. At auctor urna nunc id cursus metus aliquam. Diam quam nulla porttitor massa id neque aliquam vestibulum morbi. Quam elementum pulvinar etiam non quam lacus suspendisse. Nam at lectus urna duis convallis convallis tellus. Sem nulla pharetra diam sit. Viverra maecenas accumsan lacus vel facilisis volutpat. Ut enim blandit volutpat maecenas. Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Pharetra massa massa ultricies mi quis hendrerit dolor. Tincidunt augue interdum velit euismod in pellentesque massa placerat duis.
</p>
<p>Molestie ac feugiat sed lectus vestibulum mattis. Et netus et malesuada fames ac turpis egestas sed tempus. Ipsum dolor sit amet consectetur adipiscing elit pellentesque. Varius vel pharetra vel turpis. Velit sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Aliquam sem et tortor consequat id porta. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur libero. Elit duis tristique sollicitudin nibh sit amet commodo. Vel turpis nunc eget lorem dolor sed viverra. Aliquam sem fringilla ut morbi tincidunt. Viverra nam libero justo laoreet sit amet. Phasellus vestibulum lorem sed risus ultricies tristique nulla aliquet enim. Accumsan tortor posuere ac ut consequat semper. Vulputate enim nulla aliquet porttitor lacus luctus. Eget duis at tellus at urna condimentum mattis pellentesque. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.
</p>
</div>
</body>
</html>
Your code is fine. The thing is, that your operating system pdf converter does not fully support #page syntax. You can try to convert your code to PDF using PrinceXML Converter and your headers and formatting is here.
I displayed text in a two columns layout, with column-count and column-fill: auto so that it fills completely the first column before going to the second.
I also need to add an illustration at the top right (top of the second column). With a position: fixed, the text won't wrap around the image but will hide underneath it. I tried float combinations with no success.
How would you approach this ? Thanks !
<div class="main">
<div class="description">
<div>
longish text
</div>
<figure>
<img class="illustration"
src="data:image:{{ p.id }}">
</figure>
</div>
</div>
.main {
margin-top: 2cm;
padding: 0 1cm 0cm 1cm;
column-count: 2;
column-gap: 2em;
column-fill: auto;
text-align: justify;
}
.produit-title {
color: firebrick;
padding: 2cm 1cm 0cm 1cm;
}
img.illustration {
margin-top: 0.1cm;
margin-left: auto;
margin-right: auto;
display: block;
max-height: 5cm;
max-width: 11cm;
border: solid 0.04cm;
border-color: firebrick;
}
expected result:
(edit) the text can be of variable length, but I would like the layout to stay the same. A short text can stop at the first column (role of colum-fill: auto), but the image would still be on the right.
Not an easy task at all. You can sort of hack it though, if your images have a fixed height:
div {
max-width:420px;
column-count: 2;
column-gap: 20px;
position: relative;
padding-top: 150px;
}
div img {
position: absolute;
top: 0;
right: 0;
height: 150px;
width: 200px;
}
div p:first-of-type {
margin-top: -150px;
}
<div>
<img src="http://via.placeholder.com/200x150px">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?orem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?</p>
</div>
The trick is to absolute position the image in the container then pull the text back up by setting a positive padding on the container and negative margin on the first paragrash, both equal number to the image height.
This is one of those things that definitely should be easier.
Can't you structure the html like this? Making sure that the image is positioned relatively inside the div?
<div class="main">
<div class="description">
<div>
longish text
<img class="illustration" src="data:image:{{ p.id }}">
more text
</div>
</div>
</div>
EDIT: If this does not work for you then as I see it you need to either decide where your image is always going to be e.g. always open your article with image followed by text and then you can position as required, or adopt some widely unsupported solution such as regions (https://www.html5rocks.com/en/tutorials/regions/adobe/).
Came upon this stack when trying to find a better solution than the one I went with which was the following. Only advantage to the accepted answer is it doesn't require absolute positioning. Still need to know the height of the image.
Note: the image does have to come before the text.
.columns {
columns: 2;
}
.image {
background-color: green;
width: 100px;
height: 100px;
column-span: all;
margin-left: auto;
}
.text {
margin-top: -100px; /* height of image */
}
<div class="columns">
<div class="image"></div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam erat velit. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Magna eget est lorem ipsum dolor. Feugiat in ante metus dictum at. Platea dictumst quisque sagittis purus sit amet. Nam aliquam sem et tortor. Velit dignissim sodales ut eu sem integer vitae justo eget. Tempor id eu nisl nunc mi ipsum faucibus vitae aliquet. Dapibus ultrices in iaculis nunc. Condimentum id venenatis a condimentum vitae sapien pellentesque. Luctus accumsan tortor posuere ac ut consequat semper. Viverra orci sagittis eu volutpat odio facilisis mauris. Suspendisse sed nisi lacus sed viverra tellus in hac habitasse. Et netus et malesuada fames ac turpis egestas sed tempus. Sit amet tellus cras adipiscing enim eu turpis egestas. Pretium vulputate sapien nec sagittis aliquam malesuada.
Dis parturient montes nascetur ridiculus mus mauris vitae. Morbi tristique senectus et netus et malesuada fames. Augue lacus viverra vitae congue eu consequat. Lobortis elementum nibh tellus molestie nunc non blandit massa. Dictum at tempor commodo ullamcorper a lacus vestibulum. Risus ultricies tristique nulla aliquet. Nulla pharetra diam sit amet nisl. Sed nisi lacus sed viverra tellus in hac habitasse. Arcu risus quis varius quam quisque id diam vel. Condimentum mattis pellentesque id nibh tortor id. Placerat duis ultricies lacus sed turpis. Quis eleifend quam adipiscing vitae proin sagittis. Ut tristique et egestas quis ipsum suspendisse. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla. Viverra nibh cras pulvinar mattis nunc sed blandit libero volutpat.
</div>
<div>
how can I create this css design?
trying to have no scroll page with white div on a picture to be scrollable
when I use height 100% then sidebar will be displayed OK, but scrollable area will go under the screen, so light gray area is some kind of wraper background and white area is content and I want to add margins with css on it as well
NOTE: would like to avoid media query for this
Here's a solution:
position: absolute can position everything, and then the scrollable area will change size depending on the window size.
* {
box-sizing: border-box;
}
.wrapper {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.navbar {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100px;
background: #ddd;
}
.sidebar {
position: absolute;
top: 100px;
left: 0;
width: 200px;
bottom: 0;
background: #aaa;
}
.main {
position: absolute;
top: 100px;
left: 200px;
bottom: 0;
right: 0;
padding: 20px;
background: #f1f1f1;
}
.scrollable {
padding: 5px;
width: 100%;
height: 100%;
overflow: auto;
background: #fff;
}
.scrollable p {
margin: 0 0 1rem;
}
<div class="wrapper">
<div class="navbar">
Navbar
</div>
<div class="sidebar">
Sidebar
</div>
<div class="main">
<div class="scrollable">
<p>
Scrollable with lots of content inside...Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
<p>tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
<p>consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
You can do something like this, Flexbox example:
/* reset browser defaults */
* {margin:0;padding:0;box-sizing:border-box;overflow:auto}
html, body {width:100%;height:100%}
#container {
width: 100%;
height: 100%;
display: flex; /* displays children inline */
flex-wrap: wrap; /* enables wrapping */
}
#container > * {
border: 1px solid;
}
nav {
flex: 0 1 100%;
background: #777;
}
aside {
flex: 0 1 200px;
background: #777;
}
.scroll {
flex: 0 1 calc(100% - 250px); /* - 200px of the aside's width - 2 x 25px left & right margin */
margin: 25px;
overflow: auto; /* mandatory */
position: relative; /* mandatory */
}
.content {
width: 2000px;
height: 2000px;
background: #eee;
position: absolute; /* mandatory */
}
<div id="container">
<nav>NAVBAR</nav>
<aside>SIDEBAR</aside>
<div class="scroll">
SCROLLABLE AREA
<p class="content">some pretty big content for testing...</p>
</div>
</div>
The trick lies in the positioning of the content and it's parent, without the positioning, the overflow-y: scroll or overflow-y: auto on the parent doesn't apply.
I don't know if it's looking like what you want to achieve, but here is a quick snippet.
I've put your scrollable area within a container, and I put a max height to that container. Then you just have to add overflow-y: scroll to make it scroll
body {
max-height: 100vh;
display: flex;
flex-flow: row nowrap;
}
.sidebar {
width: 20%;
background-color: #333;
}
.container {
width: 80%;
max-height: 100%;
overflow-y: scroll;
background-color: #eee;
}
.area{
margin: 20px;
background:#fff;
overflow: hidden;
padding: 10px;
}
<body>
<div class="sidebar"></div>
<div class="container">
<div class="area">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id sagittis lectus, sit amet placerat nisl. Pellentesque blandit porttitor massa vel dignissim. Fusce id velit id libero lacinia tristique. Morbi pretium tempor sapien, id blandit arcu
congue sed. Mauris ultrices tincidunt ipsum, non rhoncus eros consequat vel. Etiam consequat efficitur nibh sed semper. Donec sit amet lobortis diam, et malesuada ligula. Ut a pretium velit, vel porta metus. Proin placerat sollicitudin imperdiet.
Pellentesque dolor nisi, sagittis a diam ut, varius aliquet turpis. Vestibulum pharetra elementum velit, id accumsan felis dignissim sed. Integer tristique faucibus tempor. Aenean varius est eu nisi suscipit interdum. Nam blandit ut nunc ac venenatis.
Donec diam justo, rhoncus in libero ac, tincidunt auctor dolor.
</p>
<p>
Aliquam id orci pharetra, aliquam diam quis, mattis nisi. Maecenas hendrerit eget ex sed consectetur. Praesent at dolor sit amet nisl gravida aliquam. Phasellus maximus fermentum est. Integer sodales tincidunt volutpat. Mauris sit amet lectus non ipsum
tincidunt posuere ut at diam. Nunc in ipsum tincidunt, tempus eros in, viverra diam. Vestibulum convallis odio in arcu consequat congue. Duis egestas ante a orci volutpat, ac commodo est molestie. Aliquam nisl ex, tincidunt in posuere vitae, pretium
rhoncus ligula. Aliquam vehicula turpis sed auctor hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec metus tellus, faucibus et libero in, luctus cursus tortor. Fusce vel magna lorem.
Aenean sodales sollicitudin eros, quis aliquet mi finibus sit amet.
</p>
<p>
Maecenas ut convallis arcu. Morbi sed fringilla libero. Fusce id posuere tellus. Sed imperdiet, justo vel sollicitudin fermentum, mauris ante lacinia ex, vel mollis nisi metus rhoncus ex. Nam et mauris euismod, vehicula tellus vel, aliquet mauris. Aliquam
finibus enim at maximus imperdiet. Suspendisse porta ipsum ac urna fermentum, at pharetra nisl vestibulum. Praesent sollicitudin tristique nibh id eleifend. Proin ut orci sit amet sapien fringilla consectetur sed id sem. Vestibulum et sollicitudin
libero. Curabitur enim neque, euismod vitae felis nec, sagittis cursus sem. Mauris id ornare felis.
</p>
<p>
Aliquam at accumsan magna. Cras eleifend purus quis consectetur posuere. Aliquam nec nunc at tortor sollicitudin interdum. Donec metus tellus, pretium nec ipsum id, sollicitudin pulvinar nisi. Etiam finibus, velit id rhoncus posuere, risus ex auctor nulla,
et placerat orci tellus non dolor. Fusce id sodales est. Aliquam fringilla nibh ut mi auctor eleifend. Phasellus placerat rhoncus ligula ut mollis. Sed a elementum eros, sodales suscipit ante. Sed vitae neque turpis.
</p>
<p>
Etiam sed pulvinar magna, non laoreet magna. Fusce ullamcorper mauris sit amet ligula ullamcorper tempor. Etiam convallis ante sed odio ultrices, id sagittis lorem pretium. Sed ligula odio, volutpat nec vestibulum a, dignissim a leo. Ut ultrices ligula
erat, sit amet cursus odio ornare ac. Etiam molestie ex nisi, et luctus ligula mollis sed. Nullam ac tempus sapien. Aenean varius lacus ac lacinia imperdiet. Sed arcu lorem, facilisis ut ipsum vel, tempor fermentum ex. In scelerisque laoreet arcu,
nec vestibulum turpis. Praesent dolor massa, imperdiet vitae efficitur in, laoreet quis urna. Morbi malesuada orci id ipsum aliquet bibendum. Maecenas commodo ultricies arcu quis venenatis. Nunc tellus quam, feugiat non urna posuere, ornare sollicitudin
nunc. In condimentum, tortor eget ultricies faucibus, ligula urna molestie sem, et suscipit arcu augue vitae magna. Ut pulvinar ipsum eu porttitor elementum.
</p>
<p>
Vivamus laoreet eros sed mollis tempor. Cras rhoncus placerat erat. Morbi vel est sed erat hendrerit hendrerit et ac odio. Aliquam tincidunt lacinia dui sollicitudin gravida. Pellentesque eget consequat mauris. Maecenas at erat nec mauris mollis faucibus.
Sed eget semper eros, vitae iaculis elit. Fusce et interdum elit. Morbi tincidunt felis sed enim congue porta. Proin eget feugiat purus. Praesent placerat convallis nulla, eu convallis risus faucibus molestie. Maecenas non interdum erat. Interdum
et malesuada fames ac ante ipsum primis in faucibus.
</p>
</div>
</div>
</body>
I have a question. Does something simillar to "float: center" exist?
I am trying to make 2 columns of text and I want to have an image between them on the bottom... But not like in my example. I would like to have it floated.
Thanks for answers.
.column{
display:inline-block;
width: 150px;
margin-right: 10px;
}
.photo{
width: 150px;
}
<p class="column">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Etiam commodo dui eget wisi. Donec vitae arcu. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam
</p>
<img src="http://www.matmasar.wz.cz/foto.jpg" class="photo">
<p class="column">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Etiam commodo dui eget wisi. Donec vitae arcu. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam
</p>
Putting your picture in a column and position it to the bottom by making the parent:
position: relative;
and the child
position: absolute;
bottom: 0;
See the snippet below for the result:
.column{
display:inline-block;
position: relative;
width: 150px;
margin-right: 10px;
}
.column img {
position: absolute;
bottom: 0;
width: 150px;
}
<p class="column">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Etiam commodo dui eget wisi. Donec vitae arcu. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam
</p>
<p class="column">
<img src="http://www.matmasar.wz.cz/foto.jpg">
</p>
<p class="column">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Etiam commodo dui eget wisi. Donec vitae arcu. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam
</p>
In answer to your question, there is no such thing as float:center;
In terms of your example, I think this is what you are trying to do:
.column{
float:left;
width: 150px;
margin-right: 10px;
}
.photo{
width: 150px;
}
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Etiam commodo dui eget wisi. Donec vitae arcu. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam</p>
</div>
<div class="column">
<img src="http://www.matmasar.wz.cz/foto.jpg" class="photo">
</div>
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Etiam commodo dui eget wisi. Donec vitae arcu. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam</p>
</div>
In the snippet, I removed the class of column from your <p> tags, and instead put each column inside it's own <div>. This causes the image to act as it's own column.
I also removed the display:inline-block and added float:left to the column class to ensure that columns appear alongside eachother.