How do I stop a line break from being added when closing a div tag?

Can you help me understand why the HTML code below is causing a line break after the div closing tag? And do you have any suggestions on how to prevent this line break so that it resembles a simple table layout?


<p>
<div style="width:200px">Keyword1</div> :About 1<br>
<div style="width:200px">Keyword2</div> :About 2<br>
</p>

In my understanding, I expected the output to be:

Keyword1 : About 1
Keyword2 : About 2

But instead, it actually looks like this:

Keyword1 
: About 1
Keyword2 
: About 2
htmlcss

Answer №1

In this scenario, the default behavior of the <div> element is set to display: block;. To change this, you can specify display: inline; in your CSS.

https://i.sstatic.net/kkM6b.png

<p>
  <div style="width:200px; display: inline;">Keyword1</div> :About 1<br>
  <div style="width:200px; display: inline;">Keyword2</div> :About 2<br>
</p>

However, for a more structured approach (as the provided code is not valid HTML), I recommend the following:

<div>
  <!-- 1 -->
  <div style="display: flex;">
    <span style="width: 200px">Keyword1</span>
    <span>:About 1</span>
  </div>
  <!-- 2 -->
  <div style="display: flex;">
    <span style="width: 200px">Keyword2</span>
    <span>:About 2</span>
  </div>
</div>

Answer №2

A div should not be nested inside a p tag as it violates HTML standards.

In addition, div tags are block elements, causing line breaks in the content.

To ensure valid HTML, consider using span elements instead of div for inline elements. By default, span elements are inline, but you can use display: inline-block to set a fixed width:

<p>
  <span style="display: inline-block;width:200px;">Keyword1</span> :About 1<br>
  <span style="display: inline-block;width:200px;">Keyword2</span> :About 2<br>
</p>

Hint: It's recommended to use external CSS classes rather than adding inline styles to each element.

Answer №3

To use the div tag as a block-level element, it is recommended to implement the following CSS:

display: inline

within your stylesheets.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the dynamic world of Angular2 animations paired with the

In my layout, I have a row with three columns and two buttons to toggle the visibility of the side panels: col-md-3 col-md-7 col-md-2 ------------------------------------ | | | | | left | middle panel | | ...

csstwitter-bootstrapangularangular2-animation

Acknowledge that a checkbox was found to be unchecked while editing a php/html form

Currently, I am in the process of developing a form using PHP/HTML that enables users to input data, review, and potentially edit their inputs before final submission. One of the key elements within this form is the use of checkboxes. Thanks to resources l ...

phphtmlcheckbox

Functions perfectly on Chrome, however, encountering issues on Internet Explorer

Why does the Navigation Bar work in Chrome but not in Internet Explorer? Any insights on this issue? The code functions properly in both Internet Explorer and Chrome when tested locally, but fails to load when inserted into my online website editor. Here ...

javascriptjqueryhtmlcssgoogle-chrome

JavaScript CheckBox Color Change Not Functioning

