The <p> element does not begin on a new line

Following the "Automotive" tag, the "p" tag does not start on a new line but instead appears on the same line as the "h3" tag. The same issue occurs after the phone tag and email tag. This problem is present in Chrome and other browsers, but everything displays correctly in Safari. HTML:

<div id="detailsm">
<h2>Contact Info</h2>
<h3>Automotive</h3>
<p>ccdccdc cascara</p>
<p>here</p> 
<p>left 0110</p>
<h3>Phone</h3>
<p>03 022 0221</p>
<p>03 022 8888</p>
<p>03 322 1022</p>
<h3>Email</h3>
<p><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6013010301130301130320070d01090c4e030f0d">[email protected]</a></p>
</div>

CSS:

#detailsm{
    padding: 30px 0 0 100px;
}

#detailsm h3{
    float: center;
    color: #696969;
}

Answer №1

Avoid using the float property if you want your content to be centered. Instead, consider using the text-align property in the following way:

#detailsm h3{
    text-align: center;
    color: #696969;
}

Answer №2

float:center; Seriously?

If this is the desired outcome, then it seems to be working fine.

    #detailsm{
        padding: 30px 0 0 100px;
    }
    
    #detailsm h3{
        text-align: center;
        color: #696969;
    }
    Everything appears to be functioning properly.
    
    <div id="detailsm">
    <h2>Contact Info</h2>
    <h3>Automotive</h3>
    <p>ccdccdc cascara</p>
    <p>here</p> 
    <p>left 0110</p>
    <h3>Phone</h3>
    <p>03 022 0221</p>
    <p>03 022 8888</p>
    <p>03 322 1022</p>
    <h3>Email</h3>
    <p><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a0d3c1c3c1d3c3c1d3c3e0c7cdc1c9cc8ec3cfcd">[email protected]</a></p>
    </div>

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

The utilization of the Open Sans font family results in certain alterations to the user

Currently, I am working on developing a button widget using react. I have utilized the 'Open Sans' font family for the HTML body in order to maintain consistent UI styling. However, some of the styling elements break down when the 'Open Sans ...

Utilizing conditional styling in React: the ability to add or attach CSS classes based on

Is there a more efficient way to implement conditional formatting for this scenario? const PaginationStorePageLink = ({ store, pageNum }) => (observer(({ PaginationStore }) => { const className = this.props.store.currentPage === this.props.pageNum ...

What could be causing my item-list to malfunction in Vue.js?

I recently attempted to develop my own Vue.js application by following the provided documentation. Unfortunately, I encountered an error that has proven difficult to resolve. Despite my efforts to recreate the app as instructed, the list does not show an ...

The addition of a d3js chart caused the three-column layout to unexpectedly malfunction

I recently attempted to design a three-column layout with a header and footer. The first two columns were successfully constructed, creating a visually pleasing page. However, when I introduced a D3.js chart using dimplejs into the third column, my entire ...

Personalized radio button tags

Is there a way to ensure that all blocks are uniform in size with a 10px margin between them? Recently, the radio button was swapped out for a radio label, but now there is an issue with inconsistent sizes due to varying word lengths. How can this be res ...

Using jQuery to target the element before

Is there a way to determine the width of elements located before an element when it is hovered over? I attempted to achieve this using the following code: $('ul li').hover(function() { $(this).prevAll().each(function() { var margin = $(this ...

Ways to create spacing between grids in Bootstrap 4

Adjacent to one another are 3 divs styled with classes as follows: <div class="col-sm-12 col-md-4"></div> Is there a way for me to include margins on the left and right sides of these divs? When I try to add them manually - such as m ...

What are the steps to create a basic star-rating system?

I attempted to create my own star rating system using HTML and CSS, but encountered issues with its functionality. While solutions like using direction: rtl or float: right worked, I am unable to implement them due to constraints related to PHP. Is there ...

What is the proper way to submit a variable?

Allow me to clarify my situation as I believe my initial explanation may not have been clear enough. I am currently developing a webpage in Visual Studio using C#, however, my question pertains to the HTML aspect of it. I have successfully implemented loc ...

Interact with JSON data in HTML without the need for PHP by using read and write

I have managed to successfully execute this code using PHP. However, I am now looking to achieve the same functionality without relying on PHP. My main objective is to be able to modify the value of "sel" directly from a JSON file. Below are my PHP and JSO ...

It is impossible to add a new element between two existing elements that share the same parent

I'm attempting to place an <hr> tag between the first and second .field-container. Because they have the same parent, I thought using element1.parentNode.insertBefore(element2, ...) would be the solution. However, it is not working as expected a ...

Text is not visible when hovering over it

I am facing an issue with the hover effect on my menu element. When I hover over the element, the text does not appear as expected. Even after using z-index to position the text on top, it still doesn't work. Here is a snippet of my code: HTML: < ...

The basic loading animation in HTML, CSS, and jQuery is not functioning properly on the Chrome browser for

Encountering an issue with what I thought was a simple preloader. It seems to be functioning properly everywhere except for Chrome on iPhone5. The preloader appears but never fades out. Any assistance would be greatly appreciated. HTML: <div id="prelo ...

Using JavaFX to showcase FontAwesome icons

I've been working on a project to create a custom icon class that can load FontAwesome icons, but I'm facing issues with reading the fontawesome-webfont.ttf file. Here is the code for creating an icon: import javafx.scene.control.Label; import ...

Combining hover and mousedown event listeners in jQuery: Tips and tricks

htmlCODE: <div class="original_circle" style="border-radius: 50%; background-color: blue; width: 40px; height:40px; z-index: 0"> <div class="another_circle" style="position:absolute; border-radius: 50%; background-color: coral; width: 40px; h ...

What are the benefits of using Semantic mark-up and WAI-ARIA in a Tabbed Section?

Currently working on the structure of a website and aiming to improve accessibility skills. I'm curious about the most appropriate way to mark up tabbed content. Here's what I have so far: <section> <nav> <a href="#tab" aria ...

How can triple nested quotes be utilized within Django templates?

Currently, I am attempting to utilize inline CSS and load an image as a background in a Django template. My goal is to include three quotes, however, I am unsure of the correct way to achieve this. Can anyone provide guidance on how to properly modify the ...

Implement a tooltip feature that appears when hovering over a specific class within a span tag

In my TS file I have an HTML string that I am displaying in my HTML file. Within the text, there are span tags with a class called "highlight." I would like to create a tooltip that appears when hovering over this highlight class. The string/text is store ...

`Evaluating and contrasting information within a jQuery iteration`

Recently, I encountered an issue with a dynamically built table on my page that contains editable data fields. Here is an example snippet of the table structure: <tr> <td class="identifier">1</td> <td class="c1&q ...

Ensuring the accuracy of user input in JavaScript, even after fixing a mistake and submitting again, will not cause the code to exit the else clause

I am currently working on a coupon code field that needs to accept a specific set of coupon keys. Below is the code I have written for validation. If a user enters an invalid key at first, they receive an alert saying "Invalid Key." However, if they corr ...