Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: C# ASP.NET HTML
hi i want to divide my page in 2 vertical columns 1n 80/20 ratio. i thought of using tables with 2 columns but some suggested to use div tag instead of table tag as rendering of table is different for every other browser. so how to use div tag to achieve desired effect.
 
further i want to divide page in to different section parts/section.is possible using div tags? if its possible then how to do it ? which attributes of div tag is to be used? please help
 
thank u
anoop
Posted 7-Oct-11 21:10pm
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 4

<div style="width:100%;"> <!-- Main Div -->
Header
<div style="float:left; width:20%;">
Left  <!-- Set Div As your requirement -->
</div>
<div style="float:left; width:80%; margin-left:10px;">
Right  <!-- Set Div As your requirement -->
</div>
<div>
Footer
</div>
</div>
 

you will need to modify above styles in stylesheet for all pages.
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 5

 <div style="width:100%;"> 
Header
<div style="float:left; width:20%;">
Left  Column
 

some text goes here
 

</div>
<div style="float:right; width:80%; ">
Right Column
 
 
some text
 

Goes here
 
</div>
 
</div>/xml>
  Permalink  
Comments
Member 9722231 at 27-Nov-13 7:28am
   
Worked for me! Thanks
Sonerao at 6-Feb-14 7:39am
   
if i add some hyperlink in left side and when i click on that link it will open related page on right side How is it possible...
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 8



Left Side

Right side
  Permalink  
Comments
Sonerao at 6-Feb-14 7:38am
   
if i add some hyperlink in left side and when i click on that link it will open related page on right side How is it possible...
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 6

You can use Frameset tag also.
 
<body>
<frameset cols="25%,75%">
   <frame src="frame_a.htm" />
   <frame src="frame_b.htm" />
</frameset>
</body>
  Permalink  
v2
Comments
RaviRanjankr at 12-Oct-11 17:21pm
   
My 5+
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 7

Don't ever ever ever use Frames or tables for page layout, as they are cumbersome to manage and troubleshoot plus they are like mechanical spring clock in the digital world. Use DIVs instead as someone bright enough has suggested, they are more flexible and easy to layout and troubleshoot. They also help centralise and streamline your layout unlike the old school frames and tables.
 
Cheers
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

Hello Friend
By using the frame set tags you can achieve that
Use the Following
link http://htmlhelp.com/reference/html40/frames/frameset.html[^]
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

use
<table></table>
tag.
<table>
   <tr> 
     <td style="border-width:1px; border-color:Black ; border-style :groove ;" width="80">
     </td>
     <td style="border-width:1px; border-color:Black ; border-style :groove ;" width="20">
     </td>
    </tr></table>
  Permalink  
v2
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 10

Here is a technique for two div elements side by side inside the body, and takes up 100% height of the body, not using float technique.
CSS and HTML:
html,body{
	height:100%;
	width:100%;
}
body{
	margin: 0 0 0 0;
	padding:0 0 0 0;
}
div{
	box-sizing: border-box;-moz-box-sizing: border-box;
	height:100%;
	display: inline-block;
}
body > div:first-child{
	width:80%;
    border:solid 2px green;
}
body > div:nth-child(2){
	width:20%;
    border:solid 2px blue;
}
Note: for it to work, no whitespace between the div elements.
<body>
	<div>AAA</div><div>BBB</div>
</body>
Check out these links for div side by side for alternative methods:
http://stackoverflow.com/questions/2156712/how-to-float-3-divs-side-by-side-using-css[^]
http://stackoverflow.com/questions/17217766/two-divs-side-by-side-fluid-display[^]
Side by side no float:
http://stackoverflow.com/questions/3619233/div-side-by-side-without-float[^]
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 9

you can use bootstarp
its easy and flexible
  Permalink  

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

  Print Answers RSS
0 George Jonsson 175
1 Kornfeld Eliyahu Peter 169
2 Zoltán Zörgő 139
3 PIEBALDconsult 130
4 OriginalGriff 120
0 OriginalGriff 6,165
1 DamithSL 4,658
2 Maciej Los 4,107
3 Kornfeld Eliyahu Peter 3,649
4 Sergey Alexandrovich Kryukov 3,342


Advertise | Privacy | Mobile
Web02 | 2.8.141220.1 | Last Updated 17 Dec 2014
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100