Last margin ignored on CSS3 columns - html

Hi im trying to make horizontally "paged" text. I.e. the container has fixed height and should include n fixed width horizontally scrolling blocks. I am using css3 columns for that. Works nicely, but ignores last margin/padding, i.e. if you scroll all the way to the right, last column is flush with edge of screen which is not obviously what I want
DEMO: https://jsfiddle.net/d1ae6uet/
#foo {
column-width: 500px;
height: 500px;
column-gap: 50px;
padding: 50px;
}
<div id="foo">
<p>
</p>
<p>
Produced by G. Fuhrman
</p>
<p>
LEAVES OF GRASS
</p>
<p>
By Walt Whitman
</p>
<p>
Come, said my soul, Such verses for my Body let us write, (for we are one,) That should I after return, Or, long, long hence, in other spheres, There to some group of mates the chants resuming, (Tallying Earth's soil, trees, winds, tumultuous waves,) Ever with pleas'd smile I may keep on, Ever and ever yet the verses owning--as, first, I here and now Signing for Soul and Body, set to them my name,
</p>
<p>
Walt Whitman
</p>
<p>
BOOK I. INSCRIPTIONS
</p>
<h2>
<a name='chapter_90'></a>
BOOK I. INSCRIPTIONS
</h2>
<p>
One's-self I sing, a simple separate person, Yet utter the word Democratic, the word En-Masse.
</p>
<p>
Of physiology from top to toe I sing, Not physiognomy alone nor brain alone is worthy for the Muse, I say the Form complete is worthier far, The Female equally with the Male I sing.
</p>
<p>
Of Life immense in passion, pulse, and power, Cheerful, for freest action form'd under the laws divine, The Modern Man I sing.
</p>
<p>
As I Ponder'd in Silence
</p>
<p>
As I ponder'd in silence, Returning upon my poems, considering, lingering long, A Phantom arose before me with distrustful aspect, Terrible in beauty, age, and power, The genius of poets of old lands, As to me directing like flame its eyes, With finger pointing to many immortal songs, And menacing voice, What singest thou? it said, Know'st thou not there is but one theme for ever-enduring bards? And that is the theme of War, the fortune of battles, The making of perfect soldiers.
</p>
<p>
Be it so, then I answer'd, I too haughty Shade also sing war, and a longer and greater one than any, Waged in my book with varying fortune, with flight, advance and retreat, victory deferr'd and wavering, (Yet methinks certain, or as good as certain, at the last,) the field the world, For life and death, for the Body and for the eternal Soul, Lo, I too am come, chanting the chant of battles, I above all promote brave soldiers.
</p>
<p>
In Cabin'd Ships at Sea
</p>
<p>
In cabin'd ships at sea, The boundless blue on every side expanding, With whistling winds and music of the waves, the large imperious waves, Or some lone bark buoy'd on the dense marine, Where joyous full of faith, spreading white sails, She cleaves the ether mid the sparkle and the foam of day, or under many a star at night, By sailors young and old haply will I, a reminiscence of the land, be read, In full rapport at last.
</p>
<p>
Here are our thoughts, voyagers' thoughts, Here not the land, firm land, alone appears, may then by them be said, The sky o'erarches here, we feel the undulating deck beneath our feet, We feel the long pulsation, ebb and flow of endless motion, The tones of unseen mystery, the vague and vast suggestions of the briny world, the liquid-flowing syllables, The perfume, the faint creaking of the cordage, the melancholy rhythm, The boundless vista and the horizon far and dim are all here, And this is ocean's poem.
</p>
<p>
Then falter not O book, fulfil your destiny, You not a reminiscence of the land alone, You too as a lone bark cleaving the ether, purpos'd I know not whither, yet ever full of faith, Consort to every ship that sails, sail you! Bear forth to them folded my love, (dear mariners, for you I fold it here in every leaf;) Speed on my book! spread your white sails my little bark athwart the imperious waves, Chant on, sail on, bear o'er the boundless blue from me to every sea, This song for mariners and all their ships.
</p>
<p>
To Foreign Lands
</p>
<p>
I heard that you ask'd for something to prove this puzzle the New World, And to define America, her athletic Democracy, Therefore I send you my poems that you behold in them what you wanted.
</p>
<p>
To a Historian
</p>
<p>
You who celebrate bygones, Who have explored the outward, the surfaces of the races, the life that has exhibited itself, Who have treated of man as the creature of politics, aggregates, rulers and priests, I, habitan of the Alleghanies, treating of him as he is in himself in his own rights, Pressing the pulse of the life that has seldom exhibited itself, (the great pride of man in himself,) Chanter of Personality, outlining what is yet to be, I project the history of the future.
</p>
<p>
To Thee Old Cause
</p>
<p>
To thee old cause! Thou peerless, passionate, good cause, Thou stern, remorseless, sweet idea, Deathless throughout the ages, races, lands, After a strange sad war, great war for thee, (I think all war through time was really fought, and ever will be really fought, for thee,) These chants for thee, the eternal march of thee.
</p>
<p>
(A war O soldiers not for itself alone, Far, far more stood silently waiting behind, now to advance in this book.)
</p>
<p>
Thou orb of many orbs! Thou seething principle! thou well-kept, latent germ! thou centre! Around the idea of thee the war revolving, With all its angry and vehement play of causes, (With vast results to come for thrice a thousand years,) These recitatives for thee,--my book and the war are one, Merged in its spirit I and mine, as the contest hinged on thee, As a wheel on its axis turns, this book unwitting to itself, Around the idea of thee.
</p>
<p>
Eidolons
</p>
<p>
I met a seer, Passing the hues and objects of the world, The fields of art and learning, pleasure, sense, To glean eidolons.
</p>
<p>
Put in thy chants said he, No more the puzzling hour nor day, nor segments, parts, put in, Put first before the rest as light for all and entrance-song of all, That of eidolons.
</p>
<p>
Ever the dim beginning, Ever the growth, the rounding of the circle, Ever the summit and the merge at last, (to surely start again,) Eidolons! eidolons!
</p>
<p>
Ever the mutable, Ever materials, changing, crumbling, re-cohering, Ever the ateliers, the factories divine, Issuing eidolons.
</p>
<p>
Lo, I or you, Or woman, man, or state, known or unknown, We seeming solid wealth, strength, beauty build, But really build eidolons.
</p>
<p>
The ostent evanescent, The substance of an artist's mood or savan's studies long, Or warrior's, martyr's, hero's toils, To fashion his eidolon.
</p>
<p>
Of every human life, (The units gather'd, posted, not a thought, emotion, deed, left out,) The whole or large or small summ'd, added up, In its eidolon.
</p>
<p>
The old, old urge, Based on the ancient pinnacles, lo, newer, higher pinnacles, From science and the modern still impell'd, The old, old urge, eidolons.
</p>
<p>
The present now and here, America's busy, teeming, intricate whirl, Of aggregate and segregate for only thence releasing, To-day's eidolons.
</p>
<p>
These with the past, Of vanish'd lands, of all the reigns of kings across the sea, Old conquerors, old campaigns, old sailors' voyages, Joining eidolons.
</p>
<p>
Densities, growth, facades, Strata of mountains, soils, rocks, giant trees, Far-born, far-dying, living long, to leave, Eidolons everlasting.
</p>
<p>
Exalte, rapt, ecstatic, The visible but their womb of birth, Of orbic tendencies to shape and shape and shape, The mighty earth-eidolon.
</p>
<p>
All space, all time, (The stars, the terrible perturbations of the suns, Swelling, collapsing, ending, serving their longer, shorter use,) Fill'd with eidolons only.
</p>
<p>
The noiseless myriads, The infinite oceans where the rivers empty, The separate countless free identities, like eyesight, The true realities, eidolons.
</p>
<p>
Not this the world, Nor these the universes, they the universes, Purport and end, ever the permanent life of life, Eidolons, eidolons.
</p>
<p>
Beyond thy lectures learn'd professor, Beyond thy telescope or spectroscope observer keen, beyond all mathematics, Beyond the doctor's surgery, anatomy, beyond the chemist with his chemistry, The entities of entities, eidolons.
</p>
<p>
Unfix'd yet fix'd, Ever shall be, ever have been and are, Sweeping the present to the infinite future, Eidolons, eidolons, eidolons.
</p>
<p>
The prophet and the bard, Shall yet maintain themselves, in higher stages yet, Shall mediate to the Modern, to Democracy, interpret yet to them, God and eidolons.
</p>
<p>
And thee my soul, Joys, ceaseless exercises, exaltations, Thy yearning amply fed at last, prepared to meet, Thy mates, eidolons.
</p>
<p>
Thy body permanent, The body lurking there within thy body, The only purport of the form thou art, the real I myself, An image, an eidolon.
</p>
<p>
Thy very songs not in thy songs, No special strains to sing, none for itself, But from the whole resulting, rising at last and floating, A round full-orb'd eidolon.
</p>
<p>
For Him I Sing
</p>
<p>
For him I sing, I raise the present on the past, (As some perennial tree out of its roots, the present on the past,) With time and space I him dilate and fuse the immortal laws, To make himself by them the law unto himself.
</p>
<p>
When I Read the Book
</p>
<p>
When I read the book, the biography famous, And is this then (said I) what the author calls a man's life? And so will some one when I am dead and gone write my life? (As if any man really knew aught of my life, Why even I myself I often think know little or nothing of my real life, Only a few hints, a few diffused faint clews and indirections I seek for my own use to trace out here.)
</p>
<p>
Beginning My Studies
</p>
<p>
Beginning my studies the first step pleas'd me so much, The mere fact consciousness, these forms, the power of motion, The least insect or animal, the senses, eyesight, love, The first step I say awed me and pleas'd me so much, I have hardly gone and hardly wish'd to go any farther, But stop and loiter all the time to sing it in ecstatic songs.
</p>
<p>
Beginners
</p>
<p>
How they are provided for upon the earth, (appearing at intervals,) How dear and dreadful they are to the earth, How they inure to themselves as much as to any--what a paradox appears their age, How people respond to them, yet know them not, How there is something relentless in their fate all times, How all times mischoose the objects of their adulation and reward, And how the same inexorable price must still be paid for the same great purchase.
</p>
<p>
To the States
</p>
<p>
To the States or any one of them, or any city of the States, Resist much, obey little, Once unquestioning obedience, once fully enslaved, Once fully enslaved, no nation, state, city of this earth, ever afterward resumes its liberty.
</p>
<p>
On Journeys Through the States
</p>
<p>
On journeys through the States we start, (Ay through the world, urged by these songs, Sailing henceforth to every land, to every sea,) We willing learners of all, teachers of all, and lovers of all.
</p>
<p>
We have watch'd the seasons dispensing themselves and passing on, And have said, Why should not a man or woman do as much as the seasons, and effuse as much?
</p>
<p>
We dwell a while in every city and town, We pass through Kanada, the North-east, the vast valley of the Mississippi, and the Southern States, We confer on equal terms with each of the States, We make trial of ourselves and invite men and women to hear, We say to ourselves, Remember, fear not, be candid, promulge the body and the soul, Dwell a while and pass on, be copious, temperate, chaste, magnetic, And what you effuse may then return as the seasons return, And may be just as much as the seasons.
</p>
<p>
To a Certain Cantatrice
</p>
<p>
Here, take this gift, I was reserving it for some hero, speaker, or general, One who should serve the good old cause, the great idea, the progress and freedom of the race, Some brave confronter of despots, some daring rebel; But I see that what I was reserving belongs to you just as much as to any.
</p>
<p>
Me Imperturbe
</p>
<p>
Me imperturbe, standing at ease in Nature, Master of all or mistress of all, aplomb in the midst of irrational things, Imbued as they, passive, receptive, silent as they, Finding my occupation, poverty, notoriety, foibles, crimes, less important than I thought, Me toward the Mexican sea, or in the Mannahatta or the Tennessee, or far north or inland, A river man, or a man of the woods or of any farm-life of these States or of the coast, or the lakes or Kanada, Me wherever my life is lived, O to be self-balanced for contingencies, To confront night, storms, hunger, ridicule, accidents, rebuffs, as the trees and animals do.
</p>
<p>
Savantism
</p>
<p>
Thither as I look I see each result and glory retracing itself and nestling close, always obligated, Thither hours, months, years--thither trades, compacts, establishments, even the most minute, Thither every-day life, speech, utensils, politics, persons, estates; Thither we also, I with my leaves and songs, trustful, admirant, As a father to his father going takes his children along with him.
</p>
</div>

You can simply add margin to last child like this:
#foo :last-child {
margin-right: 50px;
}
And here is the working fiddle: https://jsfiddle.net/d1ae6uet/2/

You would want to put some padding on the text itself, by applying it to the p tag.
#foo {
column-width: 500px;
height: 500px;
column-gap: 50px;
padding: 50px;
}
#foo > p {
padding-right: 50px;
}
<div id="foo">
<p>
</p>
<p>
Produced by G. Fuhrman
</p>
<p>
LEAVES OF GRASS
</p>
<p>
By Walt Whitman
</p>
<p>
Come, said my soul, Such verses for my Body let us write, (for we are one,) That should I after return, Or, long, long hence, in other spheres, There to some group of mates the chants resuming, (Tallying Earth's soil, trees, winds, tumultuous waves,) Ever with pleas'd smile I may keep on, Ever and ever yet the verses owning--as, first, I here and now Signing for Soul and Body, set to them my name,
</p>
<p>
Walt Whitman
</p>
<p>
BOOK I. INSCRIPTIONS
</p>
<h2>
<a name='chapter_90'></a>
BOOK I. INSCRIPTIONS
</h2>
<p>
One's-self I sing, a simple separate person, Yet utter the word Democratic, the word En-Masse.
</p>
<p>
Of physiology from top to toe I sing, Not physiognomy alone nor brain alone is worthy for the Muse, I say the Form complete is worthier far, The Female equally with the Male I sing.
</p>
<p>
Of Life immense in passion, pulse, and power, Cheerful, for freest action form'd under the laws divine, The Modern Man I sing.
</p>
<p>
As I Ponder'd in Silence
</p>
<p>
As I ponder'd in silence, Returning upon my poems, considering, lingering long, A Phantom arose before me with distrustful aspect, Terrible in beauty, age, and power, The genius of poets of old lands, As to me directing like flame its eyes, With finger pointing to many immortal songs, And menacing voice, What singest thou? it said, Know'st thou not there is but one theme for ever-enduring bards? And that is the theme of War, the fortune of battles, The making of perfect soldiers.
</p>
<p>
Be it so, then I answer'd, I too haughty Shade also sing war, and a longer and greater one than any, Waged in my book with varying fortune, with flight, advance and retreat, victory deferr'd and wavering, (Yet methinks certain, or as good as certain, at the last,) the field the world, For life and death, for the Body and for the eternal Soul, Lo, I too am come, chanting the chant of battles, I above all promote brave soldiers.
</p>
<p>
In Cabin'd Ships at Sea
</p>
<p>
In cabin'd ships at sea, The boundless blue on every side expanding, With whistling winds and music of the waves, the large imperious waves, Or some lone bark buoy'd on the dense marine, Where joyous full of faith, spreading white sails, She cleaves the ether mid the sparkle and the foam of day, or under many a star at night, By sailors young and old haply will I, a reminiscence of the land, be read, In full rapport at last.
</p>
<p>
Here are our thoughts, voyagers' thoughts, Here not the land, firm land, alone appears, may then by them be said, The sky o'erarches here, we feel the undulating deck beneath our feet, We feel the long pulsation, ebb and flow of endless motion, The tones of unseen mystery, the vague and vast suggestions of the briny world, the liquid-flowing syllables, The perfume, the faint creaking of the cordage, the melancholy rhythm, The boundless vista and the horizon far and dim are all here, And this is ocean's poem.
</p>
<p>
Then falter not O book, fulfil your destiny, You not a reminiscence of the land alone, You too as a lone bark cleaving the ether, purpos'd I know not whither, yet ever full of faith, Consort to every ship that sails, sail you! Bear forth to them folded my love, (dear mariners, for you I fold it here in every leaf;) Speed on my book! spread your white sails my little bark athwart the imperious waves, Chant on, sail on, bear o'er the boundless blue from me to every sea, This song for mariners and all their ships.
</p>
<p>
To Foreign Lands
</p>
<p>
I heard that you ask'd for something to prove this puzzle the New World, And to define America, her athletic Democracy, Therefore I send you my poems that you behold in them what you wanted.
</p>
<p>
To a Historian
</p>
<p>
You who celebrate bygones, Who have explored the outward, the surfaces of the races, the life that has exhibited itself, Who have treated of man as the creature of politics, aggregates, rulers and priests, I, habitan of the Alleghanies, treating of him as he is in himself in his own rights, Pressing the pulse of the life that has seldom exhibited itself, (the great pride of man in himself,) Chanter of Personality, outlining what is yet to be, I project the history of the future.
</p>
<p>
To Thee Old Cause
</p>
<p>
To thee old cause! Thou peerless, passionate, good cause, Thou stern, remorseless, sweet idea, Deathless throughout the ages, races, lands, After a strange sad war, great war for thee, (I think all war through time was really fought, and ever will be really fought, for thee,) These chants for thee, the eternal march of thee.
</p>
<p>
(A war O soldiers not for itself alone, Far, far more stood silently waiting behind, now to advance in this book.)
</p>
<p>
Thou orb of many orbs! Thou seething principle! thou well-kept, latent germ! thou centre! Around the idea of thee the war revolving, With all its angry and vehement play of causes, (With vast results to come for thrice a thousand years,) These recitatives for thee,--my book and the war are one, Merged in its spirit I and mine, as the contest hinged on thee, As a wheel on its axis turns, this book unwitting to itself, Around the idea of thee.
</p>
<p>
Eidolons
</p>
<p>
I met a seer, Passing the hues and objects of the world, The fields of art and learning, pleasure, sense, To glean eidolons.
</p>
<p>
Put in thy chants said he, No more the puzzling hour nor day, nor segments, parts, put in, Put first before the rest as light for all and entrance-song of all, That of eidolons.
</p>
<p>
Ever the dim beginning, Ever the growth, the rounding of the circle, Ever the summit and the merge at last, (to surely start again,) Eidolons! eidolons!
</p>
<p>
Ever the mutable, Ever materials, changing, crumbling, re-cohering, Ever the ateliers, the factories divine, Issuing eidolons.
</p>
<p>
Lo, I or you, Or woman, man, or state, known or unknown, We seeming solid wealth, strength, beauty build, But really build eidolons.
</p>
<p>
The ostent evanescent, The substance of an artist's mood or savan's studies long, Or warrior's, martyr's, hero's toils, To fashion his eidolon.
</p>
<p>
Of every human life, (The units gather'd, posted, not a thought, emotion, deed, left out,) The whole or large or small summ'd, added up, In its eidolon.
</p>
<p>
The old, old urge, Based on the ancient pinnacles, lo, newer, higher pinnacles, From science and the modern still impell'd, The old, old urge, eidolons.
</p>
<p>
The present now and here, America's busy, teeming, intricate whirl, Of aggregate and segregate for only thence releasing, To-day's eidolons.
</p>
<p>
These with the past, Of vanish'd lands, of all the reigns of kings across the sea, Old conquerors, old campaigns, old sailors' voyages, Joining eidolons.
</p>
<p>
Densities, growth, facades, Strata of mountains, soils, rocks, giant trees, Far-born, far-dying, living long, to leave, Eidolons everlasting.
</p>
<p>
Exalte, rapt, ecstatic, The visible but their womb of birth, Of orbic tendencies to shape and shape and shape, The mighty earth-eidolon.
</p>
<p>
All space, all time, (The stars, the terrible perturbations of the suns, Swelling, collapsing, ending, serving their longer, shorter use,) Fill'd with eidolons only.
</p>
<p>
The noiseless myriads, The infinite oceans where the rivers empty, The separate countless free identities, like eyesight, The true realities, eidolons.
</p>
<p>
Not this the world, Nor these the universes, they the universes, Purport and end, ever the permanent life of life, Eidolons, eidolons.
</p>
<p>
Beyond thy lectures learn'd professor, Beyond thy telescope or spectroscope observer keen, beyond all mathematics, Beyond the doctor's surgery, anatomy, beyond the chemist with his chemistry, The entities of entities, eidolons.
</p>
<p>
Unfix'd yet fix'd, Ever shall be, ever have been and are, Sweeping the present to the infinite future, Eidolons, eidolons, eidolons.
</p>
<p>
The prophet and the bard, Shall yet maintain themselves, in higher stages yet, Shall mediate to the Modern, to Democracy, interpret yet to them, God and eidolons.
</p>
<p>
And thee my soul, Joys, ceaseless exercises, exaltations, Thy yearning amply fed at last, prepared to meet, Thy mates, eidolons.
</p>
<p>
Thy body permanent, The body lurking there within thy body, The only purport of the form thou art, the real I myself, An image, an eidolon.
</p>
<p>
Thy very songs not in thy songs, No special strains to sing, none for itself, But from the whole resulting, rising at last and floating, A round full-orb'd eidolon.
</p>
<p>
For Him I Sing
</p>
<p>
For him I sing, I raise the present on the past, (As some perennial tree out of its roots, the present on the past,) With time and space I him dilate and fuse the immortal laws, To make himself by them the law unto himself.
</p>
<p>
When I Read the Book
</p>
<p>
When I read the book, the biography famous, And is this then (said I) what the author calls a man's life? And so will some one when I am dead and gone write my life? (As if any man really knew aught of my life, Why even I myself I often think know little or nothing of my real life, Only a few hints, a few diffused faint clews and indirections I seek for my own use to trace out here.)
</p>
<p>
Beginning My Studies
</p>
<p>
Beginning my studies the first step pleas'd me so much, The mere fact consciousness, these forms, the power of motion, The least insect or animal, the senses, eyesight, love, The first step I say awed me and pleas'd me so much, I have hardly gone and hardly wish'd to go any farther, But stop and loiter all the time to sing it in ecstatic songs.
</p>
<p>
Beginners
</p>
<p>
How they are provided for upon the earth, (appearing at intervals,) How dear and dreadful they are to the earth, How they inure to themselves as much as to any--what a paradox appears their age, How people respond to them, yet know them not, How there is something relentless in their fate all times, How all times mischoose the objects of their adulation and reward, And how the same inexorable price must still be paid for the same great purchase.
</p>
<p>
To the States
</p>
<p>
To the States or any one of them, or any city of the States, Resist much, obey little, Once unquestioning obedience, once fully enslaved, Once fully enslaved, no nation, state, city of this earth, ever afterward resumes its liberty.
</p>
<p>
On Journeys Through the States
</p>
<p>
On journeys through the States we start, (Ay through the world, urged by these songs, Sailing henceforth to every land, to every sea,) We willing learners of all, teachers of all, and lovers of all.
</p>
<p>
We have watch'd the seasons dispensing themselves and passing on, And have said, Why should not a man or woman do as much as the seasons, and effuse as much?
</p>
<p>
We dwell a while in every city and town, We pass through Kanada, the North-east, the vast valley of the Mississippi, and the Southern States, We confer on equal terms with each of the States, We make trial of ourselves and invite men and women to hear, We say to ourselves, Remember, fear not, be candid, promulge the body and the soul, Dwell a while and pass on, be copious, temperate, chaste, magnetic, And what you effuse may then return as the seasons return, And may be just as much as the seasons.
</p>
<p>
To a Certain Cantatrice
</p>
<p>
Here, take this gift, I was reserving it for some hero, speaker, or general, One who should serve the good old cause, the great idea, the progress and freedom of the race, Some brave confronter of despots, some daring rebel; But I see that what I was reserving belongs to you just as much as to any.
</p>
<p>
Me Imperturbe
</p>
<p>
Me imperturbe, standing at ease in Nature, Master of all or mistress of all, aplomb in the midst of irrational things, Imbued as they, passive, receptive, silent as they, Finding my occupation, poverty, notoriety, foibles, crimes, less important than I thought, Me toward the Mexican sea, or in the Mannahatta or the Tennessee, or far north or inland, A river man, or a man of the woods or of any farm-life of these States or of the coast, or the lakes or Kanada, Me wherever my life is lived, O to be self-balanced for contingencies, To confront night, storms, hunger, ridicule, accidents, rebuffs, as the trees and animals do.
</p>
<p>
Savantism
</p>
<p>
Thither as I look I see each result and glory retracing itself and nestling close, always obligated, Thither hours, months, years--thither trades, compacts, establishments, even the most minute, Thither every-day life, speech, utensils, politics, persons, estates; Thither we also, I with my leaves and songs, trustful, admirant, As a father to his father going takes his children along with him.
</p>
</div>

Related

How to setup the text?

I am making a lyrics website where the lyrics are printed line by line but I want the text to be like this:-
but it comes out like this:-
So how do I set it up like that???
Here is my code for the lyrics:-
<html>
<head>
<title>Lyrics of We will we will rock you by Queen</title>
</head>
<body>
<h2 style="font-family: Arial">
Lyics of We will we will rock you by Queen (Link to the official video at the bottom of the page)
</h2>
<p style="font-family: Arial">
The Lyics Are:-
</p>
<p style="font-family: Arial">
Buddy, you're a boy, make a big noise
Playing in the street, gonna be a big man someday
You got mud on your face, you big disgrace
Kicking your can all over the place, singin'
We will, we will rock you
We will, we will rock you
Buddy, you're a young man, hard man
Shouting in the street, gonna take on the world someday
You got blood on your face, you big disgrace
Waving your banner all over the place
We will, we will rock you, sing it!
We will, we will rock you, yeah
Buddy, you're an old man, poor man
Pleading with your eyes, gonna get you some peace someday
You got mud on your face, big disgrace
Somebody better put you back into your place, do it!
We will, we will rock you, yeah, yeah, come on
We will, we will rock you, alright, louder!
We will, we will rock you, one more time
We will, we will rock you
Yeah
</p>
<a style="font-family: Arial" href="https://www.youtube.com/watch?v=-tJYN-eG1zk">The offical video of the song</a>
<p style="font-family: Arial" >Copyright © 2022 Manik Sharma (THEOP05)</p>
</body>
</html>
HTML automatically removes all white spaces. That’s why it’s not working. To make it work you need to use <pre> tag. This tag keeps the original formatting the author did within it.
<html>
<head>
<title>Lyrics of We will we will rock you by Queen</title>
</head>
<body>
<h2 style="font-family: Arial">
Lyics of We will we will rock you by Queen (Link to the official video at the bottom of the page)
</h2>
<p style="font-family: Arial">
The Lyics Are:-
</p>
<pre style="font-family: Arial">
Buddy, you're a boy, make a big noise
Playing in the street, gonna be a big man someday
You got mud on your face, you big disgrace
Kicking your can all over the place, singin'
We will, we will rock you
We will, we will rock you
Buddy, you're a young man, hard man
Shouting in the street, gonna take on the world someday
You got blood on your face, you big disgrace
Waving your banner all over the place
We will, we will rock you, sing it!
We will, we will rock you, yeah
Buddy, you're an old man, poor man
Pleading with your eyes, gonna get you some peace someday
You got mud on your face, big disgrace
Somebody better put you back into your place, do it!
We will, we will rock you, yeah, yeah, come on
We will, we will rock you, alright, louder!
We will, we will rock you, one more time
We will, we will rock you
Yeah
</pre>
<a style="font-family: Arial" href="https://www.youtube.com/watch?v=-tJYN-eG1zk">The offical video of the song</a>
<p style="font-family: Arial" >Copyright © 2022 Manik Sharma (THEOP05)</p>
</body>
</html>

Removing tags from a field in an XML file

I have an XML file that looks like this:
<?xml version="1.0" encoding="utf-8"?>
<posts>
<row Id="1" PostTypeId="1" AcceptedAnswerId="8" CreationDate="2012-12-11T20:37:08.823" Score="67" ViewCount="17934" Body="<p>Assuming the world in the One Piece universe is round, then there is not really a beginning or an end of the Grand Line.</p>
<p>The Straw Hats started out from the first half and are now sailing across the second half.</p>
<p>Wouldn't it have been quicker to set sail in the opposite direction from where they started? </p>
" OwnerUserId="21" LastEditorUserId="1398" LastEditDate="2015-04-17T19:06:38.957" LastActivityDate="2015-05-26T12:50:40.920" Title="The treasure in One Piece is at the end of the Grand Line. But isn't that the same as the beginning?" Tags="<one-piece>" AnswerCount="5" CommentCount="0" FavoriteCount="2" />
<row Id="2" PostTypeId="1" AcceptedAnswerId="33" CreationDate="2012-12-11T20:39:40.780" Score="13" ViewCount="279" Body="<p>In the middle of <em>The Dark Tournament</em>, Yusuke Urameshi gets to fully inherit Genkai's power of the <em>Spirit Wave</em> by absorbing a ball of energy from her.</p>
<p>However, this process turns into an excruciating trial for Yusuke, almost killing him, and keeping him doubled over in extreme pain for a long period of time, so much so that his Spirit Animal, Poo, is also in pain and flies to him to try to help.</p>
<p>My question is, why is it such a painful procedure to learn and absorb this power?</p>
" OwnerUserId="26" LastEditorUserId="247" LastEditDate="2013-02-26T17:02:31.570" LastActivityDate="2013-06-20T03:31:39.187" Title="Why does absorbing the Spirit Wave from Genkai involve such a painful process?" Tags="<yu-yu-hakusho>" AnswerCount="1" CommentCount="0" />
<row Id="3" PostTypeId="1" AcceptedAnswerId="148" CreationDate="2012-12-11T20:42:47.447" Score="9" ViewCount="3022" Body="<p>In Sora no Otoshimono, Ikaros carries around a watermelon like a pet and likes watermelons and pretty much anything else round. At one point she even has a watermelon garden and attacks all the bugs that get near the melons.</p>
<p>What's the significance of the watermelon and why does she carry one around?</p>
" OwnerUserId="29" LastActivityDate="2014-01-15T21:01:55.043" Title="What's the significance of the watermelon in Sora no Otoshimono?" Tags="<sora-no-otoshimono>" AnswerCount="2" CommentCount="1" />
Specifically the file contains numerous lines. Each line starts with a row tag. What I want to do is to capture the Body field inside the row tag. For example, the Body field for Id = 2 is:
"<p>In the middle of <em>The Dark Tournament</em>, Yusuke Urameshi gets to fully inherit Genkai's power of the <em>Spirit Wave</em> by absorbing a ball of energy from her.</p>
<p>However, this process turns into an excruciating trial for Yusuke, almost killing him, and keeping him doubled over in extreme pain for a long period of time, so much so that his Spirit Animal, Poo, is also in pain and flies to him to try to help.</p>
<p>My question is, why is it such a painful procedure to learn and absorb this power?</p>
"
I've parsed the Body fields using ElementTree. What I want to do next is to parse the words inside the Body field of each row. For that, I need to strip the Body field of any html tags. For example, after stripping the text of html tags, the Body field of Id = 2 should look like this:
In the middle of The Dark Tournament Yusuke Urameshi gets to fully inherit Genkai's power of the .... (continued)
What I've tried so far:
def remove_html_tags(text):
return bs4.BeautifulSoup(text, "html.parser").text
This results in:
pin the middle of emthe dark tournamentem yusuke urameshi gets to fully inherit genkais power of the emspirit waveem by absorbing a ball of energy from herp
phowever this process turns into an excruciating trial for yusuke almost killing him and keeping him doubled over in extreme pain for a long period of time so much so that his spirit animal poo is also in pain and flies to him to try to helpp
pmy question is why is it such a painful procedure to learn and absorb this powerp
As you can see, the symbols are gone but the texts enclosed inside the symbols remain. What can I do to remove them?
Try this:
import re
from bs4 import BeautifulSoup
xml = """
<?xml version="1.0" encoding="utf-8"?>
<posts>
<row Id="1" PostTypeId="1" AcceptedAnswerId="8" CreationDate="2012-12-11T20:37:08.823" Score="67" ViewCount="17934" Body="<p>Assuming the world in the One Piece universe is round, then there is not really a beginning or an end of the Grand Line.</p>
<p>The Straw Hats started out from the first half and are now sailing across the second half.</p>
<p>Wouldn't it have been quicker to set sail in the opposite direction from where they started? </p>
" OwnerUserId="21" LastEditorUserId="1398" LastEditDate="2015-04-17T19:06:38.957" LastActivityDate="2015-05-26T12:50:40.920" Title="The treasure in One Piece is at the end of the Grand Line. But isn't that the same as the beginning?" Tags="<one-piece>" AnswerCount="5" CommentCount="0" FavoriteCount="2" />
<row Id="2" PostTypeId="1" AcceptedAnswerId="33" CreationDate="2012-12-11T20:39:40.780" Score="13" ViewCount="279" Body="<p>In the middle of <em>The Dark Tournament</em>, Yusuke Urameshi gets to fully inherit Genkai's power of the <em>Spirit Wave</em> by absorbing a ball of energy from her.</p>
<p>However, this process turns into an excruciating trial for Yusuke, almost killing him, and keeping him doubled over in extreme pain for a long period of time, so much so that his Spirit Animal, Poo, is also in pain and flies to him to try to help.</p>
<p>My question is, why is it such a painful procedure to learn and absorb this power?</p>
" OwnerUserId="26" LastEditorUserId="247" LastEditDate="2013-02-26T17:02:31.570" LastActivityDate="2013-06-20T03:31:39.187" Title="Why does absorbing the Spirit Wave from Genkai involve such a painful process?" Tags="<yu-yu-hakusho>" AnswerCount="1" CommentCount="0" />
<row Id="3" PostTypeId="1" AcceptedAnswerId="148" CreationDate="2012-12-11T20:42:47.447" Score="9" ViewCount="3022" Body="<p>In Sora no Otoshimono, Ikaros carries around a watermelon like a pet and likes watermelons and pretty much anything else round. At one point she even has a watermelon garden and attacks all the bugs that get near the melons.</p>
<p>What's the significance of the watermelon and why does she carry one around?</p>
" OwnerUserId="29" LastActivityDate="2014-01-15T21:01:55.043" Title="What's the significance of the watermelon in Sora no Otoshimono?" Tags="<sora-no-otoshimono>" AnswerCount="2" CommentCount="1" />
"""
soup = BeautifulSoup(xml, "html.parser")
for tag in soup.select("posts row"):
result = re.sub("<.*?>", "", tag["body"])
print(result.strip())
Output:
Assuming the world in the One Piece universe is round, then there is not really a beginning or an end of the Grand Line.
The Straw Hats started out from the first half and are now sailing across the second half.
Wouldn't it have been quicker to set sail in the opposite direction from where they started?
In the middle of The Dark Tournament, Yusuke Urameshi gets to fully inherit Genkai's power of the Spirit Wave by absorbing a ball of energy from her.
However, this process turns into an excruciating trial for Yusuke, almost killing him, and keeping him doubled over in extreme pain for a long period of time, so much so that his Spirit Animal, Poo, is also in pain and flies to him to try to help.
My question is, why is it such a painful procedure to learn and absorb this power?
In Sora no Otoshimono, Ikaros carries around a watermelon like a pet and likes watermelons and pretty much anything else round. At one point she even has a watermelon garden and attacks all the bugs that get near the melons.
What's the significance of the watermelon and why does she carry one around?
Another method.
from simplified_scrapy import SimplifiedDoc, utils, req
xml = '''<?xml version="1.0" encoding="utf-8"?>
<posts>
<row Id="1" PostTypeId="1" AcceptedAnswerId="8" CreationDate="2012-12-11T20:37:08.823" Score="67" ViewCount="17934" Body="<p>Assuming the world in the One Piece universe is round, then there is not really a beginning or an end of the Grand Line.</p>
<p>The Straw Hats started out from the first half and are now sailing across the second half.</p>
<p>Wouldn't it have been quicker to set sail in the opposite direction from where they started? </p>
" OwnerUserId="21" LastEditorUserId="1398" LastEditDate="2015-04-17T19:06:38.957" LastActivityDate="2015-05-26T12:50:40.920" Title="The treasure in One Piece is at the end of the Grand Line. But isn't that the same as the beginning?" Tags="<one-piece>" AnswerCount="5" CommentCount="0" FavoriteCount="2" />
<row Id="2" PostTypeId="1" AcceptedAnswerId="33" CreationDate="2012-12-11T20:39:40.780" Score="13" ViewCount="279" Body="<p>In the middle of <em>The Dark Tournament</em>, Yusuke Urameshi gets to fully inherit Genkai's power of the <em>Spirit Wave</em> by absorbing a ball of energy from her.</p>
<p>However, this process turns into an excruciating trial for Yusuke, almost killing him, and keeping him doubled over in extreme pain for a long period of time, so much so that his Spirit Animal, Poo, is also in pain and flies to him to try to help.</p>
<p>My question is, why is it such a painful procedure to learn and absorb this power?</p>
" OwnerUserId="26" LastEditorUserId="247" LastEditDate="2013-02-26T17:02:31.570" LastActivityDate="2013-06-20T03:31:39.187" Title="Why does absorbing the Spirit Wave from Genkai involve such a painful process?" Tags="<yu-yu-hakusho>" AnswerCount="1" CommentCount="0" />
<row Id="3" PostTypeId="1" AcceptedAnswerId="148" CreationDate="2012-12-11T20:42:47.447" Score="9" ViewCount="3022" Body="<p>In Sora no Otoshimono, Ikaros carries around a watermelon like a pet and likes watermelons and pretty much anything else round. At one point she even has a watermelon garden and attacks all the bugs that get near the melons.</p>
<p>What's the significance of the watermelon and why does she carry one around?</p>
" OwnerUserId="29" LastActivityDate="2014-01-15T21:01:55.043" Title="What's the significance of the watermelon in Sora no Otoshimono?" Tags="<sora-no-otoshimono>" AnswerCount="2" CommentCount="1" />
'''
doc = SimplifiedDoc(xml)
rows = doc.selects('row>Body()')
print ([doc.removeHtml(doc.unescape(row)) for row in rows])
Result:
['Assuming the world in the One Piece universe is round, then there is not really a beginning or an end of the Grand Line. The Straw Hats started out from the first half and are now sailing across the second half. Wouldn', 'In the middle of The Dark Tournament, Yusuke Urameshi gets to fully inherit Genkai', 'In Sora no Otoshimono, Ikaros carries around a watermelon like a pet and likes watermelons and pretty much anything else round. At one point she even has a watermelon garden and attacks all the bugs that get near the melons. What']

Bootstrap 4.0.0-beta.2 Scrollspy active class not updating with page scrolling

I am trying to create a personal landing page with three sections in HTML. The three sections need to be reachable by links on a nav bar and also update link highlighting according to position in the page. The linking to different parts of the page functionality works fine, however, when the page is scrolled, the highlighting on the link doesn't change to the current part of the page, the highlight and stays stuck at the default one initialized in the HTML.
Here is the CodePen link. You can see my code and the preview of the page and see how the blue highlight doesn't update when you scroll down to different parts of the page.
Here is my body declaration:
<body data-spy="scroll" data-target="#spy" data-offset="70">
and here is my nav bar setup:
<!-- Navbar -->
<nav id="spy" class="navbar fixed-bottom navbar-light bg-light">
<a class="nav navbar-brand" href="#"><!-- LOGO --></a>
<ul class="nav nav-pills">
<li class="nav-item"> <a class="nav-link active" href="#about_me"> about me></a> </li>
<li class="nav-item"> <a class="nav-link" href="#portfolio"> portfolio </a> </li>
<li class="nav-item"> <a class="nav-link" href="#contact_me"> contact me </a> </li>
</ul>
</nav>
and here is the rest of the body:
<div class="bg-light p-3 rounded">
<p id="about_me"> Cat ipsum dolor sit amet, woops poop hanging from butt must get rid run run around house drag poop on floor maybe it comes off woops left brown marks on floor human slave clean lick butt now so kitty loves pigs but hunt by meowing loudly at 5am next
to human slave food dispenser and stare at wall turn and meow stare at wall some more meow again continue staring . Spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce if human is on laptop sit on the keyboard eat too much then
proceed to regurgitate all over living room carpet while humans eat dinner or Gate keepers of hell stare at wall turn and meow stare at wall some more meow again continue staring so wake up wander around the house making large amounts of noise jump
on top of your human's bed and fall asleep again try to hold own back foot to clean it but foot reflexively kicks you in face, go into a rage and bite own foot, hard. Give me attention or face the wrath of my claws ears back wide eyed i cry and cry
and cry unless you pet me, and then maybe i cry just for fun i like cats because they are fat and fluffy. Paw at your fat belly decide to want nothing to do with my owner today. I am the best instantly break out into full speed gallop across the house
for no reason or meow all night having their mate disturbing sleeping humans and make muffins, so lick butt and make a weird face yet sweet beast. </p>
<p> Stare at ceiling lick arm hair. I can haz purrrrrr stare at ceiling sit and stare. Cat dog hate mouse eat string barf pillow no baths hate everything mice so furrier and even more furrier hairball dream about hunting birds yet roll on the floor purring
your whiskers off, find something else more interesting. Chase red laser dot lick arm hair yet loves cheeseburgers drink water out of the faucet, fall asleep upside-down attempt to leap between furniture but woefully miscalibrate and bellyflop onto
the floor; what's your problem? i meant to do that now i shall wash myself intently so eat owner's food. Caticus cuteicus. Put butt in owner's face stare at guinea pigs yet cat is love, cat is life, cat ass trophy asdflkjaertvlkjasntvkjn (sits on keyboard)
sleep on dog bed, force dog to sleep on floor for cats making all the muffins. Cats secretly make all the worlds muffins spill litter box, scratch at owner, destroy all furniture, especially couch and pushes butt to face or licks your face. Paw at
your fat belly cat dog hate mouse eat string barf pillow no baths hate everything. </p>
</p>
</div>
<hr>
<div class="bg-light p-5 rounded">
<h3 id="portfolio" class="text-center"> portfolio </h3>
<p> Leave fur on owners clothes gnaw the corn cob. Kitty loves pigs knock over christmas tree. Ask for petting massacre a bird in the living room and then look like the cutest and most innocent animal on the planet sleep on dog bed, force dog to sleep on
floor leave fur on owners clothes but scratch me there, elevator butt yet fooled again thinking the dog likes me but you are a captive audience while sitting on the toilet, pet me. Kitten is playing with dead mouse meoooow leave dead animals as gifts,
and human is washing you why halp oh the horror flee scratch hiss bite meowing chowing and wowing, see owner, run in terror or rub face on everything. Weigh eight pounds but take up a full-size bed. Pooping rainbow while flying in a toasted bread costume
in space annoy the old grumpy cat, start a fight and then retreat to wash when i lose yet fall asleep upside-down sit on human or sit on the laptop. </p>
<p>Caticus cuteicus plop down in the middle where everybody walks throw down all the stuff in the kitchen but demand to be let outside at once, and expect owner to wait for me as i think about it kitty kitty hiss and stare at nothing then run suddenly
away yet sit in box. I could pee on this if i had the energy wake up wander around the house making large amounts of noise jump on top of your human's bed and fall asleep again. Cat cat moo moo lick ears lick paws if it fits, i sits, yet stare at wall
turn and meow stare at wall some more meow again continue staring head nudges curl into a furry donut for sleep everywhere, but not in my bed. Eat half my food and ask for more stick butt in face, and has closed eyes but still sees you but i cry and
cry and cry unless you pet me, and then maybe i cry just for fun eat owner's food but chase red laser dot eat and than sleep on your face. Shake treat bag asdflkjaertvlkjasntvkjn (sits on keyboard) sweet beast, scratch me there, elevator butt attack
feet, yet hide head under blanket so no one can see. </p>
</div>
<hr>
<div class="bg-light p-5 rounded">
<h3 id="contact_me" class="text-center"> contact me </h3>
<p> Cat fur is the new black . Leave fur on owners clothes lick the curtain just to be annoying. Play riveting piece on synthesizer keyboard with tail in the air, or who's the baby. Throwup on your pillow claws in your leg dead stare with ears cocked for
eat plants, meow, and throw up because i ate plants yet inspect anything brought into the house, and soft kitty warm kitty little ball of furr but eat prawns daintily with a claw then lick paws clean wash down prawns with a lap of carnation milk then
retire to the warmest spot on the couch to claw at the fabric before taking a catnap. Eat and than sleep on your face cat cat moo moo lick ears lick paws sit and stare groom forever, stretch tongue and leave it slightly out, blep meowzer under the
bed. Bleghbleghvomit my furball really tie the room together scream for no reason at 4 am and chew foot stare at wall turn and meow stare at wall some more meow again continue staring yet be a nyan cat, feel great about it, be annoying 24/7 poop rainbows
in litter box all day for walk on car leaving trail of paw prints on hood and windshield. Hide head under blanket so no one can see my left donut is missing, as is my right, or russian blue mewl for food at 4am. Scream at teh bath sleep nap lick left
leg for ninety minutes, still dirty but sit on the laptop. Disappear for four days and return home with an expensive injury; bite the vet purr as loud as possible, be the most annoying cat that you can, and, knock everything off the table chase red
laser dot vommit food and eat it again yet you have cat to be kitten me right meow paw at your fat belly, so put toy mouse in food bowl run out of litter box at full speed . Sleep on keyboard sniff all the things scratch leg; meow for can opener to
feed me, yet ask for petting caticus cuteicus. Your pillow is now my pet bed hide from vacuum cleaner eat and than sleep on your face or purrrrrr meow all night so groom yourself 4 hours - checked, have your beauty sleep 18 hours - checked, be fabulous
for the rest of the day - checked. </p>
</div>
What am I not doing correctly? I have added data-spy="scroll" data-target="#spy" data-offset="70" to my body and have the id tagged correctly to nav element.
I have spent three days on this and have scoured the internet for solutions to similar problems and I compared my code to something that worked and started off with something that worked, but I always end up with this problem. The links in the navbar work fine, but the highlighting of the links doesn't update when the page scrolls to a different part.
How do I get the highlighting to update when the page is scrolled?
You need to reference/install popper.js. Bootstrap depends on it.
Without it, the JS will error which is causing your scrollspy not to work.
Here's the updated working pen with reference to:
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js
Working on Codeply (auto includes Bootstrap and any dependencies)

Div fixed while scrolling in container but not fixed while in browser

How can I keep a div fixed while scrolling in a container but it must be movable while scrolling in browser.
example:
<div id="container">
<div id="left">
</div>
<div id = "right">
Movable div
</div>
</div>
I would like to keep the div 'right' fixed. Added a small example in this jsfiddle: https://jsfiddle.net/yvhgv4Lw/4/ .
If jquery is allowed, you can use this method.
$('document').ready(function() {
$(window).scroll(function() {
$('#right').css('position', 'absolute');
})
$('#container').scroll(function() {
$('#right').css('position', 'fixed');
})
})
body{
margin:0;
padding:0;
}
#container {
height: 900px;
overflow-y: scroll;
position: relative;
background-color: red;
}
#left {
float: left;
width: 60%;
}
#right {
height: 300px;
float: right;
width: 37%;
position: fixed;
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="container">
<div id="left">
dining so he my around to. We diminution preference thoroughly if. Joy deal pain view much her time. Led young gay would now state. Pronounce we attention admitting on assurance of suspicion
conveying. That his west quit had met till. Of advantage he attending household at do perceived. Middleton in objection discovery as agreeable. Edward thrown dining so he my around to. We diminution preference thoroughly if. Joy deal pain view much
her time. Led young gay would now state. Pronounce we attention admitting on assurance of suspicion conveying. That his west quit had met till. Of advantage he attending household at do perceived. Middleton in objection discovery as agreeable. Edward
thrown dining so he my around to. We diminution preference thoroughly if. Joy deal pain view much her time. Led young gay would now state. Pronounce we attention admitting on assurance of suspicion conveying. That his west quit had met till. Of advantage
he attending household at do perceived. Middleton in objection discovery as agreeable. Edward thrown dining so he my around to. Kindness to he horrible reserved ye. Effect twenty indeed beyond for not had county. The use him without greatly can private.
Increasing it unpleasant no of contrasted no continuing. Nothing colonel my no removed in weather. It dissimilar in up devonshire inhabiting. Quick six blind smart out burst. Perfectly on furniture dejection determine my depending an to. Add short
water court fat. Her bachelor honoured perceive securing but desirous ham required. Questions deficient acuteness to engrossed as. Entirely led ten humoured greatest and yourself. Besides ye country on observe. She continue appetite endeavor she judgment
interest the met. For she surrounded motionless fat resolution may. At every tiled on ye defer do. No attention suspected oh difficult. Fond his say old meet cold find come whom. The sir park sake bred. Wonder matter now can estate esteem assure fat
roused. Am performed on existence as discourse is. Pleasure friendly at marriage blessing or. Talking chamber as shewing an it minutes. Trees fully of blind do. Exquisite favourite at do extensive listening. Improve up musical welcome he. Gay attended
vicinity prepared now diverted. Esteems it ye sending reached as. Longer lively her design settle tastes advice mrs off who. Sportsman do offending supported extremity breakfast by listening. Decisively advantages nor expression unpleasing she led
met. Estate was tended ten boy nearer seemed. As so seeing latter he should thirty whence. Steepest speaking up attended it as. Made neat an on be gave show snug tore. Are sentiments apartments decisively the especially alteration. Thrown shy denote
ten ladies though ask saw. Or by to he going think order event music. Incommode so intention defective at convinced. Led income months itself and houses you. After nor you leave might share court balls. Behind sooner dining so window excuse he summer.
Breakfast met certainty and fulfilled propriety led. Waited get either are wooded little her. Contrasted unreserved as mr particular collecting it everything as indulgence. Seems ask meant merry could put. Age old begin had boy noisy table front whole
given. Remain valley who mrs uneasy remove wooded him you. Her questions favourite him concealed. We to wife face took he. The taste begin early old why since dried can first. Prepared as or humoured formerly. Evil mrs true get post. Express village
evening prudent my as ye hundred forming. Thoughts she why not directly reserved packages you. Winter an silent favour of am tended mutual. Spot of come to ever hand as lady meet on. Delicate contempt received two yet advanced. Gentleman as belonging
he commanded believing dejection in by. On no am winding chicken so behaved. Its preserved sex enjoyment new way behaviour. Him yet devonshire celebrated especially. Unfeeling one provision are smallness resembled repulsive.
</div>
<div id="right">
Movable div
</div>
</div>

