Left and right margins in CSS styling

Currently, I am in the process of creating a Coppermine Theme using tables as the base structure. However, I would like to add some CSS styling to enhance its appearance.

I am trying to ensure that the gallery content occupies the entire container. You can find the link to my gallery here.

Upon viewing the gallery, you will notice that the content aligns on the left side only. I have attempted to make it extend to the right as well to fill the entire container, but have been unsuccessful.

Below is the CSS code I am currently using:

.maintable {
    background-color: #FFFFFF;
   margin-left: -40px;
padding-right:50px;
}

Could you please provide guidance on how to correct this issue?

Thank you for your assistance.

htmlcssgallery

Answer №1

The <section class="wrapper"> now includes margin: 20px. Consider adjusting it to margin: 20px 0 for 20px of vertical margin without any horizontal margin. Eliminate the padding-left and margin-right from the .contentarea

Answer №2

To accomplish this, follow these steps: (simply uncomment the lines I've indicated below)

1. Container (style.css:34)

#container {
    width: 1100px;
    margin-left: auto;
    margin-right: auto;
    background-color: #fff;
    /* padding: 40px; */
    box-shadow: 0px 0px 19px 
}

2. menub (style.css:71)

.menub {
    background-color: #000;
    color: #fff;
    /* width: 100%; */
    padding: 30px;
    /* margin-left: -40px; */
    /* margin-top: -40px; */
    /* padding-right: 50px; */
}

3. adminmenu (style.css:81)

.adminmenu {
    background-color: #2E2E2E;
    color: #fff;
    /* width: 100%; */
    padding: 30px;
    /* margin-left: -40px; */
    /* padding-right: 50px; */
    margin-bottom: 30px;
}

4. maintable (style.css:221)

.maintable {
    background-color: #FFFFFF;
    /* margin-left: -40px; */
    /* padding-right: 50px; */
}

Answer №3

Table cells do not support margins.

Here are some other options:

  1. Use Padding. Instead of margins, consider using padding within table cells.

  2. Add margin to an inner div. Place a div inside the table cell and apply margins to that div.

  3. Utilize the border-spacing property. Check out more information on this property here: https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing

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

Retrieve the ID of a specific row within a table in a datatables interface by selecting the row and then clicking a button

My goal is to have a table displayed where I can select a row and then have the option to edit or delete that row with a query. To achieve this, I need a primary key that won't be visible to the user. This is how my table is set up: <table id=&apo ...

javascriptphpjqueryhtmldatatables

What methods can be used to reveal the URL or string hidden by the current "Search" button?

I am a beginner with no coding experience. Please forgive me if my question sounds silly. I am interested in learning how to "discover" the correct string to add to an existing internal-domain-url (even though I am not the admin of that domain) in order t ...

javascripthtml

Tips for achieving equal width li elements within various columns in Bootstrap 4 beta 2 and ensuring they span the full screen width

I've been scratching my head for a while, but I just can't seem to make it work. On the fiddle link provided, you'll notice three main blocks in light gray, each containing a variable number of smaller dark blocks. My goal is to have these s ...

htmlcsstwitter-bootstrapbootstrap-4

Customize style with Dart programming language

Is it possible to modify a HTML element's CSS with DART? I've searched around but couldn't find clear instructions on how to accomplish this or if it's feasible at all. The main objective is to alter the position of a button on a webp ...

htmlcssdynamicdart

Image file missing from web application - Error 404

While constructing my website, I initially utilized Imgur to store the images I was using. However, I later decided to create a specific folder within my application to house these images instead. Now that I have stopped using Imgur, I needed to update the ...

htmlnode.jsimageexpressweb-applications

Do you have any recommendations for a creative CSS method to achieve a full-screen background image?

After searching online and experimenting with different methods, I have yet to discover a solution that suits my needs. My goal is to have the background image on my website centered, filling the entire browser screen, while also being compatible with resp ...

htmlimagecssbackground-image

