CSS Issue: When nesting divs, text moves to the top of the second page

Currently, I am using the following HTML and inline CSS:

<div style="width: 975px; clear: both; float: left; text-align: left; margin: 0;
    background-color: #D3D3D3;">
    <div style="width: 384px; float: left; height: 20px; margin: 0;">
        <span style="font-style: italic; font-size: 13px; padding-left: 80px;">Test Group 1</span></div>
    <div style="background-color: #BEE0F7; width: 165px; height: 20px; float: right;
        padding: 0; margin: 0; font-weight: bold; border-bottom: 3px double;">
        <div style="font-size: 13px; padding-left: 8px; text-align: right; width: 70px; display: block;
            position: absolute;">
            $0.00</div>
        <div style="font-size: 13px; padding-left: 90px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00</div>
    </div>
<div style="background-color: #CFF5CE; width: 166px; height: 20px; float: right;
    margin: 0; font-style: italic; font-weight: bold; border-bottom: 3px double;">
    <div style="font-size: 13px; padding-left: 80px; text-align: right; width: 70px;
        display: block; position: absolute;">
        $0.00</div>
    <div style="font-size: 13px; text-align: right; width: 70px; display: block;
        position: absolute;">
        $0.00</div>
</div>
...

The issue arises when the page needs to break onto the next page in print preview. The content gets jumbled up at the top of the second page as shown in this image.

I suspect that it may be a problem with floats or inline/block elements causing this layout issue. Any insights on what might be causing this problem?

asp.netcss

Answer №1

To achieve the desired layout, consider using the HTML markup below:

<div class="clearfix" style="width: 975px; float: left; text-align: left; margin: 0;
    background-color: #D3D3D3;">
    <div style="width: 384px; float: left; height: 20px; margin: 0;">
        <span style="font-style: italic; font-size: 13px; padding-left: 80px;">Test Group 1</span>
    </div>
    <div style="background-color: #BEE0F7; width: 165px; height: 20px; float: right;
        padding: 0; margin: 0; font-weight: bold; border-bottom: 3px double;">
        <div style="font-size: 13px; padding-left: 8px; text-align: right; width: 70px; display: block;
            position: absolute;">
            $0.00
        </div>
        <div style="font-size: 13px; padding-left: 90px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00
        </div>
    </div>
    <div style="background-color: #CFF5CE; width: 166px; height: 20px; float: right;
        margin: 0; font-style: italic; font-weight: bold; border-bottom: 3px double;">
        <div style="font-size: 13px; padding-left: 80px; text-align: right; width: 70px;
            display: block; position: absolute;">
            $0.00
        </div>
        <div style="font-size: 13px; text-align: right; width: 70px; display: block; position: absolute;">
            $0.00
        </div>
    </div>
    ... (remaining code)
    </div>
</div>

You can enhance the styling with the following custom CSS:

<style type="text/css">
 .clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
  }

.clearfix {
   display: inline-block;
 }

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

</style>

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

How to ensure MUI DataGrid fills the vertical space without any overflow issues

Trying to implement a MUI DataGrid within a Flexbox layout that fills the remaining space precisely can be quite challenging. Imagine a setup like this: --------------------------- | Header | --------------------------- | Table Header ...

cssmaterial-uiflexboxmui-x-data-grid

An error has occurred: The Visible property for this Web Part cannot be modified

In my previous question, I discussed the issue of controls on UpdatePanels not working properly. Interestingly, this problem only seems to occur on intranet clients outside of the main location. While troubleshooting, I installed FireBug on a client in th ...

asp.netsharepoint-2010

Aligning the Bootstrap navbar to the right causes the items to shift to the left

UPDATE: The issue has been resolved. It turns out that the navbar was not extending to 100% width and reaching the edges of the screen. I am currently facing a challenge with a Bootstrap 4 navbar, similar to issues I encountered with the previous version. ...

htmlcssalignmentnavbartwitter-bootstrap-4

What is the best way to set the background opacity to 0.7 without impacting the content within it?

Currently, I'm facing an issue with two divs - the outer one is identified as "BD" and the inner one as "content". Whenever I attempt to reduce the opacity of BD's background-color, the content inside also becomes less opaque including both image ...

htmlcss

Hiding the Template Field Edit column in a Gridview can be achieved by implementing a conditional check based on the number

In my gridview, I have the ability to add and delete rows. However, I want to prevent users from deleting the first row. Is there a way to disable the edit option for only the first row? ...

