I want to place my paragraph text on the right side of an image, just like in this mockup:
https://imgur.com/a/ArDIEqH
I aligned the text by setting the display of the parent to flex and it now looks like this:
https://imgur.com/a/wECtedW
The text is dropping on a new line on each word, how can I make it look like in the mockup?
.zodiac-info {
width: 500px;
}
.blog-entry-name {
padding: 0px;
}
.zodiac-paragraph {
color: black;
width: 200px;
}
.blog-entry-container {
margin-top: 100px;
margin-left: 250px;
}
.blog-entry {
display: flex;
}
```
<section class="zodiac-info">
<div class="blog-entry-container">
<input type="search" class="search-box fa fa-search" placeholder="  search">
<div class="blog-entry">
<img src="../assets/images/test-image.jpg" alt="test image" class="test-img">
<p class="zodiac-paragraph">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="blog-entry">
<img src="../assets/images/test-image.jpg" alt="test image" class="test-img">
<p class="zodiac-paragraph">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="blog-entry">
<img src="../assets/images/test-image.jpg" alt="test image" class="test-img">
<p class="zodiac-paragraph">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</section>
I just update your code with few CSS changes. Try this I hope it'll help you out. Thanks
.zodiac-info {
margin: 100px auto 0;
padding: 0 20px;
}
.blog-entry {
display: flex;
margin-top: 20px;
}
.blog-entry img {
flex-shrink: 0;
height: 120px;
width: 120px;
}
.blog-detail {
color: black;
margin-left: 10px;
}
.blog-detail label {
font-weight: bold;
}
.blog-detail p {
margin: 5px 0;
}
.blog-detail small {
font-style: italic;
}
<section class="zodiac-info">
<div class="blog-entry-container">
<input type="search" class="search-box fa fa-search" placeholder="  search">
<div class="blog-entry">
<img src="https://i.stack.imgur.com/o6bz4.gif" alt="test image" class="test-img">
<div class="blog-detail">
<label>Heading 1</label>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<small>Date: 02-04-2019</small>
</div>
</div>
<div class="blog-entry">
<img src="https://i.stack.imgur.com/o6bz4.gif" alt="test image" class="test-img">
<div class="blog-detail">
<label>Heading 1</label>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<small>Date: 02-04-2019</small>
</div>
</div>
<div class="blog-entry">
<img src="https://i.stack.imgur.com/o6bz4.gif" alt="test image" class="test-img">
<div class="blog-detail">
<label>Heading 1</label>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<small>Date: 02-04-2019</small>
</div>
</div>
</div>
</section>
use float: left and float: right to move the text and image all the way.
Since both the image and the paragraph are in the same div, you can use absolute and relative positioning.
.blog-entry {
position: relative;
}
.zodiac-paragraph, .test-img {
position: absolute;
}
Try to look at this codepen if this solves your prob.
https://codepen.io/jls314/pen/EJjVzK
You can use css grid or flexbox. You use flexbox, so:
.zodiac-info {
display: flex;
justify-content: center;
}
.blog-entry {
display: flex;
align-items: center;
padding: 1rem 0;
}
.blog-entry-name {
padding: 0px;
}
.zodiac-paragraph {
color: black;
}
.blog-entry img {
width: 180px;
height: 180px;
min-height: 180px;
object-fit: cover;
flex: 1;
}
p.zodiac-paragraph {
padding: 0 0 0 1rem;
margin: 0;
}
.blog-entry-container {
display: flex;
flex-direction: column;
}
<section class="zodiac-info">
<div class="blog-entry-container">
<input type="search" class="search-box fa fa-search" placeholder="  search">
<div class="blog-entry">
<img src="https://cdn-images-1.medium.com/max/1200/1*eXIBeNlLhz4Pe6vDrYkXLQ.png" alt="test image" class="test-img"></p>
<p class="zodiac-paragraph">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="blog-entry">
<img src="https://cdn-images-1.medium.com/max/1200/1*eXIBeNlLhz4Pe6vDrYkXLQ.png" alt="test image" class="test-img">
<p class="zodiac-paragraph">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="blog-entry">
<img src="https://cdn-images-1.medium.com/max/1200/1*eXIBeNlLhz4Pe6vDrYkXLQ.png" alt="test image" class="test-img">
<p class="zodiac-paragraph">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum..</p>
</div>
</div>
</section>
You can try this
.blog-entry{display: in-line-block}
Related
I am trying to have a proper-sized card with the horizontal scrollbar in a paper. I've been trying with 'overflow', however, it does not work in this case?
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import Paper from '#material-ui/core/Paper';
import Grid from '#material-ui/core/Grid';
import Cards from './Cards';
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
paper: {
padding: theme.spacing(2),
color: theme.palette.text.secondary,
maxWidth: '100%',
overflowX: 'auto',
display: "flex",
flexDirection: "row",
justifyContent: "center"
},
}));
const Dashboard = () => {
const classes = useStyles();
return (
<div className={classes.root}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Paper className={classes.paper}>
<Cards />
<Cards />
<Cards />
<Cards />
<Cards />
<Cards />
<Cards />
<Cards />
<Cards />
</Paper>
</Grid>
</Grid>
</div>
);
};
export default Dashboard;
This resulted in squeezing cards into a width of 100%. How can I make this scrollable?
The default value of your card is flex-shrink: 1 (Not enough space available? shrink)
The flex-shrink: If the size of all flex items is larger than the flex container, items
shrink to fit according to flex-shrink. https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink
Next, by default flex-basis is auto + flex-wrap: nowrap; /* Default value */ Items laid out in a single line.
The output:
2 cards => 2 cols.
9 cards => 9 "Squeeze" cols (Like your "buggy" screenshot).
"Squeeze" = No overflow content = No scrollbar.
Shrink Example:
.flex_grid{
display: flex;
overflow-x: scroll;
}
.card{
border: 1px solid gray;
height: 100px;
}
<section class="flex_grid">
<div class="card"><h1>1</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="card"><h1>2</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="card"><h1>3</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="card"><h1>4</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="card"><h1>5</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="card"><h1>6</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</section>
One solution
Add flex-basis (Responsive => use %).
For example:
flex-basis: 40%; (Or use auto - related of the content inside the card).
Disable shrink by flex-shrink: 0;
Working example:
.flex_grid{
display: flex;
overflow-x: scroll;
}
.card{
border: 1px solid gray;
flex-basis: 40%;
height: 100px;
flex-shrink: 0;
}
<section class="flex_grid">
<div class="card"><h1>1</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="card"><h1>2</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="card"><h1>3</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</section>
.aboutus {
width: 100%;
min-height: 334px;
}
.aboutus__content {
z-index: 1;
position: relative;
color: orange;
max-width: 1800px;
margin: 0 auto;
}
.aboutus__imageWrapper {
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
position: relative;
}
img {
position: absolute;
height: auto;
width: 100%;
z-index: 0;
bottom: 0;
right: 0;
}
<div class='wrapper'>
<div class='aboutus'>
<div class='aboutus__content'>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div class='aboutus__imageWrapper'>
<picture>
<!-- Media query images go here -->
<img src='https://www.visitmosselbay.co.za/wp-content/gallery/mossel-bay-photo-gallery/Mossel-Bay-Cape-St-Blaize-Lighthouse.jpg'>
</picture>
</div>
</div>
</div>
The idea is to make the image match the height of aboutus container. While the aboutus container height has min-height and also can be expanded but aboutus__content container.
I am a bit confused why aboutus__imageWrapper with height: 100% doesn't expand to the height of it's parent aboutus
Remove overflow:hidden from this rule:
.aboutus__imageWrapper {
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
position: relative;
}
I have an article that contains a title (h4), an image that is floated left and some text.
When the title precedes the image in the HTML declaration, it is displayed above the image.
When the image precedes the title, the title is displayed to the right of the image.
Here is the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img {
margin: 1em;
border: 1px solid black;
float: left;
}
</style>
</head>
<body>
<article id="a1">
<h4>Title is above image</h4>
<img src="images/about.jpg" alt="about" /> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</article>
<hr/>
<article id="a2">
<img src="images/about.jpg" alt="about" />
<h4>Title is to the right of image</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
</article>
</body>
</html>
The HMTL above is rendered as can be seen below:
How can I use CSS to render the title to the right of the image when the title precedes the image in HTML ? I am looking for a solution where the HMTL is not changed in any way.
The natural thing would be to change the markup - here is a clumsy hack using positioning and negative margins (assuming the image width is fixed) - see demo below:
article {
clear: both; /* clear the float after each article - this is important */
}
img {
margin: 1em;
border: 1px solid black;
float: left;
}
#a1 {
padding-top: 30px; /* put some space at the top */
}
#a1 h4 {
position: absolute; /* positione the title in that space*/
left: 240px;
top: -10px;
}
#a1 img {
margin-top: -15px; /* shift the image to the top */
}
<article id="a1">
<h4>Title is above image</h4>
<img src="https://via.placeholder.com/200" alt="about" /> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</article>
<hr/>
<article id="a2">
<img src="https://via.placeholder.com/200" alt="about" />
<h4>Title is to the right of image</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
</article>
<h4> has a default display of block, which takes up the whole line. Give it the style of display: inline; and it will make the image and the text in the same line as it. Since the image has float: left;, it will automatically go to the left. However, since the text is still next to the <h4>, and a couple <br>'s to make it how you wanted.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img {
margin: 1em;
border: 1px solid black;
float: left;
}
</style>
</head>
<body>
<article id="a1">
<h4 style="display: inline;">Title is above image</h4>
<img src="images/about.jpg" alt="about" /> <br><br> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</article>
<hr/>
<article id="a2">
<img src="images/about.jpg" alt="about" />
<h4>Title is to the right of image</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
</article>
</body>
</html>
I am having an issue with the column-count CSS property.
I am using it along with media queries to make my pagesmore dynamic when going to mobile.
However I am having the issue of a large gap between my forms.
At the moment I am hard coding a height as a 'fix' but this can't be the right method.
Has anyone experienced this type of problem?
#media only screen and (min-width: 400px) {
.masonry {
column-count: 1;
}
}
#media only screen and (min-width: 700px) {
.masonry {
column-count: 2;
}
}
.masonry {
margin: 1.5em 0;
padding: 0;
column-gap: 1.5em;
font-size: .85em;
/*********Hard Coded Height Needs to be looked at***********/
/* height:940px; */
}
.item {
display: inline-block;
background: #fff;
padding: 1em;
margin: 1px 0 1.5em;
width: 100%;
box-sizing: border-box;
box-shadow: 2px 2px 2px 2px #ccc;
border: 0px;
}
.legendTitle {
font-size: 25px;
font-weight: 500;
font-family: 'Pacifico';
}
<form class="masonry">
<fieldset class="item">
<legend>
Heading1
</legend>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</fieldset>
<fieldset class="item">
<legend>
Heading2
</legend>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</fieldset>
<fieldset class="item">
<legend>
Heading3
</legend>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMakeLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like Aldus PageMakeLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</fieldset>
</form>
<form class="masonry">
<fieldset class="item">
<legend>
Heading4
</legend>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</fieldset>
<fieldset class="item">
<legend>
Heading5
</legend>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</fieldset>
<fieldset class="item">
<legend>
Heading6
</legend>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</fieldset>
</form>
JSFiddle Demo
Use display grid instead of columns and it's dense setting:
Oops, columns on wrong div - here:
html:
<div id="wrapper">
<form class="masonry">
.....
</form>
</div>
css:
/* add a wrapper div */
#wrapper {
display:grid;
/* no columns mentioned here because we put them in the #media calls at the bottom of the layout css */
grid-gap: 1.5em;
grid-auto-flow: dense;
}
.masonry {
margin: 1.5em 0;
padding: 0;
/* column-gap: 1.5em; */
font-size: .85em;
/*********Hard Coded Height Needs to be looked at***********/
/* height:940px; */
}
.item {
display: inline-block;
background: #fff;
padding: 1em;
margin: 1px 0 1.5em;
width: 100%;
box-sizing: border-box;
box-shadow: 2px 2px 2px 2px #ccc;
border: 0px;
}
.legendTitle{
font-size: 25px;
font-weight:500;
font-family: 'Pacifico';
}
#media only screen and (max-width: 699px) {
/* putting the grid columns count in the media call on the #wrapper NOT the .masonry inner div */
#wrapper {
/* column-count: 1; */
grid-template-columns:1fr;
}
}
#media only screen and (min-width: 700px) {
/* putting the grid columns count in the media call on the #wrapper NOT the .masonry inner div */
#wrapper {
/* column-count: 2; */
grid-template-columns:1fr 1fr;
}
}
updated fiddle: https://jsfiddle.net/0gtvj652/2/
fabulous website: https://gridbyexample.com/examples/example1/
How do you get the text to wrap around a div if you want the div on the bottom of a container?
I can figure out how to get the text to wrap around the div as long as its on top, but if I try and push it to the bottom of the page, the text either doesn't continue across the top of the div or the div gets pushed in front of the text.
Currently, I have a container div and then the darkened box is another div within that div.
I'm trying to create this:
You just need to work with float property.
HTML:
<div>
<img src="http://www.igta5.com/images/trailer-2-gtav-logo.jpg" alt="GTA V" />
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
CSS:
div img {
width: 240px;
float: right;
padding: 25px;
}
Play with this on jsFiddle.
Update
With pure CSS, the most that you will get is manually spacing the sides of image with absolute positioning.
The HTML:
<div class="left">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class="right">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<img src="http://www.igta5.com/images/trailer-2-gtav-logo.jpg" style="width: 240px; height: 140px;">
The CSS:
img {
position: absolute;
top: 0;
left: 50%;
margin-left: -125px;
margin-top: 60px;
}
.left, .right {
width: 49%;
}
.left {
float: left;
}
.right {
float: right;
}
.left:before, .right:before {
content: "";
width: 125px;
height: 200px;
}
.left:before {
float: right;
}
.right:before {
float: left;
}
Play with this on jsFiddle.
More information
You can find more information in this topic, on StackOverflow.
position: absolute; will get rid of ghost element space