Click on the span to choose the text within it

I am looking to retrieve the specific text that was clicked on. For example, if I click on the word "mother," I want the log to display just that word "mother" even if it is contained within a span with other words. The code I have tried doesn't seem ...

javascripthtmlcss

Vue JS encounters difficulties when attempting to lazy load various images from a randomized image URL

I've implemented a code snippet for lazy loading images with different URLs: <img src="https://source.unsplash.com/1600x900/?hotel,booking.com?v=1" loading="lazy" /> <img src="https://source.unsplash.com/1600x900/?hot ...

htmlvue.js

Is it possible to activate numerous hover effects on links by hovering over a div?

How can I trigger multiple hover effects simultaneously when hovering over my main div? I'm struggling to figure out how to make the line animate on all three links at the same time. Is it possible to achieve this using only CSS or do I need to use Ja ...

htmlcsshover

The text sliding feature gradually moves further away from the left side with each iteration

I am in the process of transferring an existing slider from one website to another. Instead of creating a text slider from scratch, I decided to modify the code I found for the new site. However, the slider is not functioning correctly on the new site. Th ...

javascriptjqueryhtmlcss

designing a vertical HTML5 range input

Attempting to customize a vertical range input, here is what has been implemented: input[type='range'] { -webkit-appearance: slider-vertical; background-color: #ccc; height: 158px; width: 2px; margin: 8px auto; } input[type= ...

csshtml

Unable to properly vertically center multiple divs within a parent div and align their elements vertically within them

I'm diving into the world of HTML/CSS and grappling with various concepts. My goal is to vertically align 2 divs within a larger div, as well as center the contents within those divs. HTML: <html> <head> <link rel="stylesheet" typ ...

htmlcssdivider

Triangle below header that seamlessly blends with header background gradient

I need to create a unique header design which includes a gradient and a triangle for decoration. While I have no trouble implementing the gradient and positioning the triangle using ::after, I am facing an issue with matching the color of the triangle to ...

csslinear-gradients

A vertical bar to separate each tbody section within a table

Having a dynamic HTML page with a table containing multiple 'tbody' elements, I am currently facing a CSS challenge. My goal is to display a vertical bar inside each of the 'tbody' sections as illustrated in the attached image. I have ...

htmlcsshtml-tablepseudo-element

The filter is displaying incorrect categories

I am facing an issue with creating a work filter based on the last column which represents categories. When I select an option from the dropdown, I want to display only that specific category and hide the others. Currently, when I try clicking on an option ...

javascripthtmlcss

PHP is struggling to retrieve the value of "img src"

CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form action="./test2.php" method="POST"> ...

phphtml

Include a clickable hyperlink within a column in JQGrid that, when clicked, triggers a specific Jquery function

I am dealing with a JQgrid that only has 5 columns. Below is the code I have attempted: jQuery("#grdAnn6InvstDetails").jqGrid({ url: RootUrl + 'FDIAS/Ann6InvDtlsGridData', datatype: 'json', mtype: 'POST&ap ...

javascriptjqueryhtmlhyperlinkjqgrid

Tips for aligning two columns of listed items vertically with Bootstrap 5 or CSS

Having difficulty aligning two columns containing text - specifically, two lists. The goal is to have both columns on the same row with centered lists and their respective items aligned as normal bullet points. Any advice would be greatly appreciated. C ...

htmlcssalignmentbootstrap-5

How to Conceal the <th> Tag with JavaScript

I attempted to conceal certain table elements using JavaScript. For <td> elements, it works fine: function hide(){ var x=document.getElementsByTagName('td'); for(var i in x){ x[i].style.visibility='hidden'; ...

javascripthtml

Press on a circle to adjust its size to fit the section or division

Is it possible to make a circle expand and fill the section/div when clicked? I want the circle to fill the screen upon clicking, and then have some text appear in its place. Before posting this, I searched on the web and came across this jsfiddle link. ...

javascripthtmlcss