0

I am trying to create a full width div that covers completely the available space in the screen. All the content is made with HTML and CSS in an content editor webpart.

However, I am getting a white space on the left and right of the page. Can I remove these spaces and make my div 100% real width? I guess this space is related to the gap between the webpart and the page itself, so the div only reaches until the end of the webpart.

enter image description here

  • have you check the width of the main container ? – Salvatore Di Fazio Apr 9 '14 at 13:13
  • Try using Mozilla firefox or IE developer tool to get what exactly is causing the problem. – Nikhil J Apr 9 '14 at 13:15
  • Yes, I am trying that. Can I change the inline styles of some divs? Or only overwrite the existing css? – garfield185 Apr 9 '14 at 14:01
1

I managed to remove a lot of space adding this css code:

.ms-rtestate-field
{
    padding-right: 0px !important;
}

.ms-rte-layoutszone-inner 
{
    padding-right: 0px;
    padding-left: 0px;
    margin-left: 0px;
    margin-right: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
}

However I still have 1px of white space on both left and right sides that I cannot manage to remove...

  • are you adding in your css ?? – meer Feb 11 '16 at 11:47
0

I believe the s4-workspace hard-coded resizing might have something to do with this.

A JavaScript code runs on SharePoint to give width and height to this container, so this would be one of my initial candidates for investigation.

If the left menu is showing, there is another container "s4-tablerow" (or alike) that is given a left margin to simulate a float to the left. This also would be another candidate to investigate.

0

Use this as your CSS file:

/*  reset styles
*/ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure,  footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent; }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.