ISTIAK 1 Posted January 18, 2015 Report Share Posted January 18, 2015 how can I keep 2 columns where 1 column is on the left side and other columns will be right side and centre will contain div. how can I place 3 columns in one area Quote Link to post Share on other sites
funbinod 3 Posted January 18, 2015 Report Share Posted January 18, 2015 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> Quote Link to post Share on other sites
davej 251 Posted January 18, 2015 Report Share Posted January 18, 2015 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 Quote Link to post Share on other sites
yeuyeu90 0 Posted February 13, 2015 Report Share Posted February 13, 2015 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> Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.