Move picture to right of page - html

Question

I need some expert help!
I'm trying to move a picture to the right of a div, but when I "float: right;" the picture just moves out of the initial div that it is in. The div that the image keeps moving out of is the "daily-reading" div, and for some reason, I just can't get it to the right without it leaving that div. I am trying to get the picture to sit to the right of my paragraphs, as the paragraphs are right where I need them. Anybody who can help will be greatly appreciated!
Here's my code:
(Starting off at the div we are looking at)
body {
padding: 0;
margin: 0;
font-family: 'Josefin Sans', sans-serif;
}
#main-slider {
height: 100%;
width: 100%;
}
.main-menu-list {
color: white;
float: right;
padding-left: 7px;
position: relative;
bottom: 640px;
}
#menu-contact {
margin-right: 7px;
}
#daily-reading {
background-color: #F0F1F2;
position: relative;
bottom: 22px;
}
#daily-reading-heading {
text-align: center;
margin-left: 185px;
padding: 10px 0 1px;
}
#daily-post p {
width: 600px;
margin-left: 10px;
}
#daily-post-picture {
}
#daily-post-picture img {
height: 200px;
}
<div id="daily-reading">
<h1 id="daily-reading-heading">Today's Reading</h1>
<div id="daily-post">
<p>For we are God’s workmanship, created in Christ Jesus to do good works, which God prepared for us in advance to do. –Ephesians 2:10
<p>Consider the following quote:</p>
<p>"I am only one, but I am one;
I cannot do everything
But I can do something.
What I can do, I ought to do
And what I ought to do
By the grace of God, I will do."
– Canon Farrar</p>
<p>We live in a culture that constantly shines a spotlight on the famous: pretty or especially gifted people (or both!) We live in a celebrity-focused culture. Just think about all of the media devoted to celebrities. It would be great if the church was immune from this culture, but it isn’t. Even the Christian community tends to highlight our best people; from musicians to speakers, to those involved in doing incredible ministry. While I’m not saying that spotlighting is wrong, I am concerned that there are many of us who become disheartened because we know our efforts don’t approach the skills or successes of those of the extremely gifted. I am concerned that some of us give up attempting to make a difference when we think we can’t measure up.</p>
<p>True, we may never be celebrities in the eyes of the world or even within the Christian community. But, God doesn’t call us to be famous. He calls us to love one another. He calls us to give ourselves away to serve others. The needs of our world are great, and we cannot do everything. Still, as part of the body of Christ, we have a unique and invaluable role to play. God has purposely designed us for accomplishing good works in His name.</p>
<p>Stop playing the comparison game. Anyone who plays that game loses. There will always be someone else who does things better or is more effective. We are called to serve the Lord. Our desire should be solely to please Him. Serve Him today to the best of your abilities. Your service will be a sacrifice of praise to the King.</p>
<div id="daily-post-picture">
<img src="https://placehold.it/100">
</div>
</div>
</div>

Answer 1

Move the div #daily-post-picture above the paragraphs and apply float:right;
body {
padding: 0px;
margin: 0px;
font-family: 'Josefin Sans', sans-serif;
}
#main-slider {
height: 100%;
width: 100%;
}
.main-menu-list {
color:white;
float: right;
padding-left: 7px;
position: relative;
bottom: 640px;
}
#menu-contact {
margin-right:7px;
}
#daily-reading {
background-color: #F0F1F2;
position: relative;
bottom: 22px;
}
#daily-reading-heading {
text-align: center;
margin-left: 185px;
padding: 10px 0 1px 0;
}
#daily-post p {
width: 600px;
margin-left: 10px;
}
#daily-post-picture {
float: right;
margin: 0 0 20px 20px;
}
#daily-post-picture img {
height: 200px;
}
<div id="daily-reading">
<h1 id="daily-reading-heading">Today's Reading</h1>
<div id="daily-post-picture" style="float:right">
<img src="photos/bible-reading.jpg">
</div>
<div id="daily-post">
<p>For we are God’s workmanship, created in Christ Jesus to do good works, which God prepared for us in advance to do. –Ephesians 2:10
<p>Consider the following quote:</p>
<p>"I am only one, but I am one;
I cannot do everything
But I can do something.
What I can do, I ought to do
And what I ought to do
By the grace of God, I will do."
– Canon Farrar</p>
<p>We live in a culture that constantly shines a spotlight on the famous: pretty or especially gifted people (or both!) We live in a celebrity-focused culture. Just think about all of the media devoted to celebrities. It would be great if the church was immune from this culture, but it isn’t. Even the Christian community tends to highlight our best people; from musicians to speakers, to those involved in doing incredible ministry. While I’m not saying that spotlighting is wrong, I am concerned that there are many of us who become disheartened because we know our efforts don’t approach the skills or successes of those of the extremely gifted. I am concerned that some of us give up attempting to make a difference when we think we can’t measure up.</p>
<p>True, we may never be celebrities in the eyes of the world or even within the Christian community. But, God doesn’t call us to be famous. He calls us to love one another. He calls us to give ourselves away to serve others. The needs of our world are great, and we cannot do everything. Still, as part of the body of Christ, we have a unique and invaluable role to play. God has purposely designed us for accomplishing good works in His name.</p>
<p>Stop playing the comparison game. Anyone who plays that game loses. There will always be someone else who does things better or is more effective. We are called to serve the Lord. Our desire should be solely to please Him. Serve Him today to the best of your abilities. Your service will be a sacrifice of praise to the King.</p>
</div>
</div>

