Mixing
Why my HTML headers of a new paragraph sticks to the end of the previous paragraph?
I'm using Python to make an HTML. Basically, my code loads 5 images into a row if a search has results and returns 2 strings if there's no result depending on what the error might be. If I do get 5 images, I want them to be evenly aligned in a row. The following is one HTML I got.
<!DOCTYPE html>
<html>
<head>
<title>DC Menu</title>
<style> * {
box-sizing: border-box;
}
.column {
float: left;
width: 20%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}</style>
</head>
<body>
<h1>Today's DC Menu</h1>
<p>
<h3>>>> Today's Breakfast has: apple</h3>
</p>
<p>
<a href="https://www.google.co.in/search?q=apple&source=lnms&tbm=isch">apple</a>
</p>
<div class="row">
<div class="column">
<img alt="('https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201606271147', 'png')" src="https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201606271147" style="width:100%">
</div>
<div class="column">
<img alt="('https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201606271147', 'png')" src="https://as-images.apple.com/is/image/AppleInc/aos/published/images/o/g/og/default/og-default?wid=1200&hei=630&fmt=jpeg&qlt=95&op_usm=0.5,0.5&.v=1525370171638" style="width:100%">
</div>
<div class="column">
<img alt="('https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201606271147', 'png')" src="https://www.apple.com/ac/structured-data/images/open_graph_logo.png?201809210816" style="width:100%">
</div>
<div class="column">
<img alt="('https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201606271147', 'png')" src="https://cdn.vox-cdn.com/thumbor/DqZ_YBYBAVZtBF1PFi2fj4DOszM=/0x0:1280x800/1200x800/filters:focal(538x298:742x502)/cdn.vox-cdn.com/uploads/chorus_image/image/61897327/apple8.0.png" style="width:100%">
</div>
<div class="column">
<img alt="('https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201606271147', 'png')" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/250px-Apple_logo_black.svg.png" style="width:100%">
</div>
</div>
<p>
<h3>>>> Today's Lunch has: xdgbdgtnstnjseth</h3>
</p>
<p>
<a href="https://www.google.co.in/search?q=xdgbdgtnstnjseth&source=lnms&tbm=isch">xdgbdgtnstnjseth</a>
</p>
<div class="row">
<div class="column">
<img alt="Your search has no return." src="Y" style="width:100%">
</div>
</div>
<p>
<h3>>>> Today's Dinner has: hateç</h3>
</p>
<p>
<a href="https://www.google.co.in/search?q=hateç&source=lnms&tbm=isch">hateç</a>
</p>
<div class="row">
<div class="column">
<img alt="The dish name has weird letters that cannot be searched directly." src="T" style="width:100%">
</div>
</div>
</body>
</html>
And I got the webpage looks like this:
I'm satisfied with the first several lines. However, for the line of "Today's Dinner..." and the line below it, why they didn't start from a new paragraph but stick to the end of the previous "Your search has no return"? I think my misunderstanding is on the HTML structure and I don't really worry about the Python part once I know what the correct HTML should look like. Thank you!
html paragraph
asked Jan 1 at 21:03
Louie LeeLouie Lee
539
add a comment |
I'm using Python to make an HTML. Basically, my code loads 5 images into a row if a search has results and returns 2 strings if there's no result depending on what the error might be. If I do get 5 images, I want them to be evenly aligned in a row. The following is one HTML I got.
<!DOCTYPE html>
<html>
<head>
<title>DC Menu</title>
<style> * {
box-sizing: border-box;
}
.column {
float: left;
width: 20%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}</style>
</head>
<body>
<h1>Today's DC Menu</h1>
<p>
<h3>>>> Today's Breakfast has: apple</h3>
</p>
<p>
<a href="https://www.google.co.in/search?q=apple&source=lnms&tbm=isch">apple</a>
</p>
<div class="row">
<div class="column">
<img alt="('https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201606271147', 'png')" src="https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201606271147" style="width:100%">
</div>
<div class="column">
<img alt="('https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201606271147', 'png')" src="https://as-images.apple.com/is/image/AppleInc/aos/published/images/o/g/og/default/og-default?wid=1200&hei=630&fmt=jpeg&qlt=95&op_usm=0.5,0.5&.v=1525370171638" style="width:100%">
</div>
<div class="column">
<img alt="('https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201606271147', 'png')" src="https://www.apple.com/ac/structured-data/images/open_graph_logo.png?201809210816" style="width:100%">
</div>
<div class="column">
<img alt="('https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201606271147', 'png')" src="https://cdn.vox-cdn.com/thumbor/DqZ_YBYBAVZtBF1PFi2fj4DOszM=/0x0:1280x800/1200x800/filters:focal(538x298:742x502)/cdn.vox-cdn.com/uploads/chorus_image/image/61897327/apple8.0.png" style="width:100%">
</div>
<div class="column">
<img alt="('https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201606271147', 'png')" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/250px-Apple_logo_black.svg.png" style="width:100%">
</div>
</div>
<p>
<h3>>>> Today's Lunch has: xdgbdgtnstnjseth</h3>
</p>
<p>
<a href="https://www.google.co.in/search?q=xdgbdgtnstnjseth&source=lnms&tbm=isch">xdgbdgtnstnjseth</a>
</p>
<div class="row">
<div class="column">
<img alt="Your search has no return." src="Y" style="width:100%">
</div>
</div>
<p>
<h3>>>> Today's Dinner has: hateç</h3>
</p>
<p>
<a href="https://www.google.co.in/search?q=hateç&source=lnms&tbm=isch">hateç</a>
</p>
<div class="row">
<div class="column">
<img alt="The dish name has weird letters that cannot be searched directly." src="T" style="width:100%">
</div>
</div>
</body>
</html>
And I got the webpage looks like this:
I'm satisfied with the first several lines. However, for the line of "Today's Dinner..." and the line below it, why they didn't start from a new paragraph but stick to the end of the previous "Your search has no return"? I think my misunderstanding is on the HTML structure and I don't really worry about the Python part once I know what the correct HTML should look like. Thank you!
html paragraph
asked Jan 1 at 21:03
Louie LeeLouie Lee
539
Try to add a <br /> tag right above the opening of the <p> tag
– VG98
Jan 1 at 21:09
Two<br />tags.
– Aaditya Maheshwari
Jan 1 at 21:11
add a comment |
I'm using Python to make an HTML. Basically, my code loads 5 images into a row if a search has results and returns 2 strings if there's no result depending on what the error might be. If I do get 5 images, I want them to be evenly aligned in a row. The following is one HTML I got.
<!DOCTYPE html>
<html>
<head>
<title>DC Menu</title>
<style> * {
box-sizing: border-box;
}
.column {
float: left;
width: 20%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}</style>
</head>
<body>
<h1>Today's DC Menu</h1>
<p>
<h3>>>> Today's Breakfast has: apple</h3>
</p>
<p>
<a href="https://www.google.co.in/search?q=apple&source=lnms&tbm=isch">apple</a>
</p>
<div class="row">
<div class="column">
<img alt="('https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201606271147', 'png')" src="https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201606271147" style="width:100%">
</div>
<div class="column">
<img alt="('https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201606271147', 'png')" src="https://as-images.apple.com/is/image/AppleInc/aos/published/images/o/g/og/default/og-default?wid=1200&hei=630&fmt=jpeg&qlt=95&op_usm=0.5,0.5&.v=1525370171638" style="width:100%">
</div>
<div class="column">
<img alt="('https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201606271147', 'png')" src="https://www.apple.com/ac/structured-data/images/open_graph_logo.png?201809210816" style="width:100%">
</div>
<div class="column">
<img alt="('https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201606271147', 'png')" src="https://cdn.vox-cdn.com/thumbor/DqZ_YBYBAVZtBF1PFi2fj4DOszM=/0x0:1280x800/1200x800/filters:focal(538x298:742x502)/cdn.vox-cdn.com/uploads/chorus_image/image/61897327/apple8.0.png" style="width:100%">
</div>
<div class="column">
<img alt="('https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201606271147', 'png')" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/250px-Apple_logo_black.svg.png" style="width:100%">
</div>
</div>
<p>
<h3>>>> Today's Lunch has: xdgbdgtnstnjseth</h3>
</p>
<p>
<a href="https://www.google.co.in/search?q=xdgbdgtnstnjseth&source=lnms&tbm=isch">xdgbdgtnstnjseth</a>
</p>
<div class="row">
<div class="column">
<img alt="Your search has no return." src="Y" style="width:100%">
</div>
</div>
<p>
<h3>>>> Today's Dinner has: hateç</h3>
</p>
<p>
<a href="https://www.google.co.in/search?q=hateç&source=lnms&tbm=isch">hateç</a>
</p>
<div class="row">
<div class="column">
<img alt="The dish name has weird letters that cannot be searched directly." src="T" style="width:100%">
</div>
</div>
</body>
</html>
And I got the webpage looks like this:
I'm satisfied with the first several lines. However, for the line of "Today's Dinner..." and the line below it, why they didn't start from a new paragraph but stick to the end of the previous "Your search has no return"? I think my misunderstanding is on the HTML structure and I don't really worry about the Python part once I know what the correct HTML should look like. Thank you!
html paragraph
asked Jan 1 at 21:03
Louie LeeLouie Lee
539
I'm using Python to make an HTML. Basically, my code loads 5 images into a row if a search has results and returns 2 strings if there's no result depending on what the error might be. If I do get 5 images, I want them to be evenly aligned in a row. The following is one HTML I got.
<!DOCTYPE html>
<html>
<head>
<title>DC Menu</title>
<style> * {
box-sizing: border-box;
}
.column {
float: left;
width: 20%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}</style>
</head>
<body>
<h1>Today's DC Menu</h1>
<p>
<h3>>>> Today's Breakfast has: apple</h3>
</p>
<p>
<a href="https://www.google.co.in/search?q=apple&source=lnms&tbm=isch">apple</a>
</p>
<div class="row">
<div class="column">
<img alt="('https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201606271147', 'png')" src="https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201606271147" style="width:100%">
</div>
<div class="column">
<img alt="('https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201606271147', 'png')" src="https://as-images.apple.com/is/image/AppleInc/aos/published/images/o/g/og/default/og-default?wid=1200&hei=630&fmt=jpeg&qlt=95&op_usm=0.5,0.5&.v=1525370171638" style="width:100%">
</div>
<div class="column">
<img alt="('https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201606271147', 'png')" src="https://www.apple.com/ac/structured-data/images/open_graph_logo.png?201809210816" style="width:100%">
</div>
<div class="column">
<img alt="('https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201606271147', 'png')" src="https://cdn.vox-cdn.com/thumbor/DqZ_YBYBAVZtBF1PFi2fj4DOszM=/0x0:1280x800/1200x800/filters:focal(538x298:742x502)/cdn.vox-cdn.com/uploads/chorus_image/image/61897327/apple8.0.png" style="width:100%">
</div>
<div class="column">
<img alt="('https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?201606271147', 'png')" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/250px-Apple_logo_black.svg.png" style="width:100%">
</div>
</div>
<p>
<h3>>>> Today's Lunch has: xdgbdgtnstnjseth</h3>
</p>
<p>
<a href="https://www.google.co.in/search?q=xdgbdgtnstnjseth&source=lnms&tbm=isch">xdgbdgtnstnjseth</a>
</p>
<div class="row">
<div class="column">
<img alt="Your search has no return." src="Y" style="width:100%">
</div>
</div>
<p>
<h3>>>> Today's Dinner has: hateç</h3>
</p>
<p>
<a href="https://www.google.co.in/search?q=hateç&source=lnms&tbm=isch">hateç</a>
</p>
<div class="row">
<div class="column">
<img alt="The dish name has weird letters that cannot be searched directly." src="T" style="width:100%">
</div>
</div>
</body>
</html>
And I got the webpage looks like this:
I'm satisfied with the first several lines. However, for the line of "Today's Dinner..." and the line below it, why they didn't start from a new paragraph but stick to the end of the previous "Your search has no return"? I think my misunderstanding is on the HTML structure and I don't really worry about the Python part once I know what the correct HTML should look like. Thank you!
html paragraph
html paragraph
asked Jan 1 at 21:03
Louie LeeLouie Lee
539
asked Jan 1 at 21:03
Louie LeeLouie Lee
539
asked Jan 1 at 21:03
Louie LeeLouie Lee
539
asked Jan 1 at 21:03
Louie LeeLouie Lee
539
asked Jan 1 at 21:03
Louie LeeLouie Lee
539
539
Try to add a <br /> tag right above the opening of the <p> tag
– VG98
Jan 1 at 21:09
Two<br />tags.
– Aaditya Maheshwari
Jan 1 at 21:11
add a comment |
Try to add a <br /> tag right above the opening of the <p> tag
– VG98
Jan 1 at 21:09
Two<br />tags.
– Aaditya Maheshwari
Jan 1 at 21:11
Try to add a <br /> tag right above the opening of the <p> tag
– VG98
Jan 1 at 21:09
Try to add a <br /> tag right above the opening of the <p> tag
– VG98
Jan 1 at 21:09
Two
<br /> tags.– Aaditya Maheshwari
Jan 1 at 21:11
Two
<br /> tags.– Aaditya Maheshwari
Jan 1 at 21:11
add a comment |
1 Answer
1
active
oldest
votes
HTML wise, your code is OK. You need to fix your css errors. One that will fix your problem would be:
.row::after {
content: '"'; /* fix this*/
clear: both;
display: table;
}
Since your original declaration of content property was wrong, CSS parser stopped there, and didn't apply clear and display properties. Which would fix your floating columns.
More on quoting with ::before and ::after here
answered Jan 1 at 21:17
Ludovit MydlaLudovit Mydla
586216
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53998919%2fwhy-my-html-headers-of-a-new-paragraph-sticks-to-the-end-of-the-previous-paragra%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
HTML wise, your code is OK. You need to fix your css errors. One that will fix your problem would be:
.row::after {
content: '"'; /* fix this*/
clear: both;
display: table;
}
Since your original declaration of content property was wrong, CSS parser stopped there, and didn't apply clear and display properties. Which would fix your floating columns.
More on quoting with ::before and ::after here
answered Jan 1 at 21:17
Ludovit MydlaLudovit Mydla
586216
add a comment |
HTML wise, your code is OK. You need to fix your css errors. One that will fix your problem would be:
.row::after {
content: '"'; /* fix this*/
clear: both;
display: table;
}
Since your original declaration of content property was wrong, CSS parser stopped there, and didn't apply clear and display properties. Which would fix your floating columns.
More on quoting with ::before and ::after here
answered Jan 1 at 21:17
Ludovit MydlaLudovit Mydla
586216
add a comment |
HTML wise, your code is OK. You need to fix your css errors. One that will fix your problem would be:
.row::after {
content: '"'; /* fix this*/
clear: both;
display: table;
}
Since your original declaration of content property was wrong, CSS parser stopped there, and didn't apply clear and display properties. Which would fix your floating columns.
More on quoting with ::before and ::after here
answered Jan 1 at 21:17
Ludovit MydlaLudovit Mydla
586216
HTML wise, your code is OK. You need to fix your css errors. One that will fix your problem would be:
.row::after {
content: '"'; /* fix this*/
clear: both;
display: table;
}
Since your original declaration of content property was wrong, CSS parser stopped there, and didn't apply clear and display properties. Which would fix your floating columns.
More on quoting with ::before and ::after here
answered Jan 1 at 21:17
Ludovit MydlaLudovit Mydla
586216
answered Jan 1 at 21:17
Ludovit MydlaLudovit Mydla
586216
answered Jan 1 at 21:17
Ludovit MydlaLudovit Mydla
586216
answered Jan 1 at 21:17
Ludovit MydlaLudovit Mydla
586216
586216
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53998919%2fwhy-my-html-headers-of-a-new-paragraph-sticks-to-the-end-of-the-previous-paragra%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Try to add a <br /> tag right above the opening of the <p> tag
– VG98
Jan 1 at 21:09
Two
<br />tags.– Aaditya Maheshwari
Jan 1 at 21:11