Rendering Page with Panel

I have a asp.net website that is in a format that has header, left panel, main, right panel, and footer like image on left. I am wanting to render the page  to look like image on right using java script to essentially remove left panel and place right panel below main.  Any help with code to do this is greatly appreciated.

Panel Image Result
zrazakAsked:
Who is Participating?
 
HainKurtSr. System AnalystCommented:
this should be working fine...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script>
$(document).ready(function() {
	$("#divLeft").hide();
	$("#divMain").css("display","");
	$("#divMain").css("width","300"); 
	$("#divRight").css("display","");
});
</script>

<style>div {border:1px solid gray} </style>

<div>Header</div>
<div style="display:inline" id=divLeft>Left</div>
<div style="display:inline" id=divMain>Main</div>
<div style="display:inline" id=divRight>Right</div>
<div>Footer</div>

Open in new window

0
 
Nathan BoveSoftware EngineerCommented:
Set widths on the panels and set the style property on them to "display:inline"

Here is an example of some code:
<div>Header</div>
<div style="display:inline">Left</div><div style="display:inline; border:1px solid">Main</div><div style="display:inline">Right</div>
<div>Footer</div>
0
 
HainKurtSr. System AnalystCommented:
post the current structure of divs (with code & style)
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
HainKurtSr. System AnalystCommented:
check this one

<style>div {border:1px solid gray} </style>

<div>Header</div>
<div style="display:inline" id=divLeft>Left</div>
<div style="display:inline" id=divMain>Main</div>
<div style="display:inline" id=divRight>Right</div>
<div>Footer</div>

and the one below
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script>
$(document).ready(function() {
	$("#divLeft").hide();
	$("#divMain").css("display","");
	$("#divRight").css("display","");
});
</script>

<style>div {border:1px solid gray} </style>

<div>Header</div>
<div style="display:inline" id=divLeft>Left</div>
<div style="display:inline" id=divMain>Main</div>
<div style="display:inline" id=divRight>Right</div>
<div>Footer</div>

Open in new window

0
 
zrazakAuthor Commented:
The code sent does not create diagram as on left
0
 
zrazakAuthor Commented:
I like the help that you provided.  I have set the div tags to panel tags and wanted to know if a width can be set to the panel left, panel main, and panel right to add up to 100% of screen?
0
 
HainKurtSr. System AnalystCommented:
you can use this syntax

$("#divMain").css("width","300");
0
 
zrazakAuthor Commented:
i did that and didnt notice any render in screen?
0
 
zrazakAuthor Commented:
Sorry for late response thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.