How can I put the name David Laecke under the stop image with CSS?
Right now the text David Laecke depends on how much the text on the right grows so that name gets pushed down when the text on the right grows, but I would like it to be independent of the text on the right.
I already made it a div, I then changed it to a span and I changed the width to be less but I can see that it's for some reason taking all the space to the other side of the element, so that's why is being pushed down.
How can I do it? any help would be appreciated.
My HTML code:
<h4>
<form method='post' id='deleteinsight-2' action="insights.php?chapter=1" data-ajax='false'> <input type='hidden' name='deleteinsightinput' value='2'>
<a href='#' data-rel='back' data-role='button' data-icon='delete' data-iconpos='notext' onclick='deleteinsight(this,event);' style='position:absolute;top:-20px;right: -10px' >Delete</a>
</form>
<div class='ui-grid-a'>
<div class='ui-block-a textfloatleft' > 1 new </div>
<div class='ui-block-b textfloatright'> Jan 27 2016, 12:25 pm </div>
</div>
<div class='ui-grid-b' style='width:900px;'>
<div class='ui-block-a' id='blocka'>
<img id='imguser' src='http://www.testingcolorvision.com/widget/core/restart.png'>
</div>
<div class='ui-block-b' id='blockb'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecen</div>
<div class='ui-block-c' id='blockc'>
<button id='btn01' href='#' data-icon='check' data-iconpos='right' style='width:100px;' onclick='showtextarea(this,2)' >Reply</button>
</div>
</div>
<span id='namefirstlast'>David Laecke </span>
</h4>
https://jsfiddle.net/bkt27wvk/
Just put the name in the same <div> as the image and it should work
Like so:
<div class='ui-block-a' id='blocks'>
<img id='imguser' src='http://www.testingcolorvision.com/widget/core/restart.png'>
<br />
<span id='namefirstlast'>David Laecke </span>
</div>
https://jsfiddle.net/bkt27wvk/2/
Related
I got a small problem, I want to float 3 sections next to each other but for some reasons (using bootstrap class col-md-4) the 3rd section spills over to the next line when adding any margin-right, how can I fix this?
https://jsfiddle.net/rpu6szv0/ `
<section id="FirstSection" class="col-md-4 col-sm-12 col-xs-12"><h3 class="SectionHeader text-center">Chicken</h3>
dummy text
Back To top
</section>
<section id="SecondSection" class="col-md-4 col-sm-12 col-xs-12"><h3 class="SectionHeader text-center">Beef</h3>
dummy text
Back To top
</section>
<section id="ThirdSection" class="col-md-4 col-sm-12 col-xs-12"><h3 class="SectionHeader text-center">Sushi</h3>
dummy text
Back To top
</section>
</div>`
Zoomed Out 3 sections
I want to float 3 sections next to each other
A more advanced and more modern alternative to float is flexbox.
You can think of flexbox as float with superpowers.
Historical Note: The Twitter Bootstrap framework was launched in 2011, several years before CSS Flexbox was finalised.
It's true that Bootstrap made it easier to achieve certain layouts in CSS than approaches available in 2011.
But, as Wikipedia states:
In the 2010s, the intensive use of popular JavaScript layout
frameworks, such as Bootstrap, inspired CSS flex-box and grid layout specifications.
Source: https://en.wikipedia.org/wiki/CSS_Flexible_Box_Layout#History
Today, CSS Flexbox (and CSS Grid) make it even easier to achieve those layouts than Bootstrap does.
In the example below, I have:
given the parent (in this case, body) a display: flex
given the children (in this case, section) a flex: 1 1 33%
The second property is crucial.
flex is a shorthand property which indicates:
the rate at which the element may grow (in this case, 1)
the rate at which the element may shrink (in this case, 1)
the initial width (in this case, 33%)
This means, that, all else being equal, the element will take up 33% of the available space (in this case, the width of body) but if you add padding, borders, margins etc. the element can shrink, so that the row of elements doesn't end up taking up more than the available space.
Working Example:
body {
display: flex;
}
section {
flex: 1 1 33%;
text-align: center;
}
<section id="FirstSection">
<h3>Chicken</h3>
<p>dummy text</p>
<p>Back To Top</p>
</section>
<section id="SecondSection">
<h3>Beef</h3>
<p>dummy text</p>
<p>Back To Top</p>
</section>
<section id="ThirdSection">
<h3>Sushi</h3>
<p>dummy text</p>
<p>Back To Top</p>
</section>
The most effective solution is to keep col-md-3 for all sections and use offset-md-1 for spacing
from your comment
#G-Cyrillus That's the whole point, I'm trying to have some space between each section but it won't allow it, I think it barely fits to add a margin. Is there anyway around it?
if ad margin , the col-x classes sizing your columns should be dropped for a plain col class , which will grow inside the sroom left for it . Instead col-md-4 , you can use the class col-md for the second column, it will grow and shrink to fit in between the 2 others and allow you to add margins :
example
* {
box-sizing: border-box;
}
#FirstSection,
#SecondSection,
#ThirdSection {
font-size: 120%;
font-weight: bold;
background-color: #C0C0C0;
height: 1700px;
margin-right: 10px;
overflow: auto;
margin-left: auto;
padding: 10px;
clear: none;
}
.SectionHeader {
font-size: 1.5em;
font-weight: bold;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<section id="FirstSection" class="col-md-4 col-sm-12 col-xs-12">
<h3 class="SectionHeader text-center">Chicken</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla
mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id,
metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis
arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris.
Back To top
</section>
<section id="SecondSection" class="col-md col-sm-12 col-xs-12">
<h3 class="SectionHeader text-center">Beef</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla
mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id,
metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis
arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris.
Back To top
</section>
<section id="ThirdSection" class="col-md-4 col-sm-12 col-xs-12">
<h3 class="SectionHeader text-center">Sushi</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla
mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id,
metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.
Back To top
</section>
</div>
</div>
see : https://getbootstrap.com/docs/4.0/layout/grid/#auto-layout-columns
I have two columns, one for the image and one for the text on the web page that I am currently developing. What he intended was to occupy the empty space after the edge of the image. Can anyone help me? Thank you.
Actual Page:
What I need:
code:
<div class="container" id="fadein2">
<br>
<br>
<div class="row">
<?php
$select_stmt=$db->prepare("SELECT * FROM bairro ORDER BY id DESC;"); //sql select query
$select_stmt->execute();
while($row=$select_stmt->fetch(PDO::FETCH_ASSOC))
{
?>
<a class="linha_paginas"></a>
<br>
<div class="col-sm-12 row">
<div class="col-sm-12 col-md-12 col-lg-6">
<br>
<br>
<div class="col-sm-12" align="middle"><a class="fancybox" href="upload/bairro/<?php echo $row['image']; ?>" data-fancybox-group="gallery"><img src="upload/bairro/<?php echo $row['image']; ?>" id="imagem_esp" class="imagem img-fluid"></a></div>
</div>
<div class="col-sm-12 col-md-12 col-lg-6">
<div class="col-sm-12 texto_paginas" id="titulo_urgeirica">
<?php echo $row['titulo'];?>
</div>
<br>
<div class="col-sm-12" id="texto_urgeirica">
<?php echo $row['texto']?>
</div>
<br>
</div>
<br>
</div>
</div>
<?php
}
?>
</div>
</div>
Instead of separating your image and text into 2 columns, you can group them in one and set image to float.
img {
float: left;
width: 170px;
height: 170px;
margin-right: 15px;
}
<div class="row">
<div class="col-lg-12 ">
<p><img src="pineapple.jpg" alt="IMG place holder" style=""> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at ultrices magna, ac maximus sapien. Donec ultricies odio placerat, accumsan metus id, malesuada eros. Morbi at elit leo.
In euismod magna eu imperdiet accumsan. Morbi egestas tempor orci eget congue. Quisque libero quam, tempor in purus sed, pellentesque condimentum mauris. Aliquam sed pellentesque risus. Nunc vestibulum, nunc non congue iaculis, turpis nisl fermentum
nibh, et faucibus nibh mi et felis. Aliquam condimentum, justo eu aliquam pellentesque, nunc arcu hendrerit dolor, ac consequat nisi ligula ac dolor. Quisque eu metus sed nibh blandit sagittis et nec justo. Donec tincidunt mi at magna efficitur
tristique. Pellentesque mi dui, ultricies vel elementum at, facilisis nec metus. Duis ornare urna diam, ut tristique elit venenatis id. Quisque luctus maximus quam, vulputate viverra enim euismod id. Sed efficitur suscipit sodales. Ut aliquet, erat
a laoreet tempus, sem turpis posuere tellus, scelerisque mollis erat felis sed magna. Morbi nec orci aliquam, tempor lorem vel, ullamcorper urna. Donec fermentum congue nunc nec ultrices. Curabitur sagittis egestas mi eget feugiat. Aliquam vitae
sodales nunc. Integer vehicula feugiat mauris, vitae porttitor dui mollis sit amet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse ipsum ligula, placerat sit amet metus a, rhoncus tincidunt nibh.
Suspendisse odio diam, fringilla in justo in, mollis luctus nisi. Fusce a leo sed libero egestas tincidunt sit amet vitae erat. Morbi id tortor at leo lobortis suscipit eu sit amet libero. Morbi hendrerit, enim sed rutrum venenatis, tellus urna
vulputate turpis, sed consectetur risus ante fermentum.
</p>
</div>
</div>
You can use css shape-outside property for it. In your case, shape-outside: polygon(); will match for your purpose.
See this article's first answer for a nice demo.
How to wrap text around an image using HTML/CSS
On my Wordpress blog, I have right aligned the images when inserting them, where the body text wraps around them perfectly. I would however like to include text underneath the images such as "Click Here to Order".
I tried adding the order link html as a caption to the image media but that didn't seem to work. I also tried wrapping the image in a DIV and putting the link below it but it didn't group them as desired.
What would be the best way to accomplish this?
<h2>Best Mixers</h2>
[table id=2 /]
<h2><a name="kitchenaid"></a>Kitchenaid</h2>
<img class="alignright size-medium wp-image-1323" src="https://website.com/mixer-300x300.jpg" alt="Kitchenaid Mixer" width="300" height="300" />
I Hope Help You:
img {
width: 300px;
}
#divPic {
float: right;
margin-left:10px;
}
#divPic h3 {
text-align: center;
background: #000;
color:orange;
margin:0;
padding: 0;
}
<div id="wrapper">
<div id="divPic">
<img src="http://www.mrwallpaper.com/wallpapers/cute-bunny-1600x900.jpg">
<h3>Click Here to Order</h3>
</div>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec
</div>
</div>
Did you try
<div class="alignright">
<img><br>
text
</div>
(Note the <br>)
I'm not sure what Wordpress' various CSS rulesets (referred to by the class attribute) do, but your objective is to group the image and its caption together in a <div> and have that "object" (rather than just the <img>) float to the right.
This question already has answers here:
How do you make div elements display inline?
(20 answers)
Closed 6 years ago.
Trying to get these two div's in one paragraph, does anyone have a solution?
<div class="boxed">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
</div>
<div class="boxed">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
</div>
From what I understand of your question, you want to insert two <div>'s in a single <p>?
If so its quite simple:
<p>
<div id="div1"></div>
<div id="div2"></div>
</p>
This obviously wraps two <div>s in a single <p> (paragraph). Then just add the inline css class to your <div>s:
css style for inline:
<style type="text/css">
div.inline { float:left; }
.clearBoth { clear:both; }
</style>
Now just add the inline class to both your divs:
<div id="div1" class="inline">test</div>
<div id="div2"class="inline">test</div>
Output:
testtest
Hope that helps
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I need some help with this.
I want a page break after each dina4 container and added the page-break command, but when i try to print all content is on one page.
How can i get a proper print output?
I need print ouput like 1 dina4 container on each new page.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="application-name" content="dtfm">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
#media print {
.dina4 {
page-break-after: always;
}
}
#media screen {
.dina4 {
background-color: #eaFFea;
position:relative;
top: 0;
left: 0;
width: 210mm;
height: 397mm;
}
}
</style>
</head>
<body style="">
<div class="dina4">
<img style="position:absolute;top:15mm; left:100mm" src="">
<div style="position:absolute;top:30mm; left:10mm">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac,
enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque
rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.
Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc,
blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero
venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet
nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</div>
</div>
<div class="dina4">
<img style="position:absolute;top:15mm; left:100mm" src="">
<div style="position:absolute;top:30mm; left:10mm">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac,
enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque
rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.
Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc,
blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero
venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet
nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</div>
</div>
<div class="dina4">
<img style="position:absolute;top:15mm; left:100mm" src="">
<div style="position:absolute;top:30mm; left:10mm">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac,
enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque
rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.
Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc,
blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero
venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet
nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</div>
</div>
</body>
</html>
You have a number of absolutely positioned elements.
They are positioned with respect to the class=dina4 elements on screen.
When you switch to print media, they are no longer inside a relatively positioned element, so they are positioned with the respect to the document.
The three class=dina4 containers are not overlapping. It is the elements inside them which are.
You need to continue to relatively position those elements.