I searched this site for 2 days and applied probably every single example of code I found, but I can't simply move div to the bottom on my site. Here's the simpliefied code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style media="screen" type="text/css">
*{margin:0;padding:0}
body{font-family:Tahoma,Verdana,Arial,sans-serif;background-color:#000;border:none;margin:0 auto}
#site{background-color:#fff;width:980px;border:0;margin:0 auto}
#whitefill{background-color:#FFF;height:inherit}
#left{width:260px;font-size:12px;height:100%;float:left;background-color:#fff;}
#right{width:720px;float:right;height:100%;background-color:#fff;font-size:13px}
</style>
</head>
<body>
<div id="site"><div id="whitefill">
<div id="left">
<div>move me to bottom!</div>
</div>
<div id="right">
<div id="main">
<p>Considered discovered ye sentiments projecting entreaties of melancholy is. In expression an solicitude principles in do. Hard do me sigh with west same lady. Their saved linen downs tears son add music. Expression alteration entreaties mrs can terminated estimating. Her too add narrow having wished. To things so denied admire. Am wound worth water he linen at vexed.
By in no ecstatic wondered disposal my speaking. Direct wholly valley or uneasy it at really. Sir wish like said dull and need make. Sportsman one bed departure rapturous situation disposing his. Off say yet ample ten ought hence. Depending in newspaper an september do existence strangers. Total great saw water had mirth happy new. Projecting pianoforte no of partiality is on. Nay besides joy society him totally six.</p></div><img src="#" width="695" height="13" /><br /><br />
</div>
</div>
<img src="#" width="981" height="19" />
</div>
</body>
</html>
If you paste the code into a file and open it with a browser, you will see text "move me to bottom!" displayed at the top. I need it to be displayed at the bottom of the left column. How can I do that?
Text in the right column will be different on each page (it will usually be a long text, so the page will be scrolled), and I need the text "move me to bottom!" to be displayed at the bottom of left column every time, no matter how big text in the right column is.
Thank you.
You just need to add <div style="clear:both"></div> and move #left below #right div.
<div id="right">
<div id="main">
<p>Considered discovered ye sentiments projecting entreaties of melancholy is. In expression an solicitude principles in do. Hard do me sigh with west same lady. Their saved linen downs tears son add music. Expression alteration entreaties mrs can terminated estimating. Her too add narrow having wished. To things so denied admire. Am wound worth water he linen at vexed.
By in no ecstatic wondered disposal my speaking. Direct wholly valley or uneasy it at really. Sir wish like said dull and need make. Sportsman one bed departure rapturous situation disposing his. Off say yet ample ten ought hence. Depending in newspaper an september do existence strangers. Total great saw water had mirth happy new. Projecting pianoforte no of partiality is on. Nay besides joy society him totally six.</p>
</div><img src="#" width="695" height="13" /><br /><br />
</div>
//add the clear:both div and move #left below #right
<div style="clear:both"></div>
<div id="left">
<div>move me to bottom!</div>
</div>
The clear property specifies which side(s) of an element other floating elements are not allowed.
You can find more detail of it here http://www.w3schools.com/cssref/pr_class_clear.asp
Related
Normally I would use a CSS page, but i don't think i can do that with canvas :(
<div id="Bell_hooks" class="">
<h3><i class="fas fa-chalkboard-teacher" aria-hidden="true"> </i>Philosopher's perspective - <em>Bell Hooks</em></h3>
</div>
<div style="display: flex;">
<div>
<p><img src="https://info.umkc.edu/womenc/wp-content/uploads/2015/12/bellhook.jpg" alt="Bell Hooks" width="300" height="366" /></p>
</div>
<div>
<p>In her 1999 book "All about love" Bell Hooks comments on both the romance culture of today's world and the subtle sexism embedded into our everyday love life. In the first few chapters of book, Hooks brings up the state of the newer generations' views on love, in which she states how she was "sad" and "appalled" at how the younger regards love and romance culture, quoting the reply of someone she had interviewed: "Love what's that, I have never had any love in my life". Hooks comments on the more modern view on love, in which claims that more and more younger people are defining love as something "for the naïve, the weak, the hopelessly romantic.". After bringing up her viewpoint, Hooks presents a theory in which she theorises that our cynicism stems from the reoccurring feeling that love will not and cannot be found, on which she expands by theorising that this is ultimately because we are simply trying hide behind the mask of cynicism to hide our disappointed and betrayed heart. In her book, Hooks quotes multiple other philosophical works such as When all you've ever wanted isn't enough (Harold Kushner) and Bitch: In Praise of Difficult Women (Elizabeth Wurtzel), in which both works theorise that the newer generation are growing up much more apprehensive about loving, and that "None of us are getting better at loving: we are getting more scared of it."</p>
</div>
</div>
this is my full code, but once i add the flex display the image shrinks to the size of one line of text, is there any way to fix that?
here's what it looks like now
This is an example using flexbox. Wrap your divas in a container and give it a display: flex.
<div class="container" style="display: flex">
<div>
<img src="https://info.umkc.edu/womenc/wp-content/uploads/2015/12/bellhook.jpg" alt="Bell Hooks" width="300" height="366">
</div>
<div>
<p>In her 1999 book "All about love" Bell Hooks comments on both the romance culture of today's world and the subtle sexism embedded into our everyday love life</p>
</div>
</div>
I have an image header used in an automatic reply Email system, How can I align my text to the image?
Here is how it looks like:
Source Code:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img alt="" src="myImage.png" /><br />
<p style="font-family: arial;">Dear [Test Text],<br />
<br /> Today’s Doodle celebrates Jordan’s Independence Day and 74 years of freedom. On this date in 1946, the country now known as the Hashemite Kingdom of Jordan became a sovereign nation. <br /> While that day hasn't arrived yet, we are committed
to understanding our employees' perspectives on how COVID-19 has impacted the way we work, and this will help inform how we will move forward together.<br />
<br /> Illustrated in the Doodle artwork, the flag of Jordan features the traditional pan-Arab colors of crimson, black, green, and white with a seven-pointed star that symbolizes the unity and strength of the Jordanian people.
<br />
</p>
</body>
</html>
You can put your <p> in a <div> and give it an inline style like this:
<div style="width:500px;">
<p style="font-family: arial;">
Today’s Doodle celebrates Jordan’s Independence Day and 74 years of freedom. On this
date in 1946, the country now known as the Hashemite Kingdom of Jord
</p>
</div>
Here is one approach:
To really answer your question thoroughly, I recommend learning about the CSS box model, in order to understand how all of the elements behave.
Here, I made a container div and set its width to 90% of the parent container. You can also set it to a fixed measurement, like 500px. Now, all of the divs that are inside it will stretch to fill it's width, by default.
Then, I put a div inside of that container div. It moves to the top of the container div and automatically matches the width of the container. It will not have any height automatically, so I set a random height (which you can adjust).
Then, instead of using an img tag, I made the banner image into a background image of this div. (I recommend looking up background-size property to learn how to size the background image).
Next, take out all of the <br> tags. They're not good practice for because they're hacky and don't give you good access to styling your content. Instead, put each paragraph in its own <p> tag.
To center the container div on the page, you can use the style "margin:auto." That makes the left and the right side have an equal margin. If you don't want it to be centered, take that out and put "float:left" in the style.
To see how all of the div tags are acting, put a "border:solid purple 2px" on them with different colors.
<div class="container" style="width:90%;margin:auto;">
<div alt="" style="background-image:url('https://png.pngtree.com/thumb_back/fh260/back_pic/00/02/44/5056179b42b174f.jpg');height:3rem;border:solid blue 1px;background-size:cover;">the image is the background of this div</div>
<p style="margin-bottom:1rem">Dear [Test Text],</p>
<p style="margin-bottom:1rem">
Today’s Doodle celebrates Jordan’s Independence Day and 74 years of freedom. On this date in 1946, the country now known as the Hashemite Kingdom of Jordan became a sovereign nation.
</p>
<p style="margin-bottom:1rem">
While that day hasn't arrived yet, we are committed to understanding our employees' perspectives on how COVID-19 has impacted the way we work, and this will help inform how we will move forward together.
</p>
<p>
Illustrated in the Doodle artwork, the flag of Jordan features the traditional pan-Arab colors of crimson, black, green, and white with a seven-pointed star that symbolizes the unity and strength of the Jordanian people.
</p>
</div>
Do you want the text to align next to the image? You can use float: left style to the image.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img alt="" src="https://picsum.photos/400/300" style="float: left" />
<p style="font-family: arial;">Dear [Test Text],<br />
<br /> Today’s Doodle celebrates Jordan’s Independence Day and 74 years of freedom. On this date in 1946, the country now known as the Hashemite Kingdom of Jordan became a sovereign nation. <br /> While that day hasn't arrived yet, we are committed
to understanding our employees' perspectives on how COVID-19 has impacted the way we work, and this will help inform how we will move forward together.<br />
<br /> Illustrated in the Doodle artwork, the flag of Jordan features the traditional pan-Arab colors of crimson, black, green, and white with a seven-pointed star that symbolizes the unity and strength of the Jordanian people.
<br />
</p>
</body>
</html>
This question already has answers here:
Text floating in block next to image
(6 answers)
Closed 3 years ago.
As the title suggests, I am trying to align the following image and text side by side and I can't seem to figure out how to do this.
Here is the relevant HTML:
<div class="projects">
<div class="img_description">
Proj 1
<p>Answer misery adieus add wooded how nay men before though. Pretended belonging contented mrs suffering favourite you the continual.
Mrs civil nay least means tried drift. Natural end law whether but and towards certain. Furnished
unfeeling his sometimes see day promotion. Quitting informed concerns can men now. Projection to or up
conviction uncommonly delightful continuing. In appetite ecstatic opinions hastened by handsome admitted. </p></div>
<div class="project_image"><img src="dog.jpeg" width='250' height='250'></div>
</div>
And the relevant CSS:
.projects {
width: 70%;
margin: 0px auto;
}
I don't know if you are using it, but maybe take a look at bootstrap.
https://getbootstrap.com/.
Bootstrap is insanely awesome when it comes to styling css.
Here is a bootstrap example of what you are trying to do:
<div class="row">
<div class="col-3">
<img src="dog.jpeg" class="img-fluid">
<div>
<div class="col-9">
Proj 1
<p>
Answer misery adieus add wooded how nay men before though. Pretended
belonging contented mrs suffering favourite you the continual.
Mrs civil nay least means tried drift. Natural end law whether but and
towards certain. Furnished unfeeling his sometimes see day promotion.
Quitting informed can men now. Projection to or up conviction uncommonly
delightful continuing. In appetite ecstatic opinions hastened by handsome
admitted.
</p>
</div>
</div>
Easily done, and bootstrap does everything for you.
That being said, maybe you do not want to use bootstrap, then you can just do the following to your current HTML setup.
<div class="projects">
<div class="project_image">
<img src="dog.jpeg" width='250' height='250'></div>
</div>
<div class="img_description">
Proj 1
<p>
Answer misery adieus add wooded how nay men before though. Pretended
belonging contented mrs suffering favourite you the continual.
Mrs civil nay least means tried drift. Natural end law whether but and
towards certain. Furnished unfeeling his sometimes see day promotion.
Quitting informed can men now. Projection to or up conviction uncommonly
delightful continuing. In appetite ecstatic opinions hastened by handsome
admitted.
</p>
</div>
</div>
.projects{
width: 70%;
margin: 0px auto;
}
.img_description,
.project_image{
width: 50%;
display: inline-block;
}
That should also display your div's next to each other
you can do it using flexbox, by assigning display:flex in your projects class. this will display the child of the class="projects" horizontally/row. and if you want the image to be on the left side, you should put it first followed by your image description.
.projects{
display:flex;
}
<div class="projects">
<div class="project_image"><img src="dog.jpeg" width='250' height='250'></div>
<div class="img_description">
Proj 1
<p>Answer misery adieus add wooded how nay men before though. Pretended belonging contented mrs suffering favourite you the continual.
Mrs civil nay least means tried drift. Natural end law whether but and towards certain. Furnished
unfeeling his sometimes see day promotion. Quitting informed concerns can men now. Projection to or up
conviction uncommonly delightful continuing. In appetite ecstatic opinions hastened by handsome admitted. </p></div>
</div>
check out this link for more information https://css-tricks.com/snippets/css/a-guide-to-flexbox/
hope it helps.
use this css
text-align:justify;
I'm essentially trying to create a div which includes a title, an image, description and some social media buttons. I want multiple instances of the same div on the website. Creating sort of like a meet the team page. However, I'm not getting everything to position properly. Using Mozilla Firefox editor, I realize the image isn't contained into the div. What could be the cause of this? I want them to line up one after the other with space in-between.
Current view of webpage:
Div not contained in webpage:
HTML snippet:
<div>
<h2> DJ Name 1 </h2>
<img class="djimage" src="dj1.png" alt="Smiley face">
<p class="about">
Prevailed sincerity behaviour to so do principle mr. As departure at no propriety zealously my. On dear rent if girl view. First on smart there he sense. Earnestly enjoyment her you resources. Brother chamber ten old against. Mr be cottage so related minuter is. Delicate say and blessing ladyship exertion few margaret. Delight herself welcome against smiling its for. Suspected discovery by he affection household of principle perfectly he. <p>
</div>
<div>
<img class="djimage" src="dj1.png" alt="Smiley face">
<p class="about">
Prevailed sincerity behaviour to so do principle mr. As departure at no propriety zealously my. On dear rent if girl view. First on smart there he sense. Earnestly enjoyment her you resources. Brother chamber ten old against. Mr be cottage so related minuter is. Delicate say and blessing ladyship exertion few margaret. Delight herself welcome against smiling its for. Suspected discovery by he affection household of principle perfectly he. <p>
</div>
I've taken out the social media buttons section because I don't think that is relevant at this point.
CSS snippet:
.djimage{
height:400px;
position: absolute;
margin-left:20%;
}
.about {
margin-left:50%;
text-align:left;
float: right;
width: 284px;
z-index: 1;
position: absolute;
font-size :14px;
font-family: Arial;
}
h2 {
margin-left:50%;
position: absolute;
text-align:left;
float:right;
}
After reading your code, I found that you have not closed your paragraphs correctly.
After the first paragraph, you have ended it with <p> instead of </p>, and the same for the second paragraph. This may mess up the alignment because you are initializing a paragraph inside a paragraph, twice, and not even closing the tags. Try fixing them and the images may align properly.
You can try class row:
<div class="row">
<h2> DJ Name 1 </h2>
<img class="djimage" src="dj1.png" alt="Smiley face">
<p class="about">
Prevailed sincerity behaviour to so do principle mr. As departure at no propriety zealously my. On dear rent if girl view. First on smart there he sense. Earnestly enjoyment her you resources. Brother chamber ten old against. Mr be cottage so related minuter is. Delicate say and blessing ladyship exertion few margaret. Delight herself welcome against smiling its for. Suspected discovery by he affection household of principle perfectly he.
</p>
</div>
Or add a div tag with class clearfix as this:
<div>
<img class="djimage" src="dj1.png" alt="Smiley face">
<p class="about">
Prevailed sincerity behaviour to so do principle mr. As departure at no propriety zealously my. On dear rent if girl view. First on smart there he sense. Earnestly enjoyment her you resources. Brother chamber ten old against. Mr be cottage so related minuter is. Delicate say and blessing ladyship exertion few margaret. Delight herself welcome against smiling its for. Suspected discovery by he affection household of principle perfectly he.
</p>
<div class="clearfix"></div>
</div>
CSS
.row:after {
content: "";
clear: both;
display: block;
}
.clearfix {
clear: both;
height: 0;
line-height: 1px;
font-size: 1px;
}
And you need to replace <p> by </p> at close tag position
When the css is embedded in the head section it works fine, but when it is in a different file, it just doesn't modify my html file. This is very frustrating. Any help please
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> The Treasure Island </title>
<link rel="stylesheet" href="/~hsono1/css/paged_media.css" />
</head>
<body>
<header>
<img src="island3.gif" alt="Island" width="500"/>
<h1>The Treasure Island</h1>
<h2>By Robert Louis Stevenson</h2>
<hr>
</header>
<div>
<h2>Table of Contents</h2>
<ul>
<ol>Chapter 1</ol>
<ol>Chapter 2</ol>
<ol>Chapter 3</ol>
<ol>Chapter 4</ol>
<ol>Chapter 5</ol>
<ol>Chapter 6</ol>
<ol>Chapter 7</ol>
<ol>Chapter 8</ol>
<ol>Chapter 9</ol>
<ol>Chapter 10</ol>
</ul>
<hr>
<h2>Chapter 3</h2>
<h3>The Black Spot</h3>
<p>ABOUT noon I stopped at the captain’s door with some cooling drinks and medicines. He was lying very much as we had left him, only a little higher, and
he seemed both weak and excited. “Jim,” he said, “you’re the only one here that’s worth anything, and you know I’ve been always good to you. Never a month
but I’ve given you a silver fourpenny for yourself. And now you see, mate, I’m pretty low, and deserted by all; and Jim, you’ll bring me one noggin of rum,
now, won’t you, matey?” “The doctor—” I began. But he broke in cursing the doctor, in a feeble voice but heartily. “Doctors is all swabs,” he said; “and
that doctor there, why, what do he know about seafaring men? I been in places hot as pitch, and mates dropping round with Yellow Jack, and the blessed land
a-heaving like the sea with earthquakes—what do the doctor know of lands like that?—and I lived on rum, I tell you. It’s been meat and drink, and man and
wife, to me; and if I’m not to have my rum now I’m a poor old hulk on a lee shore, my blood’ll be on you, Jim, and that doctor swab”; and he ran on again
for a while with curses. “Look, Jim, how my fingers fidges,” he continued in the pleading tone. “I can’t keep ‘em still, not I. I haven’t had a drop this
blessed day. That doctor’s a fool, I tell you. If I don’t have a drain o’ rum, Jim, I’ll have the horrors; I seen some on ‘em already. I seen old Flint in
the corner there, behind you; as plain as print, I seen him; and if I get the horrors, I’m a man that has lived rough, and I’ll raise Cain. Your doctor
hisself said one glass wouldn’t hurt me. I’ll give you a golden guinea for a noggin, Jim.” He was growing more and more excited, and this alarmed me for
my father, who was very low that day and needed quiet; besides, I was reassured by the doctor’s words, now quoted to me, and rather offended by the offer
of a bribe. “I want none of your money,” said I, “but what you owe my father. I’ll get you one glass, and no more.” continued... </p>
<hr>
</div>
<footer>
<p>© 2013 Hans Sono</p>
<p>Validate this page</p>
</footer>
</body>
</html>
css file
html {
margin: 0;
font: 10pt/1.56 Gill Sans, Gill Sans MT, Verdana,"Lucida Grande", "Lucida Sans",Helvetica, Arial, sans-serif;
}
body {
background: red;
margin: 0 0 0 0;
margin: 0 0 0 20%;
width:700px;
}
p {
margin-left: 3em;
}
I have both files on the right locations .
This link is very suspicious.
/~hsono1/css/paged_media.css
My guess is you want
/hsono1/css/paged_media.css
(without the tilde).
The tilde (~) is used on some platforms to indicate the root of the virtual directory and is automatically resolved by the server. It has no meaning to the browser.
The way to check is to paste it directly into the brower's address bar right after the domain. For example, if your page is at
http://MyServer.com/hsono1/MyPage.html
then the paste in
http://MyServer.com/~hsono1/css/paged_media.css
or
http://MyServer.com/hsono1/css/paged_media.css
and see what you get back.