How to set two vertical screen in one single page using div

Question

0.00/5 (No votes)

See more:

Hi,

I have been using two div.

but, first div overriding with second screen. it is not proper.

Also, first screen displaying in the center with overriding the second screen.

what is the problem..

ASPX Code
---------
<div class="divbody">
<div id="left" class="leftdiv">
<table>
<tr>
<td class="Labels">1.Employee</td >
</tr>
<tr>
<td class="Labels">Select Emp :
<asp:DropDownList ID="drpEmp" runat="server" class="controltext" Width="250px" AutoPostBack="true">
<asp:ListItem Value="" Selected="True">Select Project</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td class="Labels">
From Wk:
<asp:DropDownList ID="drpFrmWk" runat="server" class="controltext" Width="40px" AutoPostBack="true">
<asp:ListItem Value="" Selected="True"><--></asp:ListItem>
</asp:DropDownList>
From Year:
<asp:DropDownList ID="drpFrmYr" runat="server" class="controltext" Width="70px" AutoPostBack="true">
<asp:ListItem Value="" Selected="True"><--></asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td class="Labels">   
To Wk:
<asp:DropDownList ID="drpToWk" runat="server" class="controltext" Width="40px" AutoPostBack="true">
<asp:ListItem Value="" Selected="True"><--></asp:ListItem>
</asp:DropDownList>
To Year:     
<asp:DropDownList ID="drpToYr" runat="server" class="controltext" Width="70px" AutoPostBack="true">
<asp:ListItem Value="" Selected="True"><--></asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr align="center">
<td class="Labels">
<asp:Button ID="btnResult1" CssClass="Btn" runat="server" Text="View Chart" ToolTip="Click Here to Get Chart" width="80px"/>
</td>
</tr>
</table>
</div>
<div id="right" class="rightdiv">
<asp:Chart ID="Chart1" runat="server" TextAntiAliasingQuality="High" ImageType="Jpeg" Visible="false" Width="1200px"
BackColor="CornflowerBlue" BackSecondaryColor="FloralWhite" BackGradientStyle="TopBottom">
<Titles>
<asp:Title Name="ChartTitle" Font="Arial, 8pt" ></asp:Title>
</Titles>
<borderskin SkinStyle="Emboss">
</borderskin>
<Series>
<asp:Series Name="ColChart" ChartType="Column" IsValueShownAsLabel="True">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1" BorderColor="64, 64, 64, 64" BorderDashStyle="Solid" BackSecondaryColor="White" BackColor="AntiqueWhite"
ShadowColor="Transparent" BackGradientStyle="TopBottom" >
<area3dstyle Enable3D="True" />
<axisx LineColor="64, 64, 64, 64" Title="Week-Year" IsLabelAutoFit="true" >
<LabelStyle Font="Arial, 8pt" />
<MajorGrid LineColor="64, 64, 64, 64" />
</axisx>
<axisy LineColor="64, 64, 64, 64" Title="Allocation Value" >
<LabelStyle Font="Arial, 8pt" />
<MajorGrid LineColor="64, 64, 64, 64" />
</axisy>
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
</div>
</div>
CSS Code
--------
.divbody
{
position: relative;
margin: 2px 0px 2px 0px;
padding: 2px 5px 2px 5px;
height: auto;
width: 100%;
}
#left
{
position: relative;
height: 480px;
border: 2px, solid, #000000;
width: 30%;
}

#right
{
position: absolute;
height: 480px;
border: 2px, solid, #000000;
width: 70%;
left: 400px;
top: 0px;
overflow: scroll;
}

Posted 15-Jan-12 22:23pm

gani7787

Updated 16-Jan-12 0:53am

v2

Add a Solution

Comments

Tejas Vaishnav 16-Jan-12 23:14pm

you need to remove the position from your css, you give it relative and absolute, that's why your screens are over lapping....

Tejas Vaishnav 16-Jan-12 23:20pm

use this class...

.divbody
{
position: relative;
margin: 2px 0px 2px 0px;
padding: 2px 5px 2px 5px;
height: auto;
width: 100%;
}
.leftdiv
{
float: left;
height: 480px;
border: 2px, solid, #000000;
width: 30%;
}

