My image says it all.
At #1 screenshot is how it is right now
At #2 is how I want it to be
How can i do this?
Here's my current html:
<div>
<span style='float: left; margin: 10px; width: 60px; display: block;'>
<img style='border: 1px solid #FFF; width: 61px; height: 80px;' src='images/profilePhoto/thumbs/104.jpg'>
<br>Rafo O.
</span>
<h1>(inget ämne)</h1>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla urna eget urna euismod aliquet. Duis porta volutpat blandit. Phasellus bibendum bibendum porta. Nunc molestie tristique leo, sed euismod orci ultricies vitae. Mauris non libero a leo ultricies laoreet. Suspendisse luctus urna vel sapien tristique vitae semper nulla eleifend. Integer congue aliquam pharetra. Phasellus diam neque, tincidunt vel elementum vel, ornare sit amet mi. Nulla tincidunt purus in odio vulputate mollis. Nunc urna odio, rutrum eu ultricies a, facilisis ullamcorper nunc. In purus velit, varius vel laoreet eu, tincidunt non purus. Nulla facilisi. Sed ac lectus nibh. Praesent non velit nibh.<br />
........
</div>
<p style='float: right; color: grey; font-weight: bold;'>1-11-2010 kl. 13:28</p></div>
<div class='clearfloat'></div>
Add a margin to the left of the text:
<div style="margin-left:100px;">
<h1>(inget ämne)</h1>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. [...]
</div>
</div>
You should consider unobstrusive CSS and move your styles out of your markup (use external files).
Related
I have a two column layout image left and text content right. When the screen resizes, the text content is resizing. How can I adjust the code so that the image resizes instead of the text?
<div class="content-block-container">
<img src="image.jpg">
<div class="content-block-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis justo nisl, vel suscipit lectus dignissim
ut. Aenean sed auctor lorem. Suspendisse eget dapibus est, a egestas dolor. Phasellus lobortis non lacus in sodales.
Mauris at est justo. Quisque at risus eu odio lobortis suscipit. Etiam nulla elit, tincidunt feugiat nunc a,
vulputate volutpat lectus. Integer commodo at tellus a tristique. Suspendisse nec sollicitudin sem, non volutpat
neque. Donec maximus nec purus vel fermentum. Mauris eu nulla efficitur, pharetra dolor fringilla, placerat justo.
</p>
<pLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis justo nisl, vel suscipit lectus dignissim ut.
Aenean sed auctor lorem. Suspendisse eget dapibus est, a egestas dolor. Phasellus lobortis non lacus in sodales.
Mauris at est justo. Quisque at risus eu odio lobortis suscipit. Etiam nulla elit, tincidunt feugiat nunc a,
vulputate volutpat lectus. Integer commodo at tellus a tristique. Suspendisse nec sollicitudin sem, non volutpat
neque. Donec maximus nec purus vel fermentum. Mauris eu nulla efficitur, pharetra dolor fringilla, placerat
justo.</p>
</div>
</div>
<style>
.content-block-container {
align-items: end;
display: flex;
}
.content-block-container img {
border: 5px #fff solid;
margin-right: 30px;
}
.content-block-content {
display: flex;
flex: 1;
flex-direction: column;
}
img {
height: auto;
max-width: 100%;
}
</style>
jsfiddle
This sets a min-width of content-block-content and width of img which should do as you are looking for it to do.
Be careful using img instead of setting a class (ie <img class="article-img") as this will affect all <img> tags.
.content-block-container {
align-items: end;
display: flex;
}
.content-block-container img {
border: 5px #fff solid;
margin-right: 30px;
}
.content-block-content {
display: flex;
flex: 1;
flex-direction: column;
}
img {
height: auto;
max-height: 150px;
max-width: 150px;
width: 20%;
}
<div class="content-block-container">
<img src="https://via.placeholder.com/150">
<div class="content-block-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis justo nisl, vel suscipit lectus dignissim
ut. Aenean sed auctor lorem. Suspendisse eget dapibus est, a egestas dolor. Phasellus lobortis non lacus in sodales.
Mauris at est justo. Quisque at risus eu odio lobortis suscipit. Etiam nulla elit, tincidunt feugiat nunc a,
vulputate volutpat lectus. Integer commodo at tellus a tristique. Suspendisse nec sollicitudin sem, non volutpat
neque. Donec maximus nec purus vel fermentum. Mauris eu nulla efficitur, pharetra dolor fringilla, placerat justo.
</p>
<pLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis justo nisl, vel suscipit lectus dignissim ut.
Aenean sed auctor lorem. Suspendisse eget dapibus est, a egestas dolor. Phasellus lobortis non lacus in sodales.
Mauris at est justo. Quisque at risus eu odio lobortis suscipit. Etiam nulla elit, tincidunt feugiat nunc a,
vulputate volutpat lectus. Integer commodo at tellus a tristique. Suspendisse nec sollicitudin sem, non volutpat
neque. Donec maximus nec purus vel fermentum. Mauris eu nulla efficitur, pharetra dolor fringilla, placerat
justo.</p>
</div>
</div>
You can add a "width" attribute with precent value into your img tag like this:
<img src="image.jpg" width="30%">
I have included a snippet of my example attempt below.
It almost works apart from the fact that the 3rd paragraph does not follow on after the 2nd paragraph.
Update: I've found a solution. #Paul's last comment inspired me. :) I've posted my solution in the answers
#full-width {
position: absolute;
left: 0;
width: 100vw;
border: 3px solid #73AD21;
}
<div style="max-width:300px; border: 3px solid #73AD21; margin:auto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
<div id="full-width">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
</div>
I think you won't be able to get that working that way. Due to your absolute positioning the full width div doesn't occupy any space anymore and that's why the following paragraph and the absolute positioned paragraph are overlapping.
It does work, if you create three divs (the first and the last one with max-width and the middle one with full width.
#full-width {
width: 100%;
border: 3px solid #73AD21;
}
.max-width {
max-width: 300px;
margin: auto;
border: 3px solid #73AD21;
}
<div class="max-width">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit
sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
</div>
<div id="full-width">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit
sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
</div>
<div class="max-width">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit
sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
</div>
If you cannot do this, you need to add a fixed margin-top to the last div, which has the same number of pixels as the height of the second paragraph. Nevertheless that's a not a nice solution.
you can try this .if you give position absolute than for the third paragraph need to give margin-top to resolve overflow.
#full-width p{
position:relative;
width:100vw;
max-width:100%;
border: 3px solid #73AD21;
margin-left:0;
}
p{
max-width:300px;
border: 3px solid #73AD21;
margin:auto;
}
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
<div id="full-width">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
</div>
<p>Lsdxsorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
</div>
I think the answers provided will be useful to others.
However I do have the restriction that the nested element must inherit the max-width from the outer div otherwise it will add big complications to my code.
However, #Paul's last comment did inspire me to create this answer, which has solved my problem. :)
jQuery(document).ready(function($) {
var fill_size_required = $('#full-width').height()
$('#filler').css('height',fill_size_required);
});
#full-width {
position: absolute;
left: 0;
width: 100vw;
border: 3px solid #73AD21;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="max-width:300px; border: 3px solid #73AD21; margin:auto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
<div id="full-width">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
</div>
<div id="filler"> </div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
</div>
I'm trying to get tooltips working properly within a scrollable div container. To achieve this I've set the tooltips position to absolute and for its parent element (.panel-section) to relative. Problem is with the very first tooltip which should be visible on top of the .panel-header but now it's going "under" it and is not visible.
.panel {
margin: 50px;
width: 500px;
border: 1px solid black;
}
.panel-header {
height: 2rem;
background-color: silver;
border-bottom: 1px solid black;
}
.panel-content {
overflow-y: auto;
height: 500px;
}
.panel-section {
position: relative;
}
h1,
h2 {
margin: 0;
}
.tooltip {
width: 200px;
height: 50px;
border: 1px solid silver;
background-color: #333333ee;
color: silver;
position: absolute;
top: -50px;
display: none;
}
.panel-section:hover .tooltip {
display: block;
}
<html>
<body>
<div class="panel">
<div class="panel-header">
<h1>Header content</h1>
</div>
<div class="panel-content">
<div class="panel-section">
<h2>Blah blah</h2>
<div class="tooltip">
tooltip content
</div>
<p>
(hover here to see tooltip) Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum ut est quis enim eleifend consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
tristique fringilla sapien a ornare. Etiam sed nunc orci. Sed
maximus ullamcorper risus, sed rutrum magna lobortis ut. Praesent
egestas hendrerit commodo. Donec dapibus bibendum ex id gravida.
Donec imperdiet pharetra dolor ac lacinia. Quisque lobortis elit eu
tempus maximus. Nam eget sem eleifend, pretium massa a, efficitur
nisi. Suspendisse potenti. Pellentesque imperdiet felis sed nisl
consequat suscipit. Morbi convallis tortor in iaculis aliquet.
</p>
</div>
<div class="panel-section">
<h2>Blah blah</h2>
<div class="tooltip">
tooltip content
</div>
<p>
(hover here to see tooltip) Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum ut est quis enim eleifend consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
tristique fringilla sapien a ornare. Etiam sed nunc orci. Sed
maximus ullamcorper risus, sed rutrum magna lobortis ut. Praesent
egestas hendrerit commodo. Donec dapibus bibendum ex id gravida.
Donec imperdiet pharetra dolor ac lacinia. Quisque lobortis elit eu
tempus maximus. Nam eget sem eleifend, pretium massa a, efficitur
nisi. Suspendisse potenti. Pellentesque imperdiet felis sed nisl
consequat suscipit. Morbi convallis tortor in iaculis aliquet.
</p>
</div>
<div class="panel-section">
<h2>Blah blah</h2>
<div class="tooltip">
tooltip content
</div>
<p>
(hover here to see tooltip) Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum ut est quis enim eleifend consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
tristique fringilla sapien a ornare. Etiam sed nunc orci. Sed
maximus ullamcorper risus, sed rutrum magna lobortis ut. Praesent
egestas hendrerit commodo. Donec dapibus bibendum ex id gravida.
Donec imperdiet pharetra dolor ac lacinia. Quisque lobortis elit eu
tempus maximus. Nam eget sem eleifend, pretium massa a, efficitur
nisi. Suspendisse potenti. Pellentesque imperdiet felis sed nisl
consequat suscipit. Morbi convallis tortor in iaculis aliquet.
</p>
</div>
</div>
</div>
</body>
</html>
This question already has answers here:
How to Create Grid/Tile View? [duplicate]
(8 answers)
Closed 5 years ago.
Is there a way to fill in the vertical white space between rows of elements with pure css?
You'll see below in my snippet that the floated elements have space in between them vertically, which I have made red. I've tried csscolumns, flexbox, cssgrid, floating, tables and I still can't get them to fill the vertical space.
Has anyone seen or know of a way to fill this vertical space with css?
.container {
display: block;
background-color: red;
}
.container:after {
display: table;
content: "";
clear: both;
}
.cell {
width: 25%;
background-color: white;
float: left;
}
<div class="container">
<div class="cell">
Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit.
</div>
<div class="cell">
Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit.
</div>
<div class="cell">
Curabitur aliquet quam id dui posuere blandit. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="cell">
Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit.
</div>
<div class="cell">
Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit.
</div>
<div class="cell">
Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit.
</div>
<div class="cell">
Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit.
</div>
</div>
Update:
I tried using csscolumns to achieve this but, I found that the columns will automatically try and maintain the same height and the child elements will break. I need the child elements to stay together vertically, without breaking into another column.
You can see below where the child elements break, as the green border isn't there.
.container {
display: block;
columns:4;
column-gap: 0;
background-color: red;
}
.cell {
min-width: 40px;
background-color: white;
float: left;
border:1px solid green;
}
<div class="container">
<div class="cell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus nibh. Proin eget tortor risus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.
</div>
<div class="cell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus nibh. Proin eget tortor risus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.
</div>
<div class="cell">
Cras ultricies ligula sed magna dictum porta. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla quis lorem ut libero malesuada feugiat. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Sed porttitor lectus nibh.
</div>
<div class="cell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus nibh. Proin eget tortor risus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.
</div>
<div class="cell">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus nibh. Proin eget tortor risus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.</div>
<div class="cell">
Cras ultricies ligula sed magna dictum porta. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla quis lorem ut libero malesuada feugiat. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Sed porttitor lectus nibh.
</div>
<div class="cell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus nibh. Proin eget tortor risus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.
</div>
<div class="cell">
Cras ultricies ligula sed magna dictum porta. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla quis lorem ut libero malesuada feugiat. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Sed porttitor lectus nibh.
</div>
</div>
You can do it with the CSS columns:
.container {
column-count: 4; /* each 25% */
column-gap: 5px; /* horizontal gap, adjust to your needs */
}
.cell {
margin-bottom: 5px; /* for better presentation, adjust to your needs */
page-break-inside: avoid; /* mandatory */
break-inside: avoid-column; /* mandatory */
background: Lavender;
}
<div class="container">
<div class="cell">
Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit.
</div>
<div class="cell">
Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit.
</div>
<div class="cell">
Curabitur aliquet quam id dui posuere blandit. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="cell">
Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit.
</div>
<div class="cell">
Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit.
</div>
<div class="cell">
Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit.
</div>
<div class="cell">
Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit.
</div>
</div>
<span style='float: left; margin: 10px; width: 60px; display: block;'>
<img style='border: 1px solid #FFF; width: 61px; height: 80px;' src='images/profilePhoto/thumbs/86.jpg'>
<br>
<a href='profil.php?id=86'>Megan F.</a>
<br><br>
</span>
<div style='margin-left: 90px;'>
<h1>(inget ämne)</h1>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla urna eget urna euismod aliquet. Duis porta volutpat blandit. Phasellus bibendum bibendum porta. Nunc molestie tristique leo, sed euismod orci ultricies vitae. Mauris non libero a leo ultricies laoreet. Suspendisse luctus urna vel sapien tristique vitae semper nulla eleifend. Integer congue aliquam pharetra. Phasellus diam neque, tincidunt vel elementum vel, ornare sit amet mi. Nulla tincidunt purus in odio vulputate mollis. Nunc urna odio, rutrum eu ultricies a, facilisis ullamcorper nunc. In purus velit, varius vel laoreet eu, tincidunt non purus. Nulla facilisi. Sed ac lectus nibh. Praesent non velit nibh.<br />
...
</div>
This is what i have right now for this:
How can i apply text there like showed in the image?
If you want the new text to be vertically aligned with the second paragraph, then you add a
<div style="clear: both"></div>
before the second paragraph, and then do another float like you did originally.
If you just want to float a whole panel at the left, then you would just add it to the floated content. But looks like your new text is vertically aligned with the second paragraph, so the method listed above would be it.