Learn More





DNN Community Blog

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.

Using JQuery to set create a flexible 3 column layout with Divs

This evening I was working on creating a Full Width skin for, the current skin is at a fixed width, which doesn’t work very well for an active Forum when you have a browser with a high resolution. (The site runs on DotNetNuke, so this post will feature examples for DotNetNuke, but the code is applicable to any HTML pages)

Basically I wanted a three column layout where the middle column stretched out as wide as possible, and depending on if there was content in the Left and Right columns, I wanted them to not display at all, causing the Middle column to expand to fill the void.

This is actually fairly easy to do if you are using a table based HTML layout, the following code would suffice for most sites.

<table id="MyTable">
        <td runat="Server" class="LeftPane">Column1</td>
        <td runat="Server" class="ContentPane">Column2</td>
        <td runat="Server" class="RightPane">Column3</td>
    .LeftPane{width: 150px;}
    .ContentPane{width: 100%;}
    .RightPane{width: 150px;}
    .DNNEmptyPane{width: 0px;}

(one item of note, the open source CMS DotNetNuke places a class called DNNEmptyPane into a DIV or TD that is marked as a server control, but doesn’t have any Modules in it, with that you can hid the element)

But if you are using a DIV based layout, which is proper if you are shooting for XHTML compliancy then you don’t have anything that will do this very easily. Basically I need to be able to dynamically apply a width to the Middle column of the three column layout.

At first I was going to look at how to try to do this in C# or VB code, but realized you can’t access the Size of the Browser window from that code, so it would have to be done via Javascript.

After spending some time messing around with JS I figured out that screen.width was not going to give me the size of a browser window, it would simply give me the size of the user’s screen, which doesn’t apply if the user has the browser open in a smaller window than full screen.

From there I stumbled on a page talking about using $(window).width() to get the width of the user’s browser, the $() symbolizing jQuery. PERFECT! As DotNetNuke has included the jQuery libraries for a couple of years now.

I ended up finding some javascript code that would allow me to access the Styles defined in a style sheet and change them, but considering how many CSS files that DotNetNuke loads I didn’t think that would be the most efficient method of access. So instead of using that javascript code I figured out how to read the CSS properties from various page elements (div tags) and how to modify them using jQuery.

Basically with jQuery you can access CSS on an element by using the following to read


and then this to set the value


Though some attributes are harder to get to, like Padding. Here’s examples for how to change the padding


For more examples check out the jQuery documentation, it’s extremely helpful!

I ended up coming up with a nifty little script that I can use to resize the ContentPane div tag in DotNetNuke, while respecting if there is a LeftPane or RightPane included in the skin. This assumes that LeftPane and ContentPane are floating left via CSS and RightPane is floating right.

Here’s the basic HTML for the three DIV’s I’m trying to work with

<div id="pc">
    <div id="LeftPane" runat="server" class="lp" />
    <div id="ContentPane" runat="server" class="cp" />
    <div id="RightPane" runat="server" class="rp" />

Another item of note, DotNetNuke/ASP.NET change the ID’s of the DIV tags that are marked with runat=”server”, in DNN they change to dnn_LeftPane, dnn_ContentPane and dnn_RightPane.

Here is the javascript code used to dynamically change the width of ContentPane div tag

<script type="text/javascript" language="javascript">
    function ResetPaneSize() {
        //get the width of the ContentPane to start
        var width = $("#dnn_ContentPane").width();
        //set our new width to the original width
        var newWidth = width;
        //the page width of our outer div is 95%
        var wrapperWidth = .95;
        //setup the width of the left and right side, along with padding (used in margin) to add to content pane, initially set to 0
        var leftWidth = 0;
        var leftMargin = 0;
        var rightWidth = 0;
        var rightMargin = 0;
        //check the outerWidth of the LeftPane, outerWidth(true) returns width, padding, border and margin
        if ($("#dnn_LeftPane").outerWidth(true) > 0) {
            leftWidth = $("#dnn_LeftPane").outerWidth(true);
            leftMargin = 15;
        //check the outerWidth of the RightPane, outerWidth(true) returns width, padding, border and margin
        if ($("#dnn_RightPane").outerWidth(true) > 0) {
            rightWidth = $("#dnn_RightPane").outerWidth(true);
            rightMargin = 15;
        //figure out what the new width should be: width of browser * width of outer div + (left + right)
        newWidth = $(window).width() * wrapperWidth - (leftWidth + leftMargin + rightWidth + rightMargin);
        //if the original width and the new width are different set them
        if (width != newWidth) {
            //set the new width of the ContentPane
            $("#dnn_ContentPane").width(newWidth + 'px');
            //add some padding to the content pane, only adds the padding if the Left (or Right) pane are populated
            $("#dnn_ContentPane").css('padding', '0px ' + rightMargin.toString() + 'px ' + '0px ' + leftMargin.toString() + 'px');
    $(window).resize(function () {
        //alert(' resize width: ' + $(window).width());

I may look at making this a DotNetNuke Widget of some sort, but for now it works inline on my skin! I have a few more things to get working on the skin before I push it live on though.

Feel free to modify and reuse this script, if you would like to give me credit for it, please link back to

Disclaimer: As always, before making changes to your files back everything up! I’m not responsible for any damage you cause!


Comment Form

Only registered users may post comments.


2sic Daniel Mettler (124)
Aderson Oliveira (15)
Alec Whittington (11)
Alex Shirley (10)
Andrew Nurse (30)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (22)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (203)
Chris Paterra (55)
Clinton Patterson (28)
Cuong Dang (21)
Daniel Bartholomew (2)
Dave Buckner (2)
David Poindexter (3)
David Rodriguez (2)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (74)
Geoff Barlow (6)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (270)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matthias Schlomann (15)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Mike Horton (19)
Mitchel Sellers (28)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Peter Donker (52)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott S (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Timo Breumelhof (24)
Tony Henrich (3)
Torsten Weggen (2)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (37)
Will Strohl (163)
William Severance (5)
Try Evoq
For Free
Start Free Trial
a Demo
See Evoq Live
Need More Information?