.rightdiv
{
float: right;
height: 480px;
border: 2px, solid, #000000;
width: 70%;
left: 400px;
top: 0px;
overflow: scroll;
}

gani7787 17-Jan-12 0:30am

While loading left div values showing in the mid of the screen with overlapping div2.
Why...?
see my code
-----------
<div class="divbody">
<div id="div1" class="leftdiv">
<table>
<tr>
<td class="Labels">1.Employee</td >
</tr>
<tr>
<td class="Labels">Select Emp :
<asp:DropDownList ID="drpEmp" runat="server" class="controltext" Width="250px" AutoPostBack="true">
<asp:ListItem Value="" Selected="True">Select Project

</td>
</tr>
<tr>
<td class="Labels">
From Wk:
<asp:DropDownList ID="drpFrmWk" runat="server" class="controltext" Width="40px" AutoPostBack="true">
<asp:ListItem Value="" Selected="True"><-->

From Year:
<asp:DropDownList ID="drpFrmYr" runat="server" class="controltext" Width="70px" AutoPostBack="true">
<asp:ListItem Value="" Selected="True"><-->

</td>
</tr>
<tr>
<td class="Labels">
To Wk:
<asp:DropDownList ID="drpToWk" runat="server" class="controltext" Width="40px" AutoPostBack="true">
<asp:ListItem Value="" Selected="True"><-->

To Year:
<asp:DropDownList ID="drpToYr" runat="server" class="controltext" Width="70px" AutoPostBack="true">
<asp:ListItem Value="" Selected="True"><-->

</td>
</tr>
<tr align="center">
<td class="Labels">
<asp:Button ID="btnResult1" CssClass="Btn" runat="server" Text="View Chart" ToolTip="Click Here to Get Chart" width="80px"/>
</td>
</tr>
</table>
</div>
<div id="div2" class="rightdiv">
<asp:Chart ID="Chart1" runat="server" TextAntiAliasingQuality="High" ImageType="Jpeg" Visible="True"
BackColor="CornflowerBlue" BackSecondaryColor="FloralWhite" BackGradientStyle="TopBottom">
<Titles>
<asp:Title Name="ChartTitle" Font="Arial, 8pt" >
</Titles>
<borderskin skinstyle="Emboss">

<series>
<asp:Series Name="ColChart" ChartType="Column" IsValueShownAsLabel="True">

<chartareas>
<asp:ChartArea Name="ChartArea1" BorderColor="64, 64, 64, 64" BorderDashStyle="Solid" BackSecondaryColor="White" BackColor="AntiqueWhite"
ShadowColor="Transparent" BackGradientStyle="TopBottom" >
<area3dstyle Enable3D="True" />

Tejas Vaishnav 16-Jan-12 23:22pm

and here also you use the #righ and #left its apply css on id and you do not specify the class here... and also use the css class rightdiv and leftdiv

3 solutions

Solution 2

CSS

.MainScreen
{
    background-color: #FFAAFF;
    width: 100%;
    height: 100%;
}
.LeftScreen
{
    float: left;
    width: 50%;
    height: 100%;
   /* white-space: nowrap;
    overflow-y: hidden; /* used to remove scroll  virtically*/
  /*  overflow-x: scroll; /* used to apply scroll  Horizontally*/
    background-color: #C1DCF3;
}
.RigthScreen
{
    float: right;
    width: 50%;
    height: 100%;
    white-space: nowrap;
    overflow-y: hidden; /* used to remove scroll  virtically*/
    overflow-x: scroll; /* used to apply scroll  Horizontally*/
    background-color: #B9FFC6;
}

HTML

<div id="divMainScreen" class="MainScreen">
        <div id="divLeftScreen" class="LeftScreen">
        <p>In object-oriented programming, a class is a construct that is used as a blueprint to create instances of itself – referred to as class instances, class objects, instance objects or simply objects</p>
        </div>
        <div id="divRightScreen" class="RigthScreen">
        <p>In object-oriented programming, a class is a construct that is used as a blueprint to create instances of itself – referred to as class instances, class objects, instance objects or simply objects</p>
        </div>
    </div>

Posted 15-Jan-12 23:04pm

Tejas Vaishnav