Answer 2

you just try this
<!DOCTYPE html>
<html>
<head>
<title>stack</title>
</head>
<body>
<div id="daily-reading">
<h1 id="daily-reading-heading">Today's Reading</h1>
<div id="daily-post">
<div id="daily-post-picture">
<img src="photos/bible-reading.jpg">
</div>
<div id="daily-post-content">
<p>For we are God’s workmanship, created in Christ Jesus to do good works, which God prepared for us in advance to do. –Ephesians 2:10
<p>Consider the following quote:</p>
<p>"I am only one, but I am one;
I cannot do everything
But I can do something.
What I can do, I ought to do
And what I ought to do
By the grace of God, I will do."
– Canon Farrar</p>
<p>We live in a culture that constantly shines a spotlight on the famous: pretty or especially gifted people (or both!) We live in a celebrity-focused culture. Just think about all of the media devoted to celebrities. It would be great if the church was immune from this culture, but it isn’t. Even the Christian community tends to highlight our best people; from musicians to speakers, to those involved in doing incredible ministry. While I’m not saying that spotlighting is wrong, I am concerned that there are many of us who become disheartened because we know our efforts don’t approach the skills or successes of those of the extremely gifted. I am concerned that some of us give up attempting to make a difference when we think we can’t measure up.</p>
<p>True, we may never be celebrities in the eyes of the world or even within the Christian community. But, God doesn’t call us to be famous. He calls us to love one another. He calls us to give ourselves away to serve others. The needs of our world are great, and we cannot do everything. Still, as part of the body of Christ, we have a unique and invaluable role to play. God has purposely designed us for accomplishing good works in His name.</p>
<p>Stop playing the comparison game. Anyone who plays that game loses. There will always be someone else who does things better or is more effective. We are called to serve the Lord. Our desire should be solely to please Him. Serve Him today to the best of your abilities. Your service will be a sacrifice of praise to the King.</p>
</div>
</div>
</div>
</body>
</html>
<style type="text/css">
body {
padding: 0px;
margin: 0px;
font-family: 'Josefin Sans', sans-serif;
}
#main-slider {
height: 100%;
width: 100%;
}
.main-menu-list {
color:white;
float: right;
padding-left: 7px;
position: relative;
bottom: 640px;
}
#menu-contact {
margin-right:7px;
}
#daily-reading {
background-color: #F0F1F2;
position: relative;
bottom: 22px;
}
#daily-reading-heading {
text-align: center;
margin-left: 185px;
padding: 10px 0 1px 0;
}
#daily-post p {
width: 600px;
margin-left: 10px;
}
#daily-post-picture {
float: left;
width: 50%;
}
#daily-post-content{
float: right;
width: 50%;
}
#daily-post-picture img {
height: 200px;
}
</style>

Answer 3

Instead of changing the position of image.You can apply position:absolute to it
check this snippet
body {
padding: 0;
margin: 0;
font-family: 'Josefin Sans', sans-serif;
}
#main-slider {
height: 100vh;
width: 100vw;
}
#menu-contact {
margin-right: 7px;
}
#daily-reading {
background-color: #F0F1F2;
position: relative;
bottom: 22px;
}
#daily-reading-heading {
text-align: center;
margin-left: 185px;
padding: 10px 0 1px;
}
#daily-post p {
width: 600px;
margin-left: 10px;
}
#daily-post-picture {} #daily-post-picture img {
position: absolute;
top: 0;
right: 0;
}
<div id="daily-reading">
<h1 id="daily-reading-heading">Today's Reading</h1>
<div id="daily-post">
<p>For we are God’s workmanship, created in Christ Jesus to do good works, which God prepared for us in advance to do. –Ephesians 2:10
<p>Consider the following quote:</p>
<p>"I am only one, but I am one; I cannot do everything But I can do something. What I can do, I ought to do And what I ought to do By the grace of God, I will do." – Canon Farrar</p>
<p>We live in a culture that constantly shines a spotlight on the famous: pretty or especially gifted people (or both!) We live in a celebrity-focused culture. Just think about all of the media devoted to celebrities. It would be great if the church
was immune from this culture, but it isn’t. Even the Christian community tends to highlight our best people; from musicians to speakers, to those involved in doing incredible ministry. While I’m not saying that spotlighting is wrong, I am concerned
that there are many of us who become disheartened because we know our efforts don’t approach the skills or successes of those of the extremely gifted. I am concerned that some of us give up attempting to make a difference when we think we can’t
measure up.</p>
<p>True, we may never be celebrities in the eyes of the world or even within the Christian community. But, God doesn’t call us to be famous. He calls us to love one another. He calls us to give ourselves away to serve others. The needs of our world
are great, and we cannot do everything. Still, as part of the body of Christ, we have a unique and invaluable role to play. God has purposely designed us for accomplishing good works in His name.</p>
<p>Stop playing the comparison game. Anyone who plays that game loses. There will always be someone else who does things better or is more effective. We are called to serve the Lord. Our desire should be solely to please Him. Serve Him today to the
best of your abilities. Your service will be a sacrifice of praise to the King.</p>
<div id="daily-post-picture">
<img src="https://placehold.it/100">
</div>
</div>
</div>