The downside Div is being displaced by a Paragraph with an overflow-y:scroll property

In my Div, I have set the width and height of a paragraph along with the property overflow-y:scroll. It's working fine as the paragraph is displaying with a vertical scroll. However, it is causing displacement in the div below.

Below is the HTML code:

<div id="bodydesc" style="margin-left:auto; margin-right:auto; width:960px; height: 600px;">
    <p id="desc" style="float:left; overflow-y:scroll;color:#666666;height:590px; width:700px; font-family:Candara,Trebuchet MS,sans-serif; font-size:12px; font-weight:bold; border-right: thin dotted #666666; line-height:18px;"></p>
</div>

<div id="footer" class="footer-shadow">
    <div style="margin-left:auto; margin-right:auto; width:960px;"></div>
</div>

Here is the CSS for the class footer-shadow:

.footer-shadow{
    background-image:url('../img/new_images/footer-bg.jpg');
    height:170px;
    width:100%;
    color:gray;
}

The 

<div id="footer" class="footer-shadow">
is moving down, displacing from its original position. Please assist me with this issue.

htmlcss

Answer №1

Before anything else, it's important to confirm that your HTML syntax is error-free. Double-check to ensure that all <div></div> tags are properly opened and closed.

In addition, consider incorporating the float:left property into the styling of your .footer-shadow element. This should prevent any unwanted line breaks in the layout.

Answer №2

For proper display, ensure the div with the overflow-y attribute has a specific size set in pixels.

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

Utilizing PHP Code within Inline CSS in HTML guides

Is it possible to integrate PHP code into Inline CSS? Here is an example: Check out this code snippet: <div class="col-auto"> <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">%22</div> </div> <div ...

phphtmlcssbootstrap-4

Adjusting HTML/CSS for various screen sizes and devices

I have designed a website, but when it is viewed on devices like iPad or iPhone, the layout does not adjust to fit the screen properly. The text box containing my name and social media buttons appears on the left side, while the background image is positio ...

htmlcss

Discover an improved method for creating a custom list style using Unicode Numbers in CSS

I am interested in creating a unique list type using Khmer Unicode Numbers ១ ២ ៣.. in a precise order. To achieve this, I attempted to utilize CSS pseudo-classes li:nth-child(1) li:nth-child(2) li:nth-child(3).. defined in my stylesheet as follows: ...

htmlcss

Modify the arrow design for the expansion panel's default arrow style

Looking to customize the design of an angular expansion panel? Check out the images below for inspiration: Before Customization: After Customization (Not expanded): After Customization (Expanded): Wondering how to achieve this look using angular materi ...

cssangularangular-materialangular-material2

When initially loaded, the Bootstrap Datepicker displays an inaccurate calendar

I implemented Bootstrap Datepicker to insert a date input field into my HTML document. Below is the code I used: HTML: <input type="text" name="manifest-date" class="calendar form-control" placeholder="M-d-yy" id="manifest-date" value="{{$currentDate} ...

javascripthtmltwitter-bootstrap

The appearance of my HTML is distinct on Chrome for Windows and Safari for OSX

I have designed a prototype of some HTML code, but my website appears differently on Safari compared to how it looks on Chrome. While it displays correctly on Chrome, on Safari (both on OSX and mobile phones) the alignment seems off and randomly centered i ...

htmlcssmacosgoogle-chromesafari

Tips for managing responsive font sizes as screen size decreases

Hey there, I could really use some assistance with a new website I've been working on. While I have experience building Joomla sites for the past 6 months, this is my first attempt at making a responsive site using media queries. You can check out th ...

htmlcssresponsive-designjoomla3.0

Making sure the checkbox stays selected in an angular environment

After experimenting with Angular 9 and a custom input, I achieved the following result => https://stackblitz.com/edit/angular-ivy-rgsatp My goal was to prevent users from disabling a radio button that is currently checked. Therefore, I made changes in ...

javascripthtmlangular

Which element is able to utilize the inline-block style?

Currently, I am delving into the intricacies of the inline-block attribute and have a basic understanding that it allows elements to sit on the same row rather than stack on top of each other as they would in a normal layout. However, my grasp on how exact ...

htmlcss

upright scrolling mouse slider

In my project, I have implemented a vertical slider with mousewheel control using SwiperJS from https://swiperjs.com/. Although the slider is working perfectly fine, I am looking to fix the positions while scrolling on the page similar to the example pro ...

javascripthtmljquerycss

I'm struggling to understand why the background-color is affecting the margins as well

Check out this code snippet: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <style type="text/css"> * {border: 0px; padding: 0px;} ...

cssmarginbackground-color

Troubleshooting Django: Issue with template extension causing static image not to be found in child template

For my personal project, I decided to learn Django. Initially, I created two separate apps, "API" and "Search". As development progressed, I merged the search functionality into the API app and updated the views accordingly. I also designed a base template ...

htmldjangodjango-templatesdjango-staticfiles

Set the text alignment to the left/start inside a div contained within a Material UI Box

Trying to figure out how to make the error handling ui of this field look like another field's error handling ui. Note that in the second example, the error text is aligned to the left. How can I achieve this alignment without considering text color ...

htmlcssreactjsmaterial-uiinline-styles

What is the best way to create a video that adjusts to different screen sizes within

I am working on the responsive version of client's website and I stumbled upon this issue - when I make smaller the browser window, the youtube video is not centered - the padding-right: 10px; is ignored - why? How could I fix that? Here is the CSS ...

htmlcssresponsive-design

Utilizing ASP.NET with JavaScript to target elements by ID within an iframe

Struggling to populate my form within an iframe by inputting a value in a textbox and selecting an option from a dropdown menu. webform1 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title ...

javascriptjqueryhtmlasp.netiframe

Is there a way to prevent HTML code from being executed when sharing it as text? I want to be able to share code without it being activated as HTML on the page

Seems like I have a straightforward issue related to HTML tags. I am looking to post some code snippets on my blog, specifically the <h1> heading</h1>. I want visitors to view and not just the bolded text of heading. Do I need to incorporate J ...

html

A guide on defining the width of an element within a flex container when it overflows

Here is the code snippet I have: .divA { background: red; width: 500px; display: flex; flex-direction: row; overflow-y: scroll; } .epi { width: 50%; background: blue; } <div class="divA"> <div class="epi"> <h1>dsds ...

css

HR | extends all the way down the table, creating a vertical boundary

I am currently working on developing an Email Signature Generator. My goal is to extend the blue line (visible in the program) all the way down without affecting the layout of other elements. I suspect that because everything is contained within a table, a ...

htmlcss

Tips for using the foreach loop to print out multiple arrays

I am working with two arrays in PHP: post_titles and posts. I need to figure out how to print them sequentially using a foreach loop. Printing one array at a time is not an issue, as shown below: <?php foreach ($titles as $row) { ?> <?php ec ...

phphtmlcodeigniter

The jQuery click event is failing to trigger

I am facing an issue with some buttons that have specific classes. Here is an example: https://i.sstatic.net/CVIR2.png Each of these buttons contains JSON data stored in a data attribute. I have created a function to detect when a button is clicked and p ...

javascripthtmljqueryjquery-events