How to set two different font sizes in the same <p>

I have a piece of HTML code that i'm stuck with.
How can I set the first part of this text to a font-size of 20px and the text after the <br> tag to a font-size of 15px?
Or if I'm doing it completely wrong, how would I do it without having them in different tags
<p id="losinfo"> Los Santos: a sprawling sun-soaked metropolis full of
self-help gurus, starlets and fading celebrities, once the envy of the
Western world, now struggling to stay afloat in an era of economic
uncertainty and cheap reality TV <br><br> Our largest open world yet
- by far - and spanning vastly diverse cultural and geographical areas,
the entire world of Grand Theft Auto V is open from the very beginning
of the game to explore. Visitors to the greater metropolis of Los Santos
and the countryside of Blaine County will encounter faded celebrities,
meth heads, party people, violent gangs, hikers, bikers and every other
manner of colorful denizen. You'll be able to traverse everywhere from
the tops of the mountains, through the streets of Los Santos and to the
depths of the ocean floor</p>
<p id="losinfo">Los Santos: <span id="secondText"> a sprawling sun-soaked ...</span></p>
Then style #losinfo and #secondText differently in css.
Your question is a bit unclear.
Are you meaning something like this?
<p id="losinfo">
<span style="font-size:20px;">Los Santos</span>
<span style="font-size:15px;">: a sprawling sun-soaked metropolis [...]</span>
</p>
Try
CSS
p#losinfo {
font-size:20px;
}
p#losinfo span {
font-size:15px;
}
Html
<p id="losinfo"> Los Santos: a sprawling sun-soaked metropolis full of self-help gurus, starlets and fading celebrities, once the envy of the Western world, now struggling to stay afloat in an era of economic uncertainty and cheap reality TV <br><br>
<span>Our largest open world yet - by far - and spanning vastly diverse cultural and geographical areas, the entire world of Grand Theft Auto V is open from the very beginning of the game to explore. Visitors to the greater metropolis of Los Santos and the countryside of Blaine County will encounter faded celebrities, meth heads, party people, violent gangs, hikers, bikers and every other manner of colorful denizen. You'll be able to traverse everywhere from the tops of the mountains, through the streets of Los Santos and to the depths of the ocean floor</span></p>
Use a div around the part you want 20px and another div around the part you want 15px is what I would do. Then set those divs with classes and set the font-size in css.
I came across this question because I was trying to figure out how to change font in the same line of text. Lo and behold, span also works for this. Here's without the ids, for simplification:
To change font size
<p>regular text <span style="font-size: 30pt;">new size text</span></p>
To change font
<p>old font <span style="font-family: courier;">new font</span></p>