The right side alignment is malfunctioning

I need assistance with creating a section on a webpage that resembles a piece of paper, where there is content displayed on white background against a grey background. Here's what my CSS currently looks like:

body
{
    background:grey;
}

.page
{
    display: table;
    background:white;
    width:100%;
    margin: 0px 50px;
}

This is how my php file is structured:

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css"/>
    </head>
    <body>
        <div class="page">
        hello this is the content
        </div>  
    </body>
</html>

However, when I view the page in Firefox, the right margin extends all the way to the edge of the screen instead of being properly padded like the left side...

htmlcssmargin

Answer №1

Have you considered wrapping your content in a div with the class name page?

After that, you can include another div element with the class attribute set to content. Here's an example:

body
{
    background:grey;
}

.page
{
    display: table;
    background:white;
    width:100%;
}
.content{
    background:red;
    margin: 0px 50px;
}
<br><br>
<div class="page">
   <div class="content">hello this is the content</div>
</div>

Answer №2

The div element has a width of 100% and a left margin of 50px, causing it to be pushed 50px from the left edge of the body. The lack of a visible right margin is due to the div's width being equal to that of the body, extending past the viewport.

To remedy this issue, simply remove the width declaration and set the display property to block.

.page {
    display: block;
    background:white;
    margin: 0px 50px;
}

A div is inherently a block-level element, so it will automatically fill its container (the body). There is no need to explicitly set the width to 100%, and while not required, I included the display declaration to highlight the transition from table to block.

Answer №3

It's interesting to see the .page class declared with a display:table property, even though there is no content wrapped in a display:table-cell element within it. If you intend to keep it as display:table, then consider removing the margin and applying padding to its parent (in this case, the body).

body {
    background: lightblue;
    padding: 0 25px; /* added padding */
}
.page {
    display: table;
    background: beige;
    width: 100%;
    /* margin removed */
}
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css"/>
    </head>
    <body>
        <div class="page">
        Hello, this is some content
        </div>  
    </body>
</html>

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

Should the "if IE" conditional comment be used to dictate the content that is shown?

In my HTML login form, I am faced with the challenge of only displaying it to users using Internet Explorer due to preexisting design constraints, even though it's not an ideal choice. I want to show an error message to users accessing the form with a ...

htmlinternet-explorercross-browser

Encountering a tucked-away issue with the Safari scroll bar?

Encountered an interesting bug where users are unable to scroll down a text nested inside a div. This issue seems to be isolated to Safari, as it doesn't occur in other browsers. I have prepared a sample file to demonstrate the bug and would apprecia ...

javascriptjqueryhtmlcsssafari

What is the best way to save a PDF from within a frame using JavaScript and an HTML5 <embed> tag?

I'm looking for assistance with a script for my website that dynamically generates a PDF after the user makes selections in one of the frames. The website uses the HTML5 tag to display the PDF file. Can anyone provide guidance on a script that can: ...

javascriptioshtmlpdf

I am experiencing an issue where the repeat-x property on my background image is causing it

Currently, I'm facing an issue with a background image that has the repeat-x property. Oddly enough, it appears to be working properly on Windows OS but not on Mac. Whenever I access the website, there seems to be a significant amount of white space c ...

cssbackground

Struggling with getting the tabbed slider carousel to function properly in Bootstrap 4?

I attempted to incorporate this code snippet: The only modification I made was using these imports: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootst ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

Is it possible to operate a mobile site automatically alongside a desktop site?

I'm currently working on a website that looks fantastic on desktop, but doesn't quite function properly when viewed on mobile devices. I'm curious if there is a method or system I could implement to automatically load the mobile version of t ...

htmlcssresponsive-design

Looking to Identify a Click Within a Complicated Component and Retrieve the Component's ID

