CODEWITHSUNDEEP
htmlfrontend
Max4467
Max4467

Reputation: 145

html tag new line issue

I am new to HTML code , so please bear with me. I have this simple HTML in my website that i am building.

<div class="row">
<h2>PRODUCT DETAILS</h2>
du Maurier Special KS - 20 Pack.

</div>

<div class="row">
<h2>BRAND</h2>
Du Maurier is a Canadian brand of cigarettes, produced by Imperial Tobacco Canada, a subsidiary of British American Tobacco. The brand is named after Sir Gerald du Maurier, the noted British actor. The brand is also produced under license by the West Indian Tobacco Company in Trinidad and Tobago.
The brand was launched in the United Kingdom in 1930 after the actor Sir Gerald du Maurier had made requests for "a cigarette less irritating to his throat". He lent his name to the creation of a cigarette brand, the royalties for which he used to pay down his substantial tax liabilities. The tobacco company which launched the brand, Peter Jackson, was a subsidiary of International Tobacco, which was taken over by Gallaher in 1934. In 1979, the brand passed to British American Tobacco, which had owned the trade mark overseas since they acquired Peter Jackson (Overseas) Ltd. in 1955. The brand became the best-selling cigarette brand in Canada with a market share of 40%, and was also sold in various other countries.

And the result in the website is enter image description here

Notice how "product details" and the details are in the same line. Whereas "Brand " and the description of the brand is in a new line.

If i added more content to "PRODUCT DETAILS" , i can see the output in the website as. Why this inconsistency? Please suggest.

enter image description here

Upvotes: 0

Views: 65

Answers (3)

Arnoldas
Arnoldas

Reputation: 317

Because your .row is display:flex it try fit content dynamically. for this reason, h2 is not 100% width (like display block by default. ). if the content is shorter it goes after h2, if longer it goes from the new line. I think your .row should be display: block, then your h2 will take 100% of block width. and if you need display flex in content, add one more wrapper.

Upvotes: 1

Max4467
Max4467

Reputation: 145

I played with the "row" div class, and i noticed, if i remove the " display: flex;" from the class, it works just fine. enter image description here

Upvotes: 0

Yashovardhan Singh
Yashovardhan Singh

Reputation: 43

This is probably because of the browser you are using and its settings. The closing div tag is missing for the second div which may cause errors. You should always use

tag or some another tag for displaying text and should not display it without a tag. The p tag will automatically display the text in next line because it is a Block Element.

Upvotes: 0

Related Questions