asp.netgridview

css Sibling elements restricted within parent container

Encountering an issue with a star rating css example when more than one fieldset is added. The current CSS code seems to be working fine, but it fails when multiple instances of the same elements [fieldset] are present. I've been struggling to find a ...

htmlcssratingsiblings

"Safari is not displaying the element's height correctly when set to 100

I am facing an issue where I have a child div vertically centered under a parent div with a specific height. The child div is assigned the height:100% property, but it seems to be not working correctly on Safari only. To see more about this problem, you ca ...

cssmacossafariheight

Guide to: Implementing Radio Buttons to Adjust Image Opacity

How can I dynamically change the opacity of an image using JavaScript when a radio button is clicked? I attempted to achieve this using a forEach function, but the current code causes all images to instantly switch to opacity 1; Additionally, after refre ...

javascripthtmlcss

Transform a div's style when hovering over another div using absolute positioning without repetition

I am facing an issue with multiple divs positioned absolutely on top of a primary div with relative positioning. I want one specific div to change its background-color when hovering over another div within the same parent div. Though I know about ad ...

javascriptjqueryhtmlcss

arranging texts in a vertical stack with wrapping

Looking to change the orientation of my horizontally wrapped list items from vertical to horizontal. Take a look at my code snippet: HTML <ul> <li>Long text goes here.</li> <li>Another Longer Text Goes Here</li> < ...

htmlcsswhitespaceword-wrap

What is the most effective way to utilize bootstrap classes and their associated functions exclusively for mobile devices by using media queries?

I am encountering an issue with a table in my application that causes the UI to break when the screen width is reduced to less than 600px. To address this, I would like to implement the following bootstrap classes to add a scroll to the application: .tabl ...

csstwitter-bootstrapresponsive-designmedia-queriescss-tables

CSS: Only one out of three <div>'s has the styles applied in JSFiddle

When working on my project, I encountered an issue while trying to add CSS styles to three <div> structures with unique IDs. Strangely, making small changes to unrelated CSS caused elements to go from being stylized to losing their style. If you com ...

jquerycss

Arranging multiple Label and Input fields in HTML/CSS: How to create a clean and

I'm struggling with HTML and CSS, trying to figure out how to align multiple elements on a page. I've managed to line up all the rows on the page, but for some reason, the labels are appearing above the input fields when I want them to appear be ...

javascriptjqueryhtmlcss

What is the best way to change the size of a QR code

My current HTML code: <input id="text" type="text"/> <div id="qrcode"></div> Previous version of JAVASCRIPT code: var qrcode = new QRCode("qrcode"); $("#text").on("keyup", function () { qrcode.makeCode($(this).val()); }).keyup().focus ...

javascriptjquerycsskendo-uiqr-code

Border for status input like on Facebook

I tried to investigate with Firebug, but struggled to find a solution. How does Facebook wrap the border around the autosize input in the status section? I am particularly curious about the small triangle attached to the border. While using Firebug, I loca ...

htmlcssfacebookinput

What are some ways to customize the appearance of my ReactJS application while it's being viewed on Chrome on

I'm currently in the process of running my ReactJS app on a Panasonic Vierra Smart TV browser. After importing core-js and babel-polyfill, I managed to load the webpage but encountered an issue with the UI alignment. The styling does not display corre ...

cssreactjssmart-tvbabel-polyfill

Shifted picture next to the accompanying words

I have successfully created a slideshow of images using JavaScript. <html> <head> <script language="JavaScript"> var i = 0; var path = new Array(); path[0] = "one.jpg"; path[1] = "two.jpg"; function swapImage() { document.slide ...

javascripthtmlcss

Tips for applying CSS styles to the active page link

Check out the code below: Is there a way to assign a specific class to the current page link so that the mouse cursor will display as default rather than changing to a hand icon? I'm looking for a solution where I can apply a class to the active lis ...

javascriptjqueryhtmlcss

Ways to create a unique animation for reducing the width of a div in a specific direction?

Currently, I have managed to animate the decrease in width of a div element. However, it is currently decreasing from right to left, and I would like it to decrease from left to right instead. Can someone please provide guidance on how to achieve this? ...

htmlcssanimation

Text and Image Coordination

I'm encountering some challenges with a specific section. My goal is for it to resemble this. However, I am currently achieving something different, like this. .timeline { text-align: center; } #about-us { ul { &:before { ...

htmlcsstwitter-bootstrap-4