Currently, I am working with React for development and have a need to capture clicks at the topmost parent level for performance reasons. const clickHandler = (e) => { console.log("clickHandler", e.target) --> I want to identify the child ...

javascripthtmlreactjs

Fixing the alignment of the left column table in Bootstrap 3.3.7

Is there a way to fix the left table column (date and all column names) in Bootstrap 3.3.7? I attempted to use position: fixed; but it didn't work as expected. Any suggestions on what I should do next? Check out this fiddle for reference <scr ...

jqueryhtmlcsstwitter-bootstrap

What could be causing the background color not to change on the HTML page with Bootstrap?

Learning html, bootstrap, and css styling can be a confusing endeavor. Sometimes things don't work as expected, like changing the background color. Despite following what seems like a simple solution after googling, the background color remains unchan ...

javascripthtmlcssbootstrap-4

The border length of the unordered list is equal to half of the length

I would like the blue borders of these "ul" elements to be centered beneath the black "li" elements, with a width that is 50% of the child width. However, I'm unsure about how to achieve this. I attempted using ":before", but it only seems to work for ...

htmlcss

Adding text on top of images for optimal mobile viewing

I'm struggling to ensure that the text stays contained next to the image. It's working fine on desktop and tablet, but I'm facing challenges with mobile. While I have managed to improve it slightly, I can't figure out what exactly I am ...

csswordpress

Retrieve the class name from a CSS stylesheet

How can I extract all the CSS class names from a CSS file? This is what my CSS file looks like: p.juicy{ margin-left:40px; } p.csBody{ text-align:justify; } p.csCode{ font-family:"Lucida Console", Monaco, monospace; background-color:sil ...

c#css.netwinforms

Why isn't the background of the container div at the top when using multiple CSS sheets?

I am revitalizing a dull website and seeking feedback on my template design here: Check out the ideal look It's quite lovely! However, as I attempt to incorporate my background, menu, and footer elements, I seem to be experiencing issues with my con ...

csshtml

PHP and JQuery not working together to update database

Essentially, I am trying to update the status based on the unique id. Despite no errors being thrown, the status remains unchanged. index.php $(document).ready(function() { $('.seatCharts-seat').click(function(){ var id = jQuery(th ...

phphtmljquerydatabase

What is the process for creating a Sass mixin that declares a selector at the base level, rather than nested within another

Apologies for the unconventional terminology in the query, but I am struggling to find better words to describe it. Hopefully, this example will clarify my intention: scss-syntax .my-smug-selector { @include my-smug-mixin(30px); } desired css-output ...

csssassmixins

Recursive PHP function to create a category tree structure

I am facing an issue while trying to create a table of categories through recursive iteration of an array. The table generation works well when the depth increases, however, there seems to be a problem with the HTML output when the depth decreases. Below ...

phphtmlarraysrecursiontree

The fluid table within the Bootstrap container is not adapting to different screen

Can't figure out why the bootstrap container fluid table is not responsive. Even though I used an example of My First Bootstrap Page that works fine and is responsive, this particular table remains unresponsive. I want to avoid using a scroll but will ...

phphtmlcssbootstrap-4

Utilizing Ajax to retrieve an array of input textboxes and showcase the outcome within a div container

This is the form that I have designed for displaying information: <form name='foodlist' action='checkout' method='POST'> <table> <tr> <td>Product Name</td> <td>Price</t ...

javascriptphpjqueryhtmlajax

Develop your website layout with Flexbox (Bootstrap 4.2), using stacked grid designs similar to the float: left method

For my Wordpress theme, I am utilizing Bootstrap 4.2 to design a basic grid layout for a list of blog posts. In my design, I have a Card that is double the height of others and I am attempting to 'float' two single-height cards beside it. Previ ...

csslayoutflexboxbootstrap-4

Generating PDFs from websites using code

Currently, I have my resume available online as an HTML page at www.mysite.com/resume.html. Whenever I need a PDF version of it, I rely on Google Chrome's print dialog to save it as a PDF using my print CSS stylesheet. However, I am looking for a way ...

cssgoogle-chromepdfprintingresume