What could be causing the p tag to be displacing the parent div downwards?

Can someone help with an issue I'm having? I have two divs that are supposed to take up half of the screen each. However, when I add a p tag inside the second div, it gets pulled down. I am working on creating an HTML email, so I can only use inline styling and can't reference external stylesheets or grid systems.

If you need more context, here is an example: https://jsfiddle.net/jzcxhp2L/1/

<div>
  <div style="display: inline-block; width: 49%; height: 300px; border: 1px solid black;"></div>
  <div style="display: inline-block; width: 49%; height: 300px; border: 1px solid black;">
    <p>Lorem ipsum dolor</p>
  </div>
</div>

htmlcssinline-styles

Answer №1

<p> is a block element being nested inside an inline element, causing layout issues. Block elements should start on a new line and have full width.

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

For more information on block-level elements, visit: https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

You may find this alternative layout more suitable for your needs: https://jsfiddle.net/jzcxhp2L/7/

<div style="display: flex; height: 300px; width: 95vw; margin:0 auto;">
  <div style="border: 1px solid black; height: 300px; flex:1;">
    <p>asdlfadsf</p>
    <p>asdlfadsf</p>
  </div>
  <div style="border: 1px solid black; height: 300px; flex:1;">
    <p>asdlfadsf</p>
    <p>asdlfadsf</p>
    <p>asdlfadsf</p>
    <p>asdlfadsf</p>
    </div>
</div>

Answer №2

To achieve the desired layout, simply include float:left; in your CSS code for the elements and adjust the margin to suit your design preferences.

<div>
    <div style="display: inline-block; float: left; margin: 5px; width: 49%; height: 300px; border: 1px solid black;"></div>
    <div style="display: inline-block; float: left; margin: 5px; width: 49%; height: 300px; border: 1px solid black;">
        <p>Lorem ipsum dolor</p>
    </div>
</div>

Answer №3

To enhance your styles, include the CSS property float:left;. Additionally, when applying a border, consider utilizing box-sizing:border-box; to prevent the border from impacting the element's width.

I trust this information proves beneficial.

Answer №4

<p> has its own unique margin style

Experiment by setting the margin-top and/or bottom to 0px

p {
    margin-top: 0px ;
    margin-bottom: 0px ; 
}

Alternatively, assign a class with display = inline to your <p> tag

.class-inline {
    display: inline ; 
}

Or use inline styling:

<p style="display: inline">

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

Unchecked Checkbox Issue in Yii2