Hello, I am currently experimenting with the checkAll function. When I click on the checkAll checkbox, it should select all rows and change their background color accordingly. Below is the JavaScript code I am using: function checkAll(objRef) { v ...

javascripthtmlcssgridview

Selecting a specific value in a row from an HTML table - a comprehensive guide

This is a similar structure where, if I check the first button, I can retrieve the January month savings stored in a text field. Hello everyone, I am looking to design a table that includes a checkbox in the first column of each row. Upon selecting this ...

jqueryhtmljinja2

Issue with long text in a resizable table using jQuery tablesorter 2.31.1

My issue is that when I try to resize the columns in tablesorter, they snap back into place. The column width set with resizable_widths does not apply correctly until a column is manually resized. Despite setting the width of all cells to 120px, any cells ...

javascriptjqueryhtmlcsstablesorter

Any suggestions on how to avoid code repetition using Jquery?

This code allows me to create a menu for my gallery. By setting the .masonry # elements to display:none, I can use the corresponding ID in the menu to show the correct gallery when clicked. However, there is a lot of repetitive code in this implementatio ...

jqueryhtmlrepeat

What is the best way to add rounded corners to tables in Bootstrap 3?

Is there a way to give the top and bottom corners of a table rounded edges? I am currently using Bootstrap 3 tables, but they have no corner radius by default. How can I achieve this effect? ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Any recent guide on how to use the flexbox module?

As the Flexible Box Layout module spec continues to evolve, some browsers have implemented multiple versions with varying syntaxes. Despite efforts to find current tutorials, many sources warn of outdated information. In light of potential future changes, ...

cssflexbox

Modify the background's color and incorporate a pointlight using three.js

Recently, I have been exploring the capabilities of three.js. One interesting challenge I encountered was creating a cube within a wireframe cube. However, I found myself struggling to alter the background color in my project. I believe that incorporating ...

javascripthtmlcanvasthree.js

Tips on customizing KendoUI-Dialog titlebar using CSS for a single component

I am struggling with styling the KENDO UI dialog in a unique way: Imagine I have a component named WatComponent. Inside this component, When the user clicks the "Forbidden" button, my goal is to make a warning styled dialog appear, with a yellow/orange ...

cssangularkendo-uikendo-ui-angular2

Transfer the file image stored in a MySQL database to an excel spreadsheet

Having an issue with capturing image data input from a PHP and HTML database to Excel. I am trying to display the images in a specific size within an Excel file. Below is the PHP code used to create the table: <?php header("Content-type: application/o ...

phpjavascriptmysqlhtmlexcel

Show unique language text in the <noscript> element based on the user's browser language

I am just starting out with HTML, and I would like to show a message if JavaScript is disabled. To do this, I have placed the message within the <noscript> tag, which is working perfectly. <noscript> Need to enable Javascript. </noscript> ...

javascripthtml

Tips for applying stroke and shadow effects specifically when the mouse is moving over a canvas:

How can we create a shadow and stroke effect for circles drawn using HTML canvas only during mouse hover? I have two circles and would like to add a shadow and stroke effect when the mouse hovers over them. However, the issue is that once the mouse moves ...

javascripthtmlhtml5-canvas

What steps should I take to ensure my clock stays in sync with my runTime function?

I am developing a mini digital clock project with the ability to mimic a physical clock. The clock is activated by using a power button to switch it on and display the current time. It should also be able to turn off and show an empty screen. However, th ...

javascripthtmlalgorithmweb-applications

If a particular <td> element is present on the page, exhibit a unique <div>

I have a webpage with various HTML elements. <div class="alert">Your message was not sent.</div> <p class="pending">Email Pending</p> I would like to display the div.alert only if the p.pending is present. Is ...

javascripthtmlcss

Initialization of webix combo options values in HTML code

Currently, I am working with the Webix UI framework and I am trying to achieve something similar to: <div view="combo" options="fruit"></div> This is what I have in my JavaScript file: $scope.fruit =[{id:1, value: "Apple"}, {id:2, value: "Ba ...

javascripthtmlwebix

Potential issue: Firefox causes distortion in animated stroke-linecap="round" properties

While working on a project on Stack Overflow, I noticed a potential bug in Firefox when animating a line with stroke-linecap="round" and vector-effect="non-scaling-stroke" svg{border:1px solid} path{ animation: draw 1s ease-in; ...

cssanimationsvg

Getting access to the current row along with its value within an AngularJS application

Seeking guidance on how to edit and remove a row in angularjs as I am new to it. In my dynamic table, rows are inserted dynamically with links for editing and deleting. I am looking to edit a row upon clicking the edit link. HTML Code: <div ng-contro ...

htmlangularjs

I am facing an issue with the DOM object in my ejs template when used under the script tag. How can I resolve this problem?

<%-include ("partials/header.ejs") %> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <header> <!--NAVIGATION BAR--> <img class="calender-pic" src="images/calendar.png ...

javascripthtmlnode.jsexpressejs