I'm working on an assignment for an intro to web programming class, and I'm trying to figure out how to wrap two different images around a paragraph on one of the pages. I want it to be kind of like
*image* paragraph paragraph
paragraph paragraph paragraph
paragraph paragraph *image*
I'm struggling on how to actually get it to work. My HTML file and my CSS file are copied and pasted below. The paragraph and images are in <div d> down below. Any help would be greatly appreciated :)
/* Project 2: Coffee Unlimited */
body {
background-image: url("../images/logo_on_door.png");
background-color: rgba(0, 0, 0, 0.3);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
color: white;
text-shadow: 2px 2px 8px black;
font-family: 'Lato', sans-serif;
}
#container {
z-index: 10;
margin: 20px 20px 20px 20px;
width: auto;
height: auto;
/* border: 1px solid #111; */
padding: 20px;
/* CSS Grid Structure */
display: grid;
grid-gap: 20px;
grid-template-columns: 150px 1fr;
grid-auto-rows: 150px 1000px;
grid-template-areas: "a b" "c d";
}
#a,
#b,
#c,
#d {
z-index: 15;
font-variant: small-caps;
}
#a {
grid-area: a;
}
#a h1 {
font-size: 1.2em;
}
#b {
grid-area: b;
}
#b h1 {
font-size: 4em;
}
#c {
grid-area: c;
}
#c ul {
text-align: center;
font-size: 1.5em;
}
#d {
grid-area: d;
}
#d h1 {
float: left;
font-size: 1.4em;
padding: 30px;
text-align: justify;
line-height: 50px;
}
#d p {
float: left;
font-size: 1.4em;
padding: 30px;
text-align: justify;
line-height: 50px;
}
/* Classes */
.middle {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<title>Project 2: Coffee Unlimited</title>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<!-- Set View Size -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Stylesheets -->
<link href="css/destyle.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<!-- Google Font(s) -->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<!-- Favicon -->
<link rel="icon" href="favicon/favicon.png" type="image/png" sizes="16x16">
</head>
<body>
<div id="container">
<div id="a" >
<h1>C o f f e e<br><br>U n l i m i t e d</h1>
</div>
<div id="b" >
<h1><u>m e n u</u></h1>
</div>
<div id="c">
<ul>
<br>
<br>
<a href="index.html">
<li>HOME</li>
</a>
<br>
<br>
<br>
<a href="menu.html">
<li>MENU</li>
</a>
<br>
<br>
<br>
<a href="locations.html">
<li>LOCATIONS</li>
</a>
</ul>
</div>
<div id="d">
<img src="images/logo_on_cup.png" style="width:400px;height:auto;">
<p>Then God said, Let the waters in the garden at the time of the sea and over the day and the lesser light to rule the day and the lesser light to rule the night - and the earth when they were created. In the day that you were naked? Have you eaten
from the tree that is upon the earth. And it was very good. And there was evening and there he put the man and for his wife, and they knew that they were created. In the day and over the birds of the trees in the garden. The earth and subdue it;
and have dominion over the night, and to separate the light Day, and the darkness he called Night. And there was no one to till it and keep it. To the woman he said, I will greatly increase your pangs in childbearing; in pain you shall bring forth
children, yet your desire shall be for signs and for seasons and for seasons and for days and years. The earth brought forth vegetation: plants yielding seed of every kind: cattle and creeping things and wild animals of the heavens and the earth
and subdue it; and have dominion over the night, and to separate the day from the garden of Eden he placed the cherubim, and a sword flaming and turning to guard the way to the tree of life.</p>
<img src="images/logo_on_cup_1.png" style="width:400px;height:auto;">
</div>
</div>
</body>
</html>CodePudding user response：
try giving the float property in the img tag like the one below
/* Project 2: Coffee Unlimited */
body {
background-image: url("../images/logo_on_door.png");
background-color: rgba(0, 0, 0, 0.3);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
color: white;
text-shadow: 2px 2px 8px black;
font-family: 'Lato', sans-serif;
}
#container {
z-index: 10;
margin: 20px 20px 20px 20px;
width: auto;
height: auto;
/* border: 1px solid #111; */
padding: 20px;
/* CSS Grid Structure */
display: grid;
grid-gap: 20px;
grid-template-columns: 150px 1fr;
grid-auto-rows: 150px 1000px;
grid-template-areas: "a b" "c d";
}
#a,
#b,
#c,
#d {
z-index: 15;
font-variant: small-caps;
}
#a {
grid-area: a;
}
#a h1 {
font-size: 1.2em;
}
#b {
grid-area: b;
}
#b h1 {
font-size: 4em;
}
#c {
grid-area: c;
}
#c ul {
text-align: center;
font-size: 1.5em;
}
#d{
max-width: 800px;
grid-items: center;
}
/* Classes */
.middle {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.left-image{
float:left;
margin : 5px;
}
.right-image{
float:right;
margin : 5px;
}<!DOCTYPE html>
<html>
<head>
<title>Project 2: Coffee Unlimited</title>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<!-- Set View Size -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Stylesheets -->
<link href="css/destyle.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<!-- Google Font(s) -->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<!-- Favicon -->
<link rel="icon" href="favicon/favicon.png" type="image/png" sizes="16x16">
</head>
<body>
<div id="container">
<div id="a" >
<h1>C o f f e e<br><br>U n l i m i t e d</h1>
</div>
<div id="b" >
<h1><u>m e n u</u></h1>
</div>
<div id="c">
<ul>
<br>
<br>
<a href="index.html">
<li>HOME</li>
</a>
<br>
<br>
<br>
<a href="menu.html">
<li>MENU</li>
</a>
<br>
<br>
<br>
<a href="locations.html">
<li>LOCATIONS</li>
</a>
</ul>
</div>
<div id="d">
<div >
<img src="https://images.unsplash.com/photo-1662913307002-ad2d32923913?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2128&q=80" style="width:200px;height:200px;">
</div>
<p>Then God said, Let the waters in the garden at the time of the sea and over the day and the lesser light to rule the day and the lesser light to rule the night - and the earth when they were created. In the day that you were naked? Have you eaten
from the tree that is upon the earth. And it was very good. And there was evening and there he put the man and for his wife, and they knew that they were created. In the day and over the birds of the trees in the garden. The earth and subdue it;
and have dominion over the night, and to separate the light Day, and the darkness he called Night. And there was no one to till it and keep it. To the woman he said, I will greatly increase your pangs in childbearing; in pain you shall bring forth
children, yet your desire shall be for signs and for seasons and for seasons and for days and years. The earth brought forth vegetation: plants yielding seed of every kind: cattle and creeping things and wild animals of the heavens and the earth
and subdue it; and have dominion over the night, and to separate the day from the garden of Eden he placed the cherubim, and a sword flaming and turning to guard the way to the tree of life.
children, yet your desire shall be for signs and for seasons and for seasons and for days and years. The earth brought forth vegetation: plants yielding seed of every kind: cattle and creeping things and wild animals of the heavens and the earth
</p>
<div >
<img src="https://images.unsplash.com/photo-1662901603057-057ff15eb6eb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" style="width:200px;height:200px;" >
</div>
</div>
</div>
</body>
</html>CodePudding user response：
Move your img tags inside p tags And add float in img class CSS. Dont forget to clear the float.
/* Project 2: Coffee Unlimited */
body {
background-image: url("../images/logo_on_door.png");
background-color: rgba(0, 0, 0, 0.3);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
color: white;
text-shadow: 2px 2px 8px black;
font-family: 'Lato', sans-serif;
}
#container {
z-index: 10;
margin: 20px 20px 20px 20px;
width: auto;
height: auto;
/* border: 1px solid #111; */
padding: 20px;
/* CSS Grid Structure */
display: grid;
grid-gap: 20px;
grid-template-columns: 150px 1fr;
grid-auto-rows: 150px 1000px;
grid-template-areas: "a b" "c d";
}
#a,
#b,
#c,
#d {
z-index: 15;
font-variant: small-caps;
}
#a {
grid-area: a;
}
#a h1 {
font-size: 1.2em;
}
#b {
grid-area: b;
}
#b h1 {
font-size: 4em;
}
#c {
grid-area: c;
}
#c ul {
text-align: center;
font-size: 1.5em;
}
#d {
grid-area: d;
}
#d h1 {
float: left;
font-size: 1.4em;
padding: 30px;
text-align: justify;
line-height: 50px;
}
#d p {
float: left;
font-size: 1.4em;
padding: 30px;
text-align: justify;
line-height: 50px;
}
/* Classes */
.middle {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.float-image {
float: left;
margin: 20px;
max-width: 60px;
}<!DOCTYPE html>
<html>
<head>
<title>Project 2: Coffee Unlimited</title>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<!-- Set View Size -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Stylesheets -->
<link href="css/destyle.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<!-- Google Font(s) -->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<!-- Favicon -->
<link rel="icon" href="favicon/favicon.png" type="image/png" sizes="16x16">
</head>
<body>
<div id="container">
<div id="a" >
<h1>C o f f e e<br><br>U n l i m i t e d</h1>
</div>
<div id="b" >
<h1><u>m e n u</u></h1>
</div>
<div id="c">
<ul>
<br>
<br>
<a href="index.html">
<li>HOME</li>
</a>
<br>
<br>
<br>
<a href="menu.html">
<li>MENU</li>
</a>
<br>
<br>
<br>
<a href="locations.html">
<li>LOCATIONS</li>
</a>
</ul>
</div>
<div id="d">
<p><img src="https://www.w3schools.com/html/pic_trulli.jpg" style="width:400px;height:auto;">Then God said, Let the waters in the garden at the time of the sea and over the day and the lesser light to rule the day and the lesser light to rule the night - and the earth when they were created. In the day that you were naked? Have you eaten
from the tree that is upon the earth. And it was very good. And there was evening and there he put the man and for his wife, and they knew that they were created. In the day and over the birds of the trees in the garden. The earth and subdue it;
and have dominion over the night, and to separate the light Day, and the darkness he called Night. And there was no one to till it and keep it. To the woman he said, I will greatly increase your pangs in childbearing; in pain you shall bring forth
children, yet your desire shall be for signs and for seasons and for seasons and for days and years. The earth brought forth vegetation: plants yielding seed of every kind: cattle and creeping things and wild animals of the heavens and the earth
and subdue it; and have dominion over the night, and to separate the day from the garden of Eden he placed the cherubim, and a sword flaming and turning to guard the way to the tree of life.<br style="clear: both;" /></p>
<img src="images/logo_on_cup_1.png" style="width:400px;height:auto;">
</div>
</div>
</body>
</html>