Currently working with yii2 and trying to check my checkbox: <?= $form->field($model, 'is_email_alerts')->checkbox(['label'=>'','checked'=>true,'uncheck'=>'0','value'= ...

phphtmlyii2

CSS - Creating a stylish break line for link boxes

Struggling with creating a box that includes linked text and a line break. However, the issue arises when the line breaks, causing the box to also break. After trying multiple options, I still can't seem to find a solution. Check out my attempt her ...

htmlcssline-breaks

Turn off the feature that highlights links

Hi there! I'm curious to know if it's feasible to remove the highlighting effect when clicking on a link. I'd like the link to function more like an image, without the appearance of a highlighting box upon clicking. ...

javascripthtmlcss

The unique and personalized accordion panel is experiencing technical difficulties

Here is the accordion script I am using: $(document).ready(function(){ $(function(){ // Accordion Panels $(".accordion span").hide(); $(".accordion li").click(function(){ $(this).next(".pane").slideToggle("fast").siblings(".pane:visible").sl ...

phpjqueryhtmlmysql

Guide on incorporating JSON information into an HTML table

Currently, I am retrieving data that needs to be added to an HTML table once it is received. I have attempted some methods, but I am unable to dynamically add the data after the page has loaded. I aim to accomplish this using either JavaScript or jQuery. ...

javascripthtmljsondomaddeventlistener

Is there a way to modify the variable in order to switch the font of the heading every second using CSS and JavaScript?

I'm trying to create a heading that changes fonts every second, but I'm having trouble changing the variable to set it to another font. Check out my code here. Despite watching tutorials, everything seemed too confusing. var root = document.q ...

javascripthtmlcss

Tips for modifying the appearance of an anchor <a> element within a table cell with jQuery

One issue I am facing involves changing the style of a specific element within a table cell using jQuery. The change needs to be based on the value in another cell. Below is the table structure: <table id="table"> ...

javascriptjqueryhtmlcss

Is there a way to adjust the position of ::before elements without affecting the border placement?

I'm struggling with an element that has a CSS style ::before to display an arrow-up inside a black circle. Check out the code here The issue I'm facing is that the character \25b2 isn't centered vertically within the circle. Adjustin ...

css

The image spills out of its confines

Looking to create a dialogue box that fills the entire width and height of the screen? Want to divide its content into two sections - an image and a footer area with 2 rows of height? Struggling to contain the image within its designated space without over ...

htmlcsstailwind-css

Is the user currently browsing the 'Home screen webpage' or using the Safari browser?

In JavaScript, is there a method to determine if the user has accessed the website from their home screen after adding it to their home screen, or if they are browsing via Safari as usual? ...

javascriptioshtmlmobilesafari

What steps should I take to make the code in jsfiddle functional on my Visual Studio Code platform?

const canvasEle = document.getElementById('drawing-container'); const canvasPad = document.getElementById('pad'); const toolbar = document.getElementById('toolbar'); const context = canvasEle.getContext('2d'); const ...

javascripthtmlcsscanvasjsfiddle

Angular 8 implementation of a responsive readonly input text field styled with Bootstrap 4

I want to make the input text read-only using Bootstrap. After some research on the Bootstrap website, I discovered that the form-control-plaintext class can be used for this purpose. <input type="text" readonly class="form-control-plaintext" id="stat ...

htmlcssangulartwitter-bootstrapbootstrap-4

Is there a way to determine if the tab has been muted by the

Chrome enables users to easily mute tabs by right-clicking on them and selecting Mute Tab. I am curious about whether there is a method to detect when a user has muted the tab. In other words, I am interested in knowing if it's possible for a website ...

javascripthtmlgoogle-chrome

Displaying data from a JSON object to a DOM table can be achieved by dynamically generating table columns based on the keys within

There is a JSON object that I'm working with: [ { "SysID": "4", "Defect Classification": "Wrong Image Color", "1": "3.0", "2": "", "3": " ...

htmlangular

What is the best method for saving a chosen radio button into an array?

I am currently developing an online examination system where questions are retrieved from a database using PHP and displayed through AJAX. I am facing an issue where I am unable to capture the selected radio button value and store it in an array. Despite e ...

javascriptphphtmlajax

Tips for managing content size in the Bootstrap column system

I am facing an issue with my bootstrap grid setup. I have a card with an image inside a column, but the card does not occupy the full width of the column. How can I fix this? View current state of my column I've experimented with adjusting the width ...

htmlcssbootstrap-5

What steps should be followed to effectively incorporate Google Fonts into a Material UI custom theme for typography in a React/TypeScript project

Hey there, I'm currently working on incorporating Google fonts into a custom Material UI theme as the global font. However, I'm facing an issue where the font-weight setting is not being applied. It seems to only display the normal weight of 400. ...

cssreactjstypescriptwebpackmaterial-ui

What is the best way to center a Div element without it scrolling?

Can someone assist me in resolving this problem? I am struggling to design a webpage with two images inside a div, centered on the screen. Currently, it is centered but I do not want it to be scrollable. My goal is to display the full image without needing ...

htmlcss

Could images be positioned in this manner without using the float property?

Looking to arrange images in a left-to-right flow while keeping them centered on the screen: https://i.stack.imgur.com/WHBv9.png However, I'm struggling to achieve this as the last image always ends up centered horizontally as shown below: https://i ...

htmlcsscss-floatcss-position

Creating various iterations of a single CSS animation

Attempting to animate multiple instances of a cross mark animation can be tricky. The animation works well with one instance, but struggles when trying to create more than one. The challenge lies in controlling the size and position of each cross animation ...

javascripthtmlcss