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

The functionality of multiple UI-Views is not meeting the intended outcomes

I'm facing an issue with integrating multiple UI-views in my AngularJS dashboard app. Despite following the directory structure, I am unable to get it working as expected. This is how my directories are organized: index.html app/ app.js dash ...

htmlangularjsangular-ui-routerangularjs-routing

Bootstrap 3.2.0 Grid Column Creation Problem Identified

On my webpage using Bootstrap 3.2.0, I have a layout that includes dynamic column generation and content within those columns. However, I am facing an issue with this setup. Can anyone advise me on how to resolve it? Your help is greatly appreciated. ...

csstwitter-bootstraptwitter-bootstrap-3

Tips for organizing JSON data in AngularJS are as follows:

Can someone assist me in looping this array value into 3 columns using angularjs? Currently, my view appears as an HTML table with 3 columns, but the values are displayed vertically instead of horizontally. You can see an example of how it looks here. Bel ...

htmlangularjsjsonangularjs-ng-repeat

Maintain the link's functionality even after it's been clicked by utilizing the same

I have a fixed navbar with same-page anchors and I want to keep the link active after it has been clicked and taken to that section of the page. While this is simple for links to another page, I'm struggling to figure out how to do it here. Here&apos ...

javascriptjqueryhtmlcssnavbar

What is the best way to create an answer label box that validates your response?

I am looking to design a question box label that resembles a search box. In this unique setup, users will have the option to input their answer into the question label. For example, if the user types 'kfuffle' as the answer, they will automatical ...

javascripthtml

Fancybox causing issue with submit button functionality

When a link is clicked, I am triggering the opening of a submit button styled fancybox. The fancy box contains fields for username and password that need to be authenticated upon clicking the submit button (for now, the fancybox is just a submit button). ...

phphtmlfancyboxfancybox-2fancybox-3

Trouble with Bootstrap Modal not closing properly in Chrome and Safari

ISSUE: I'm facing a problem where clicking on the X (font awesome icon) doesn't close the modal popup as expected. LIMITED FUNCTIONALITY ON CERTAIN BROWSERS: Currently, the X button for closing the modal works only in IE and Firefox. However, i ...

javascriptcsstwitter-bootstrapbootstrap-4bootstrap-modal

Guide to changing the background colors of multiple elements when hovered over by the mouse?

I want to customize my website's search bar by changing the background color when it is hovered over. Currently, the search bar has two main elements: the text box and the submit button. I have successfully programmed the text box element to change to ...

javascriptjqueryhtmlcss

Changing the color of HTML text based on a variable in Vue JS can be achieved by altering the CSS styles dynamically

I have developed a website that shows values with a set threshold. I now want to change the color of the values when they exceed the threshold, but I am unsure of how to proceed. I want to display consultation.indicateurs.TRS in red when it exceeds the va ...

javascripthtmlvue.js

What is the reason for Safari 13 not displaying the outline during focus when a transition is applied?

In the current scenario, focusing on the button in Safari 13.0.5 does not display the outline until a repaint is forced (such as changing screen size). This issue does not occur in other browsers. Are there any workarounds or hacks to ensure the outline ...

csssafarifocuscss-transitionsoutline

Manipulate the contents of children divs within a parent div using JavaScript or JQuery

<div id="abc"> <div id="a_b"> abcd </div> <div id="c_d"> xyz </div> </div> I have a challenge where the divs on my page are generated dynamically and their IDs change every time the page loads. When the window i ...

javascriptjqueryhtmlcss

Creating a sidebar that remains fixed in place even as the page is scrolled down can be achieved by using CSS and positioning properties

I am looking to create a website with a specific layout design as shown in this image: https://i.stack.imgur.com/ndKcz.png The main focus is on making the sidebar (F/T container) function as a social network link, sticking to the right side of the page ev ...

javascripthtmlcss

Avoiding Page Reloads with Ajax while Removing Entries from a Table in Laravel

I am encountering an issue where I can click the button, but it requires a refresh to execute the delete action. Is there something in my ajax code causing this problem and why is it refreshing? I want the button to instantly delete without the need for a ...

phphtmlajaxlaraveleloquent

creating a form layout with inline buttons

I have encountered an issue with aligning 2 buttons and a form with input type in a single line. Even though I have tried different approaches, I am unable to achieve the desired inline layout. Here is my current setup: .btn-registerLayout { backgr ...

htmlcsstwitter-bootstrapbootstrap-4

Get rid of the border surrounding a main call-to-action button

While trying to override Bootstrap styles, I encountered a problem. Whenever the user presses a primary button <button class="btn btn-primary">Test</button> An annoying blue outline appears and I can't seem to remove it. I attempted to o ...

csstwitter-bootstrap-3

I can't understand why this question continues to linger, I just want to remove it

Is there a valid reason for this question to persist? I'm considering removing it. ...

javascripthtmlcss

Looking for a unique Full Screen Crosshair Cursor with either HTML5 or JQuery?

We've all seen that iconic military crosshair cursor in movies and animations. One example can be found at the beginning of a YouTube video titled "Dishonorable Disclosures" - https://www.youtube.com/watch?v=X-Xfti7qtT0 Another instance is with the ...

htmljqueryfullscreenmouse-cursorpanning

What could be the reason for the child elements not being centered in a bootstrap navbar in this basic code example

Take a look at the display output by clicking here -> http://www.bootply.com/VtPTgKeCLO Below is the code snippet: <nav class="navbar navbar-fixed-bottom top-main-navbar"> <div class="container"> <di ...

htmlcsstwitter-bootstrap

Utilizing the powerful combination of TailwindCSS and Next.js Image to achieve a full height display with

Trying to utilize the Next.js' <Image> component with the layout=fill setting, I created a relative div housing the Image tag. However, I am looking for a way to set the height based on the Image's height. Came across this example, but the ...

cssnext.jstailwind-cssnextjs-image

What is the best location to include my JavaScript code in WordPress?

Alright, so I've got this world map on one of my WordPress pages and here's an example of the code: <area onmousedown="modifyImage('world_map_01', './images/map/asia.jpg')" onmouseout="modifyImage('world_map_01', ...

javascripthtmlwordpress