how to divide web page in 2 vertical columns

Question

3.40/5 (2 votes)

See more:

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 20:10pm

anoop_vip

Updated 15-Jan-18 22:18pm

Add a Solution

8 solutions

Solution 5

 <div style="width:100%;"> 
Header
<div style="float:left; width:20%;">
Left  Column
<br />
some text goes here
<br />
</div>
<div style="float:right; width:80%; ">
Right Column
<br /> 
some text
<br />
Goes here<br />
</div>

</div>/xml>

Posted 10-Oct-11 1:29am

Swapna33

Comments

Member 9722231 27-Nov-13 7:28am

Worked for me! Thanks

Sonerao 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...

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

Posted 12-Oct-11 11:16am

I.explore.code

Solution 6

You can use Frameset tag also.

HTML

<body>
<frameset cols="25%,75%">
   <frame src="frame_a.htm" />
   <frame src="frame_b.htm" />
</frameset>
</body>

Posted 10-Oct-11 1:34am

koolprasad2003

Updated 10-Oct-11 1:36am

v2

Comments

RaviRanjanKr 12-Oct-11 17:21pm

My 5+

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>

Posted 7-Oct-11 20:45pm

raj ch

Updated 7-Oct-11 20:46pm

v2

Solution 8

Left Side

Right side

Posted 2-Feb-14 1:05am

AvinashAher

Comments

Sonerao 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...

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[^]

Posted 7-Oct-11 21:10pm

Sajid Syed Ali

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:

CSS

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.

HTML

<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[^]

Posted 16-Dec-14 22:26pm

jaket-cp

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)

dreamz9 · Accepted Answer · 2011-10-10T00:30:00

Solution 4

XML

<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.

Posted 10-Oct-11 0:30am

dreamz9

Comments

Member 12164145 17-Feb-16 18:09pm

asas

karench 10-Nov-17 12:38pm

good job, everything genial is simple.