Solution 3

If you working on a web application, this option suite your need.
Create two div, one for the left and second for the right.
See code below

--This is the HTML Code---
<div class="divbody">
<div id="left" class="leftdiv">
</div>

<div id="right" class="rightdiv">
</div>
</div>

--This is the CSS code--
.divbody
{
position: relative;
margin: 2px 0px 2px 200px;
padding: 2px 5px 2px 5px;
height: auto;
width: 100%;
}
#left
{
position: relative;
height: 800px;
border: 2px, solid, #000000;
width: 50%;
}

#right
{
position: absolute;
height: 800px;
border: 2px, solid, #000000;
width: 50%;
left: 430px;
top: 0px;
overflow: scroll;
}

Posted 15-Jan-12 23:25pm

ahmedfaruk88

Comments

gani7787 16-Jan-12 6:51am

Thanks for your code..
But, my left screen position overriding with right screen.
Also, left screen displaying in center position. so right screen overriding with left screen.
what is the problem in below code.

ASPX Code
---------
<div class="divbody">
<div id="left" class="leftdiv">
<table>
<tr>
<td class="Labels">1.Employee</td >
</tr>
<tr>
<td class="Labels">Select Emp :
<asp:DropDownList ID="drpEmp" runat="server" class="controltext" Width="250px" AutoPostBack="true">
<asp:ListItem Value="" Selected="True">Select Project

</td>
</tr>
<tr>
<td class="Labels">
From Wk:
<asp:DropDownList ID="drpFrmWk" runat="server" class="controltext" Width="40px" AutoPostBack="true">
<asp:ListItem Value="" Selected="True"><-->

From Year:
<asp:DropDownList ID="drpFrmYr" runat="server" class="controltext" Width="70px" AutoPostBack="true">
<asp:ListItem Value="" Selected="True"><-->

</td>
</tr>
<tr>
<td class="Labels">
To Wk:
<asp:DropDownList ID="drpToWk" runat="server" class="controltext" Width="40px" AutoPostBack="true">
<asp:ListItem Value="" Selected="True"><-->

To Year:
<asp:DropDownList ID="drpToYr" runat="server" class="controltext" Width="70px" AutoPostBack="true">
<asp:ListItem Value="" Selected="True"><-->

</td>
</tr>
<tr align="center">
<td class="Labels">
<asp:Button ID="btnResult1" CssClass="Btn" runat="server" Text="View Chart" ToolTip="Click Here to Get Chart" width="80px"/>
</td>
</tr>
</table>
</div>

<div id="right" class="rightdiv">
<asp:Chart ID="Chart1" runat="server" TextAntiAliasingQuality="High" ImageType="Jpeg" Visible="false" Width="1200px"
BackColor="CornflowerBlue" BackSecondaryColor="FloralWhite" BackGradientStyle="TopBottom">
<Titles>
<asp:Title Name="ChartTitle" Font="Arial, 8pt" >
</Titles>
<borderskin skinstyle="Emboss">

<series>
<asp:Series Name="ColChart" ChartType="Column" IsValueShownAsLabel="True">

<chartareas>
<asp:ChartArea Name="ChartArea1" BorderColor="64, 64, 64, 64" BorderDashStyle="Solid" BackSecondaryColor="White" BackColor="AntiqueWhite"
ShadowColor="Transparent" BackGradientStyle="TopBottom" >
<area3dstyle Enable3D="True" />
<axisx linecolor="64, 64, 64, 64" title="Week-Year" islabelautofit="true">
<LabelStyle Font="Arial, 8pt" />
<majorgrid linecolor="64, 64, 64, 64">

<axisy linecolor="64, 64, 64, 64" title="Allocation Value">
<LabelStyle Font="Arial, 8pt" />
<majorgrid linecolor="64, 64, 64, 64">

ahmedfaruk88 16-Jan-12 7:17am

Post your CSS code and let me review it. And also i cant see the closing tag of your second div control <div id="right" class="rightdiv">

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

thatraja · Accepted Answer · 2012-01-15T22:51:00

Solution 1

Here you go
Learn CSS Positioning in Ten Steps[^]

Posted 15-Jan-12 22:51pm

thatraja