Reducing width of a webpart impact width of other webpart too

Question

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?

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