Center text within a div container

I am facing an issue with a nested div element:

        <div id="footer">
            <div id="footer_text">
                <p>My foooo text</p>
            </div>
        </div>

The CSS code for the nested div is as follows:

#footer
{
    position: absolute;
    bottom: 0px;
    margin-bottom: 5px;
    margin-right:50px;
    margin-left:50px;
    width:90%;
    height:16px;
    color:white;
    font-size:12px;
    background:#000000;
    border-style:solid;
    border-width:1px;
    border-color:#F0FFFF;
    text-align: center;

}

Everything seems to be working fine in firefox 7. However, I encountered an issue where the text goes outside the div border and causes a vertical scroll bar to appear when I include the following line:

<p>My foooo text</p>

I have tried several solutions without success so far...

htmlcss

Answer №1

The reason for this behavior is that the p element comes with default margin values.

A useful solution to address this issue is by resetting margins and paddings for all elements at the beginning:

* {
padding: 0;
margin: 0;
}

Alternatively, you can specifically target the p element like so:

p {
margin: 0;
}

In addition, setting the height of a footer may not be necessary if you utilize paddings instead. By applying equal top and bottom padding, you will achieve automatic vertical centering for your content.

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

Utilize Android accelerometer data to bring objects to life with animation

Utilizing an Android app, I am streaming accelerometer data to a Python script on my PC. The data is then saved to a text file. My goal is to utilize Javascript and jQuery to animate a 3D CSS cuboid (representing the device) to replicate the movements capt ...

javascriptandroidjquerypythoncss

The TinyMCE extension in Yii fails to load CSS files when accessed through a subdomain

My Yii application located at site.com/module has the tinymce extension installed, but I am facing an issue where the tinymce CSS files are not loading when I access the application through the sub-domain alias module.site.com. Interestingly, all JS file ...

cssyiitinymce

The text alongside the radio button is not aligned vertically

Hello, I am attempting to vertically align text next to my radio button but encountering some issues. .radio { cursor: pointer; display: inline-flex; } .cui-a-radio-button__input { display: none; } .cui-a-radio-button__input:disabled + .cui-a-rad ...

htmlcss

Navigating the World of CSS Selectors - Balancing Style Control Without Excessive Class Usage

I recently stumbled upon a responsive menu that I wanted to incorporate into my webpage design. However, as I delved deeper into the implementation process, I realized that the CSS code associated with the menu was targeting all ul, li, a elements on the e ...

htmlcss

What is the process for applying a filter to a background image within the body of a webpage?

I'm attempting to apply a filter to the background image of the body element. Currently, I have implemented the following code: body { background: url("/img/congruent_pentagon.png"); color: white; font-family: "Raleway"; -webkit-filte ...

css

JavaScript math validations not functioning correctly

This new project I've been working on involves presenting a multiplication problem and notifying the user if their answer is correct through an alert. The issue arises when the program incorrectly verifies the answers. Take a look at the code: < ...

javascripthtmldom

Tips for emptying the fields and restoring a form within a modal once it has been closed

I am facing an issue with a form inside a modal where the fields initially have red borders to indicate they are mandatory. However, when I fill out each field and then close the modal, the fields are cleared but the red borders indicating their mandatory ...

javascripthtml

What is the best method to exclude the <a> tag when displaying content in HTML?

Is there a way to hide the link within an a tag when printing? .p { display: none; } @media print { .p { display: initial; } .np { display: none; } } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css ...

htmlcss

My HTML form submission to the node.js file is stuck in an endless loading loop

As I work on setting up a basic form submission on my server to collect contact information, I run into an issue. The data is successfully received by my node.js server file upon submission but when I attempt to submit the form, the page tries to load the ...

javascripthtmlnode.jsexpress

Issues with the alignment of ion-grid in Ionic/Angular application

I am facing an issue in my ionic/angular project where I am attempting to create two columns within a row using ion-grid, ion-row, and ion-col. However, the content of the second column is unexpectedly appearing below the first column instead of beside it. ...

cssangularionic-framework

Strange FontAwesome input placeholder issue

I'm trying to use an icon from FontAwesome in the placeholder of an input field. Here is my code snippet: <input type="password" name="password" placeholder="&#xf023; &nbsp; Password"> However, when I view it on the screen, it appear ...

htmlcssfont-awesome

Steps to creating a proper cascade using the label statement

I am currently customizing the appearance of a checkbox. The HTML code in the file called fin1.cfm is as follows: <td>Master Event:</td> <td> <input type = "checkbox" id = "cb_e" name = "datesumm" value = "" > <label f ...

htmlcss

The checkbox label should be centered directly beneath the checkbox

I'm feeling a bit lost. I came across this code snippet on jsfiddle: https://jsfiddle.net/rx90f38u/1/ There seems to be some styling included, but I can't figure out why the "remember" me text is showing below the checkbox. The checkbox and it ...

htmlcssformscheckbox

Employ the JQuery Datepicker functionality to enhance the user experience

Is it possible to integrate jQuery Datepicker into a web page that includes an iframe? And where is the optimal placement for linking the CSS and script references? ...

jqueryhtmljquery-ui

What strategies can be employed to prevent the need for custom classes for each individual paragraph or list item in order to maintain consistent styles within a

Bootstrap typically removes default paragraph margins and list styles for a cleaner look. However, there may be cases where you want to maintain the default styles for paragraphs and lists within a section of user-generated content on a Bootstrap 5-styled ...

csstwitter-bootstrapbootstrap-5

Issues with slideToggle in IE8 caused by CSS in JQuery

I am facing an issue where my div elements are supposed to toggle visibility using jQuery's "slideToggle" function (I'm utilizing jquery-1.2.6.min.js). This functionality is working as expected! However, I am encountering a problem specifically w ...

jquerycssmargin

What is the process for adding color to HTML elements?

Is there a way to assign unique random colors to each individual p tag in ReactJS? function App() { return ( <div> <p style={{ color: "#7fbd73" }}>Hi</p> <p style={{ color: "#3a82e4" }}>Hello</p> < ...

htmlcssreactjs

In JavaScript, it is necessary to determine if a checkbox is checked when modifying an input box

I have a table where each <td> contains an input box and a checkbox like this: <td> <input class="Comment" type="text" data-db="comment" data-id="{{uid}}"/> <input type="checkbox" id="summary" title="Check to set as Summary" / ...

javascriptjqueryhtml

Revised: "Redesigned CSS class names taken from a

I created a React component library using mantine with @rollup package. This library comprises custom components styled with styled-components and CSS module (.module.css) files. All the css modules are bundled in javascript and injected into the body htm ...

cssreactjsnext.jsrollup

Tips for displaying two input decorations in Material UI beside one another within a text field

In the Text Field demonstration, I noticed input adornments at the start and end. However, I am looking to have two input adornments at the end specifically. I attempted to add them using endAdornment: {InputAdornment InputAdornment}, but encountered an er ...

javascriptcssreactjsmaterial-ui