Jump to content

how can I use 2 columns in 1 page with div tag


Recommended Posts

the best way to do this is to use <table>

 

in stead you can try this ---------

<style>body {	margin:0;	background-color:#6FF5C5;}.container {	width: 1000px;	color:#FFFFFF;	text-align:center;	margin:auto;	font-size:20px;	font-weight:bold;}.rside {	float:right;	width: 250px;	background-color: #2D30C5;	position:relative;	padding: 10px 0px;}.lside {	float: left;	width: 250px;	background-color: #C53234;	padding: 10px 0px;}.center {	padding: 10px 0;	width: 500px;	border:0px solid red;	background-color: #7CD56F;	margin:auto;}.rside, .lside, .content {	display:block;}</style><div class="container">  <div class="lside">This is sidebar on left..</div>  <div class="rside">This is sidebar on right..</div>  <div class="center">main content area</div></div>
Link to post
Share on other sites

HTML5/CSS3 offers support for multiple columns -- but there are various ways to achieve pages that look very similar. You say you want a center div. You could simply float three divs up against each other, or float two divs in opposite directions.

 

You might look at some examples...

 

http://www.w3schools.com/Css/css3_multiple_columns.asp

Link to post
Share on other sites
  • 4 weeks later...

You can use:

<style>body {	margin:0;	background-color:#6FF5C5;}.container {	width: 1000px;	color:#FFFFFF;	text-align:center;	margin:auto;	font-size:20px;	font-weight:bold;}.content {	float: left;	width: 750px;	background-color: #C53234;	padding: 10px 0px;}.lside {    float:left;    width: 250px;    background-color: #2D30C5;    position:relative;    padding: 10px 0px;}.center {	padding: 10px 0;	width: 500px;	border:0px solid red;	background-color: #7CD56F;	margin:auto;        float: right;}.rside {    float:right;    width: 250px;    background-color: #2D30C5;    position:relative;    padding: 10px 0px;}.rside, .lside, .content, .center {	display:block;    clearn: none;}</style><div class="container">  <div class="content">     <div class="lside">This is sidebar on left..</div>     <div class="center">main content area</div>  </div>  <div class="rside">This is sidebar on right..</div></div>
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...