Environment: SharePoint 2013

I`ve 2 WebParts created in SPS2013, in order to align the WebPart on my SharePoint homepage. I had set the width of WebPart 1 using CSS. However that impact the size of the other WebPart.

Reason - value: div.section-content-wrap (responsible for the body of the webpart) is set as the same value for both WebPart.

My CSS Code -

 div.section-content-wrap {
     height: 400px;

Please suggest how can I just decrease or increase the height of content area for WebPart 1 only?

  • Can you provide a snippet of HTML that represents the portion of the DOM the web parts are in? Based on your post, I can only gauge that both web parts match your div.section-content-wrap CSS rule; with seeing more of the markup, we can suggest a sufficiently unique selector that only gets applied to the one web part you want. Commented May 31, 2016 at 3:20
  • Learn to use CSS nth-child selector: w3schools.com/cssref/sel_nth-child.asp Commented May 31, 2016 at 8:49
  • @Stevangelista please find the HTML code for Webpart 1 - News imgur.com/PGMNSaF HTML code for Webpart 2 - Events imgur.com/WwJsaGZ
    – Jason
    Commented Jun 1, 2016 at 0:34
  • @DannyEngelmanNVP Wondering if the CSS code will be as below: code /* div.section-content.warp for webpart named NEWS / p:nth-child(div.section-content-wrap) { height: 450px; } / div.section-content.warp for webpart named EVENTS */ p:nth-child(div.section-content-wrap) { height: 400px; } code
    – Jason
    Commented Jun 1, 2016 at 0:38
  • @Jason - you need to show a larger snippet of code; your screenshot only shows up through the div with a class of section-content-wrap, which we already know is a shared class. Again, the goal would be to identify some parent element of the DIV you want to size that is different in some way so that a targeted CSS selector can be crafted. Commented Jun 1, 2016 at 2:53

1 Answer 1


You can use Jquery so that it works in all browsers.

On document ready assign the height only to first Div of required type. The below function will go inside your webpart 1 ASCX file. Add a Jquery reference before the below code.

$(document).ready(function()  {
         $("div.section-content-wrap:first").css("height", "400px");
} );

Same can be achieved using CSS selectors but it will work on modern browsers only which comply with CSS3 standards

  • I tried with the code but that didn't worked, please check if my code is correct and if any change is needed. code <script src="ajax.googleapis.com/ajax/libs/jquery/1.12.3/…> <script type="text/javascript"> $(document).ready(function() { $("div.section-content-wrap:first").css("height", "200px"); } ); </script> code
    – Jason
    Commented Jun 1, 2016 at 1:39
  • The OP doesn't explicitly state that there are only two DIV elements on the page with a class of "section-content-wrap" - only that he has two web parts using that class. Also, depending on page layout, the one he's trying to size may not necessarily be the first in the DOM tree. Finally, the CSS3 pseudo-selector :first-child is supported back to IE9, Safari 3.2 and all versions of Chrome & Firefox. It's use is much preferred over loading jQuery for such a basic CSS use case. Commented Jun 1, 2016 at 2:59
  • @Stevangelista please find the Complete DIV element for the 2 - Pasting code is going to high so showing code as an image. Img link: imgur.com/lwKyETt I tried using the following CSS to modify the height for a specific class - code .section-content-wrap:nth-last-child(odd) { height: 300px; } //OR .section-content-wrap:first-child { height: 450px; } code none worked. Pls help
    – Jason
    Commented Jun 1, 2016 at 6:06
  • @Stevangelista: Agreed. Writing it in CSS will have less foot print. Jason: Check in your DEV tools and see whether the styles are over-written. Try using !important in your CSS declarations. Now coming to the JQuery code, put a alert or debug it to see whether it fires in the first place & see the value of $("div.section-content-wrap").length while debugging the above code. It should be more than 1 Commented Jun 1, 2016 at 7:21
  • Can u share some article? Is the jquery code I've inserted based on ur inputs, is it fine?
    – Jason
    Commented Jun 1, 2016 at 12:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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