Responsive Design Tabled Div

Posted on October 1, 2013October 26, 2015 By David Kittell

#page
{
    max-width: 1280px;
    height: 100%;
}

/* Portrait Start */
@media screen and (max-width: 540px)
{
}
/* Portrait Stop */

/* Landscape Start */
@media screen and (min-width: 541px)
{
    #BodyContent1
    {
        width: 50%;
        float: left;
        height:100%;
    }
    #BodyContent2
    {
        width: 50%;
        float: right;
        height:100%;
    }
}
/* Landscape Stop */

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Responsive Div</title>
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
	<meta name="robots" content="index, follow" />
	<meta name="viewport" id="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=10.0,initial-scale=1.0" />
	<link rel="stylesheet" type="text/css" href="mobile.css" media="screen" />
	<script type="text/javascript">
		function OnResizeDocument() {
			//alert("The size of the window or the document has changed.");

			var viewportwidth;
			var viewportheight;

			// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

			if (typeof window.innerWidth != 'undefined') {
				viewportwidth = window.innerWidth,
      viewportheight = window.innerHeight
			}

			// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

			else if (typeof document.documentElement != 'undefined'
     && typeof document.documentElement.clientWidth !=
     'undefined' && document.documentElement.clientWidth != 0) {
				viewportwidth = document.documentElement.clientWidth,
       viewportheight = document.documentElement.clientHeight
			}

			// older versions of IE

			else {
				viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
       viewportheight = document.getElementsByTagName('body')[0].clientHeight
			}

			document.getElementById('ScreenSize').innerHTML = "Screen Size: " + screen.width + " x " + screen.height + "<br />View Size: " + viewportwidth + " x " + viewportheight;
		}</script>
</head>
<body id="pageBody" runat="server" onresize="OnResizeDocument()">
	<div id="page">
		<div id="BodyContent1">
			<h2>
				Welcome to My Company!</h2>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sodales lectus augue,
				sed consectetur arcu eleifend in. Ut eu imperdiet est. Quisque aliquet, lectus non
				semper consequat, sapien dui hendrerit nibh, vel dignissim lacus felis non enim.
				Sed vitae erat elit. Nulla placerat porttitor diam. Vivamus faucibus neque egestas
				dui dignissim scelerisque. Nunc consectetur tempus nibh at rhoncus. Nullam erat
				neque, lobortis nec laoreet eget, sodales ut tortor. Pellentesque suscipit et erat
				et sollicitudin.</p>
			<p>
				Duis metus urna, lobortis vel gravida vel, adipiscing ut tortor. Nunc leo neque,
				imperdiet sed ligula nec, commodo mattis est. In fringilla varius mattis. Class
				aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
				Aliquam et erat at lacus viverra scelerisque. Praesent eget scelerisque enim. Suspendisse
				eleifend enim in neque interdum, eu fringilla tortor ornare. Duis vehicula massa
				a dui elementum molestie.</p>
		</div>
		<div id="BodyContent2">
			<h2>
				UNDER DEVELOPMENT!</h2>
			<p>
				Aliquam pellentesque ipsum mi, sed porta sapien commodo nec. Phasellus adipiscing
				leo orci, non bibendum metus porta eu. Pellentesque consectetur, enim at cursus
				elementum, arcu elit posuere massa, non sollicitudin nulla lorem sed lectus. Nam
				et hendrerit odio. Aliquam erat volutpat. Praesent bibendum dui a sodales sagittis.
				Pellentesque neque tellus, ultrices non consectetur vel, mollis ac erat. Quisque
				pretium nisl tempus est convallis sollicitudin. Nam varius ullamcorper sem ac luctus.
				Quisque tincidunt arcu lorem, non vehicula massa ultricies in. Integer adipiscing,
				tellus sed pharetra tempor, ante metus volutpat ante, hendrerit imperdiet lacus
				arcu quis nisi. Donec at quam nec lacus volutpat ornare. Suspendisse aliquet hendrerit
				lacus sit amet feugiat.</p>
			<p>
				Nullam posuere tortor sem, at iaculis erat elementum eu. Donec et rhoncus ante.
				Vivamus venenatis pretium arcu ut fermentum. Pellentesque pellentesque euismod arcu,
				et pulvinar odio scelerisque sit amet. Sed a tellus tristique, luctus augue ut,
				blandit arcu. Phasellus facilisis, est vitae egestas dapibus, dolor tellus facilisis
				nibh, eget adipiscing velit est nec nulla. Morbi ut nibh in metus sagittis malesuada
				pulvinar sed ante. Suspendisse potenti. Praesent at imperdiet ligula, vitae luctus
				turpis. Praesent vel rhoncus ipsum. Donec euismod, lectus at blandit tristique,
				nunc felis consequat nisl, ut pretium erat lorem id mauris. Maecenas imperdiet orci
				sit amet tincidunt tempus. Maecenas imperdiet vehicula consequat. Curabitur vel
				vulputate metus. Sed et luctus nunc. Aliquam erat volutpat.
			</p>
			<div id="ScreenSize">
			</div>
		</div>
	</div>
</body>
</html>

Originally Posted on October 1, 2013
Last Updated on October 26, 2015

All information on this site is shared with the intention to help. Before any source code or program is ran on a production (non-development) system it is suggested you test it and fully understand what it is doing not just what it appears it is doing. I accept no responsibility for any damage you may do with this code.

Related

Code CSS HTML JavaScript