How should we make 6 column layouts with css without tables and one layer above and one layer in buttom?
(with floats ? i try without success)
Thanks
Here is a simple three-column layout with a header and a footer:
<!DOCTYPE html>
<html>
<head>
<title>Column Layout</title>
<style type="text/css">
.column {
width: 33%;
border: 1px solid gray;
float: left;
}
#footer {
clear: both;
}
</style>
</head>
<body>
<div id="header">Header</div>
<div class="column one">
Column 1
</div>
<div class="column two">
Column 2 I am the very model of a modern major general.
</div>
<div class="column three">
Column 3
</div>
<div id="footer">Footer</div>
</body>
</html>
By floating the columns they appear next to each other. By using clear: both for the footer it sits below the columns.
In recent browsers you can implement columns much more simply using CSS3 multi-column layout.
If you want to vary the number of columns from three to six depending on the available space, you could try using a media query. Like multi-column layout, media queries are a relatively new feature. If you want to achieve this in older browsers, you will need to use JavaScript (or use floats very creatively.)
For a more detailed discussion of cross-browser multi-column layouts, I highly recommend CSS Mastery: Advanced Web Standards Solutions. It is a great book.
What I tend to do is float all but one of my columns left and the final one right. I then apply a right margin to all of the columns except the final two. This is because the gutter between them is created by the difference in the float, but also gives different browsers a bit of leeway so the layout doesn't break.
As for the layer below (I guess you mean a footer) you use
clear: both;
For example if my page was 65em wide (I tend to work in ems), and I wanted 6 columns, I give all my columns a width of 10em, and I float columns 1-5 left and I float column 6 right. I then give columns 1-4 a right margin of 1em.
you should use "ul"/
<header></header>
<ul id="columner">
<li>
<ul>
<li class="one"></li>
<li class="two"></li>
<li class="thr"></li>
<li class="fou"></li>
<li class="fiv"></li>
<li class="six"></li>
</ul>
</li>
<li>
<ul>
<li class="one"></li>
<li class="two"></li>
<li class="thr"></li>
<li class="fou"></li>
<li class="fiv"></li>
<li class="six"></li>
</ul>
</li>
</ul>
<footer></footer>
Even easier than fighting with floats and clear floats and the like is going to a CSS layout framework like Blueprint (http://www.blueprintcss.org/) or 960 grids (http://960.gs/). If you've never been exposed before, they work by creating a virtual grid system on your page--to get something to be 6 columns, you'd divide the total number of grids on the screen (or on your container) by 6 and voila, perfect grids every time with no overlap and no bugs.
Even if you're well-versed in floats, there are some pretty crazy quirks that you can avoid altogether with a framework that already has the brain damage done. Bonus points to those frameworks with a CSS "reset" that essentially makes all browsers the "same".
try to use some generators online like this:
http://csscreator.com/version2/pagelayout.php
or this http://www.cssportal.com/layout-generator/
I've just tried this 6 colunm layout with css and it seems to work well - I have based this on a 960px wide template, but you can adjust the number to fill any size layout:
<title>6 column layout</title>
<style type="text/css">
.wrapper {
width: 960px;
height: 160px;
padding: 4px;
border: 1px solid gray;
float: left;
}
.column {
width: 150px;
height: 150px;
padding: 4px;
border: 1px solid gray;
float: left;
}
.rightcolumn {
width: 150px;
height: 150px;
border: 1px solid gray;
padding: 4px;
float: left;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="column one">
Column 1
</div>
<div class="column two">
Column 2 </div>
<div class="column three">
Column 3
</div>
<div class="column four">
Column 4
</div>
<div class="column five">
Column 5</div>
<div class="rightcolumn">
Column 6
</div>
</div>
</body>
</html
I tried this on the latest firefox and Safari, and I also tried it on a IE 7 Browser and it all worked well. I added a wrapper to the css because I didn't want the boxes to go under each other if somebody shrank their browser.
Related
On Chrome/FF my flex elements have equal heights (the height of the tallest element). But on IE11 they each have their natural height, so they end up having different heights.
How to make it behave on IE11 like on modern browser?
HTML (simplified):
<div class="parent">
<div class="child">
...
</div>
<div class="child">
...
</div>
</div>
CSS:
.parent {
display: flex;
flex-direction: row;
min-height: 100vh;
}
.child {
flex: 1 1 50%;
}
One workaround for this issue is to add min-height: inherit to your child class:
.parent {
display: flex;
flex-direction: row;
min-height: 100vh;
border: 2px solid blue;
}
.child {
flex: 1 1 50%;
border: 2px dashed orange;
min-height: inherit;
}
<div class="parent">
<div class="child">
Column 1
</div>
<div class="child">
Column 2
</div>
</div>
This guarantees that your child elements will expand to fill the parent.
In IE10 and IE11, containers with display: flex will not properly calculate their flexed childrens' sizes if the container has min-height but no explicit height property.
Therefore you need to change the corresponding property on the .parent class.
.parent {
height: 100vh;
}
I try to understand your issue and found that #David Lagace has already informed you that the IE browser has some known issues with flex.
If you want a cross-browser solution and if you can remove the flex from your code then the below code sample can fix your issue.
#container2 {
clear:left;
float:left;
width:100%;
overflow:hidden;
background:#ffa7a7; /* column 2 background colour */
}
#container1 {
float:left;
width:100%;
position:relative;
right:50%;
background:#fff689; /* column 1 background colour */
}
#col1 {
float:left;
width:46%;
position:relative;
left:52%;
overflow:hidden;
}
#col2 {
float:left;
width:46%;
position:relative;
left:56%;
overflow:hidden;
}
<DIV id="container2">
<DIV id="container1">
<DIV id="col1">
<!-- Column one start -->
<h2>Equal height columns</h2>
<p>It does not matter how much content is in each column, the background colours will always stretch down to the height of the tallest column.</p>
<h2>2 Column Dimensions</h2>
<p>Each column is 50 percent wide with 2 percent padding on each side.</p>
<!-- Column one start -->
<h2>No CSS hacks</h2>
<p>The CSS used for this 2 column layout is 100% valid and hack free. To overcome Internet Explorer's broken box model, no horizontal padding or margins are used. Instead, this design uses percentage widths and clever relative positioning.</p>
<h2>No Images</h2>
<p>This Two column layout requires no images. Many CSS website designs need images to colour in the column backgrounds but that is not necessary with this design. Why waste bandwidth and precious HTTP requests when you can do everything in pure CSS and HTML?</p>
<h2>No JavaScript</h2>
<p>JavaScript is not required. Some website layouts rely on JavaScript hacks to resize divs and force elements into place but you won't see any of that nonsense here.</p>
<h2>Valid XHTML strict markup</h2>
<p>The HTML in this layout validates as XHTML 1.0 strict.</p>
<!-- Column one end -->
<!-- Column one end -->
</DIV>
<DIV id="col2">
<!-- Column two start -->
<h2>Cross-Browser Compatible</h2>
<p>This 2 column layout has been tested on the following browsers:</p>
<h3>iPhone & iPod Touch</h3>
<ul>
<li>Safari</li>
</ul>
<h3>Mac</h3>
<ul>
<li>Safari</li>
<li>Firefox</li>
<li>Opera 9</li>
<li>Netscape 7 & 9</li>
</ul>
<h3>Windows</h3>
<ul>
<li>Firefox 1.5, 2 & 3</li>
<li>Safari</li>
<li>Opera 8 & 9</li>
<li>Explorer 5.5, 6 & 7</li>
<li>Google Chrome</li>
<li>Netscape 8</li>
</ul>
<h2>This layout is FREE for anyone to use</h2>
<p>You don't have to pay anything. Simply view the source of this page and save the HTML onto your computer. My only suggestion is to put the CSS into a separate file. If you are feeling generous however, link back to this page so other people can find and use this layout too.</p>
<!-- Column two end -->
</DIV>
</DIV>
</DIV>
Output:
References:
Referenced answer
Equal Height Columns with Cross-Browser CSS
I'd like to create single row with two overlapping columns like that:
.row
.col-sm-7
.col-sm-6
so that 6th column of the grid is overlapped.
It's partially possible with a .col-sm-pull-1:
.row
.col-sm-6
.col-sm-6.col-sm-pull-1
but the 12th column becomes empty. I tried:
.row
.col-sm-6
.col-sm-7.col-sm-pull-1
but the second column moves to the next row.
I found the answer for Bootstrap 2 (How to overlap columns using twitter bootstrap?). Is it possible with the Bootstrap 3?
After seeing your image example, I think perhaps this is what you are looking for. (I made them overlap 2 columns because that will center it better)
.blue{
background-color: rgba(0,0,255,0.5);;
}
.row .red{
background-color: rgba(255,0,0,0.5);
position: absolute;
}
.red, .blue {
height: 70px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="red col-xs-7"></div>
<div class="blue col-xs-7 col-xs-push-5"></div>
</div>
</div>
Fiddle If you want to overlap the two columns in one row, you'll need negative margins. The bootstrap gutters/margins are layed out using positive and negative margins. I would recommend ids for the columns and then you can use z-index if you want one over the other one.
So change right margin on first and left margin on the second.
margin-right: -5%;
margin-left: -5%;
How the grid works is a great reference for how its built.
You need to place the new column under the same div as the one you want to overlap.
Here is an example
<style>
.first {
background-color: #dedef8;
border: solid black 1px;
}
.second {
background-color: #dedef8;
border: solid black 1px;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-xs-7 first">
<p>This is the first column</p>
<div class="col-xs-6 second">
<p>This is the second </p>
</div>
</div>
</div>
</div>
</body>
Here's a jfiddle example: http://jsfiddle.net/NachoSupreme/o0fs78fv/
Can someone please help me with this problem as i have been dealing with it for a long time now....
I am trying to get 3 divs on the same line next to each other one of the divs looks like this:
<div>
<h2 align="center">San Andreas: Multiplayer</h2>
<div align="center">
<font size="+1">
<em class="heading_description">15 pence per slot</em>
</font>
<img src="http://fhers.com/images/game_servers/sa-mp.jpg" class="alignleft noTopMargin" style="width: 188px; ">
<a href="gfh" class="order-small">
<span>order</span></a>
</div>
and the other two are the same divs please help me get all three divs on the same line one on the right one on the mid and one on the left
I'm surprised that nobody gave CSS table layout as a solution:
.Row {
display: table;
width: 100%; /*Optional*/
table-layout: fixed; /*Optional*/
border-spacing: 10px; /*Optional*/
}
.Column {
display: table-cell;
background-color: red; /*Optional*/
}
<div class="Row">
<div class="Column">C1</div>
<div class="Column">C2</div>
<div class="Column">C3</div>
</div>
Works in IE8+
Check out a JSFiddle Demo
See my code
.float-left {
float:left;
width:300px; // or 33% for equal width independent of parent width
}
<div>
<h2 align="center">San Andreas: Multiplayer</h2>
<div align="center" class="float-left">CONTENT OF COLUMN ONE GOES HERE</div>
<div align="center" class="float-left">CONTENT OF COLUMN TWO GOES HERE</div>
<div align="center" class="float-left">CONTENT OF COLUMN THREE GOES HERE</div>
</div>
I'm not sure how I ended up on this post but since most of the answers are using floats, absolute positioning, and other options which aren't optimal now a days, I figured I'd give a new answer that's more up to date on it's standards (float isn't really kosher anymore).
.parent {
display: flex;
flex-direction:row;
}
.column {
flex: 1 1 0px;
border: 1px solid black;
}
<div class="parent">
<div class="column">Column 1</div>
<div class="column">Column 2<br>Column 2<br>Column 2<br>Column 2<br></div>
<div class="column">Column 3</div>
</div>
here are two samples: http://jsfiddle.net/H5q5h/1/
one uses float:left and a wrapper with overflow:hidden. the wrapper ensures the sibling of the wrapper starts below the wrapper.
the 2nd one uses the more recent display:inline-block and wrapper can be disregarded. but this is not generally supported by older browsers so tread lightly on this one. also, any white space between the items will cause an unnecessary "margin-like" white space on the left and right of the item divs.
Old topic but maybe someone will like it.
fiddle link http://jsfiddle.net/74ShU/
<div class="mainDIV">
<div class="leftDIV"></div>
<div class="middleDIV"></div>
<div class="rightDIV"></div>
</div>
and css
.mainDIV{
position:relative;
background:yellow;
width:100%;
min-width:315px;
}
.leftDIV{
position:absolute;
top:0px;
left:0px;
height:50px;
width:100px;
background:red;
}
.middleDIV{
height:50px;
width:100px;
background:blue;
margin:0px auto;
}
.rightDIV{
position:absolute;
top:0px;
right:0px;
height:50px;
width:100px;
background:green;
}
2019 answer:
Using CSS grid:
.parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
}
Just add float left property on all the divs you want to make appear in a row other than last one. here is example
<div>
<div style="float: left;">A</div>
<div style="float: left;">B</div>
<div>C</div>
</div>
This is easier and gives purpose to the never used unordered/ordered list tags.
In your CSS add:
li{float: left;} //Sets float left property globally for all li tags.
Then add in your HTML:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
Now watch it all line up perfectly! No more arguing over tables vs divs!
Check out the foundation rapid prototyping framework they handled this quite nicely, basically they allow you to use HTML like this:
<div class="row">
<div class="four columns">
</div>
<div class="four columns">
</div>
<div class="four columns">
</div>
</div>
This is the simplest HTML/CSS grid system that I've come across, it's based on 12 column grid.
Basically the columns are given a % width and left margin relative to the parent row. They columns have float set to left, position set to relative, and display set to block.
The row has several properties set on it that care core of an issue that normally causes the containing div to collapse to height of 0 preventing the following divs from getting 'pushed' down as they should.
You can find examples of using the foundation grid system here: http://foundation.zurb.com/docs/grid.php
If you don't want to use the entire framework the following CSS should do the trick with the example code I provided:
.row:after {
content: "";
clear: both;
display: table;
}
.four.column {
float: left;
width: 33%;
}
If you really specifically want a left center and right columns then use code like this:
CSS:
.row:after {
content: "";
clear: both;
display: table;
}
.left {
float: left;
width: 100px;
}
.center {
margin: 0 auto;
width: 100px;
}
.right {
float: right;
width: 100px;
}
HTML:
<div class="row">
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</div>
Put the divisions in 'td' tag. That's it done.
Another possible solution:
<div>
<h2 align="center">
San Andreas: Multiplayer
</h2>
<div align="center">
<font size="+1"><em class="heading_description">15 pence per
slot</em></font> <img src=
"http://fhers.com/images/game_servers/sa-mp.jpg" class=
"alignleft noTopMargin" style="width: 188px;" /> <a href="gfh"
class="order-small"><span>order</span></a>
</div>
</div>
Also helpful as well.
Why don't try to use bootstrap's solutions. They are perfect if you don't want to meddle with tables and floats.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <!--- This line is just linking the bootstrap thingie in the file. The real thing starts below -->
<div class="container">
<div class="row">
<div class="col-sm-4">
One of three columns
</div>
<div class="col-sm-4">
One of three columns
</div>
<div class="col-sm-4">
One of three columns
</div>
</div>
</div>
No meddling with complex CSS, and the best thing is that you can edit the width of the columns by changing the number. You can find more examples at https://getbootstrap.com/docs/4.0/layout/grid/
I'm trying to code more "responsive" after reading Ethan Marcote's A Book Apart.
I have come up with a case which I'm not sure how to solve. In a li element, I have four different divs. The first one cannot change width or height (I know this isn't responsive but the image size must remain the same within it). The other three divs can stretch as they are just text.
Now, I know I can set the divs to have different percentages of their parent width, which is fine, except for the fact that div1 HAS to be a defined pixel width. This throws out the calculations for the other percentages (browser width - 77px is going to be a different number for different browser sizes), so what shall I do?
I've whipped up this to help illustrate my problem.
As I mention, I realise I can use JS to set a container div's width on document load and resize but that seems, well, not so great.
Thanks for any help :)
Maybe table somethings can help
<!DOCTYPE html>
<html>
<head>
<style>
li { display: table; clear: both; width: 100% }
li div { display: table-cell; border: 1px solid blue; height: 1em }
.div1 { min-width: 65px; max-width: 65px }
.div2 { width: 60% }
.div3 { width: 10% }
.div4 { width: 30% }
</style>
</head>
<body>
<ul>
<li>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</li>
<li>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</li>
</ul>
</body>
</html>
#garthen; As i understand your question is that you want one div have fixed width & other have dynamic widths. I did that by change the order of the divs
CSS:
li {overflow:hidden}
li div {border: 1px solid blue;}
.div1 { width:65px;float:left; background:red;}
.div2 {overflow:hidden; background:yellow;}
.div3 { width: 10%; float:right; background:green;}
.div4 { width: 30% ;float:right; background:pink;}
HTML:
<ul>
<li>
<div class="div1">1</div>
<div class="div4">4</div>
<div class="div3">3</div>
<div class="div2">2</div>
</li>
<li>
<div class="div1">1</div>
<div class="div4">4</div>
<div class="div3">3</div>
<div class="div2">2</div>
</li>
</ul>
may be that's you want & it's also work IE also. If you want to give your 3rd & 4th div fixed width then also works well.
Check the demo for more http://jsfiddle.net/sandeep/4RPFa/67/
I'm looking for a super easy method to create a two column format to display some data on a webpage. How can i achieve the same format as:
<table>
<tr>
<td>AAA</td>
<td>BBB</td>
</tr>
</table>
I'm open to HTML5 / CSS3 techniques as well.
<style type="text/css">
#wrap {
width:600px;
margin:0 auto;
}
#left_col {
float:left;
width:300px;
}
#right_col {
float:right;
width:300px;
}
</style>
<div id="wrap">
<div id="left_col">
...
</div>
<div id="right_col">
...
</div>
</div>
Make sure that the sum of the colum-widths equals the wrap width. Alternatively you can use percentage values for the width as well.
For more info on basic layout techniques using CSS have a look at this tutorial
Well, you can do css tables instead of html tables. This keeps your html semantically correct, but allows you to use tables for layout purposes.
This seems to make more sense than using float hacks.
#content-wrapper{
display:table;
}
#content{
display:table-row;
}
#content>div{
display:table-cell
}
/*adding some extras for demo purposes*/
#content-wrapper{
width:100%;
height:100%;
top:0px;
left:0px;
position:absolute;
}
#nav{
width:100px;
background:yellow;
}
#body{
background:blue;
}
<div id="content-wrapper">
<div id="content">
<div id="nav">
Left hand content
</div>
<div id="body">
Right hand content
</div>
</div>
</div>
I know this question has already been answered, but having dealt with layout a fair bit, I wanted to add an alternative answer that solves a few traditional problems with floating elements...
You can see the updated example in action here.
http://jsfiddle.net/Sohnee/EMaDB/1/
It makes no difference whether you are using HTML 4.01 or HTML5 with semantic elements (you will need to declare the left and right containers as display:block if they aren't already).
CSS
.left {
background-color: Red;
float: left;
width: 50%;
}
.right {
background-color: Aqua;
margin-left: 50%;
}
HTML
<div class="left">
<p>I have updated this example to show a great way of getting a two column layout.</p>
</div>
<div class="right">
<ul>
<li>The columns are in the right order semantically</li>
<li>You don't have to float both columns</li>
<li>You don't get any odd wrapping behaviour</li>
<li>The columns are fluid to the available page...</li>
<li>They don't have to be fluid to the available page - but any container!</li>
</ul>
</div>
There is also a rather neat (albeit newer) addition to CSS that allows you to layout content into columns without all this playing around with divs:
column-count: 2;
There's now a much simpler solution than when this question was originally asked, five years ago. A CSS Flexbox makes the two column layout originally asked for easy. This is the bare bones equivalent of the table in the original question:
<div style="display: flex">
<div>AAA</div>
<div>BBB</div>
</div>
One of the nice things about a Flexbox is that it lets you easily specify how child elements should shrink and grow to adjust to the container size. I will expand on the above example to make the box the full width of the page, make the left column a minimum of 75px wide, and grow the right column to capture the leftover space. I will also pull the style into its own proper block, assign some background colors so that the columns are apparent, and add legacy Flex support for some older browsers.
<style type="text/css">
.flexbox {
display: -ms-flex;
display: -webkit-flex;
display: flex;
width: 100%;
}
.left {
background: #a0ffa0;
min-width: 75px;
flex-grow: 0;
}
.right {
background: #a0a0ff;
flex-grow: 1;
}
</style>
...
<div class="flexbox">
<div class="left">AAA</div>
<div class="right">BBB</div>
</div>
Flex is relatively new, and so if you're stuck having to support IE 8 and IE 9 you can't use it. However, as of this writing, http://caniuse.com/#feat=flexbox indicates at least partial support by browsers used by 94.04% of the market.
Well, if you want the super easiest method, just put
<div class="left">left</div>
<div class="right">right</div>
.left {
float: left;
}
though you may need more than that depending on what other layout requirements you have.
All the previous answers only provide a hard-coded location of where the first column ends and the second column starts. I would have expected that this is not required or even not wanted.
Recent CSS versions know about an attribute called columns which makes column based layouts super easy. For older browsers you need to include -moz-columns and -webkit-columns, too.
Here's a very simple example which creates up to three columns if each of them has at least 200 pixes width, otherwise less columns are used:
<html>
<head>
<title>CSS based columns</title>
</head>
<body>
<h1>CSS based columns</h1>
<ul style="columns: 3 200px; -moz-columns: 3 200px; -webkit-columns: 3 200px;">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four</li>
<li>Item five</li>
<li>Item six</li>
<li>Item eight</li>
<li>Item nine</li>
<li>Item ten</li>
<li>Item eleven</li>
<li>Item twelve</li>
<li>Item thirteen</li>
</ul>
</body>
</html>
If you want to do it the HTML5 way (this particular code works better for things like blogs, where <article> is used multiple times, once for each blog entry teaser; ultimately, the elements themselves don't matter much, it's the styling and element placement that will get you your desired results):
<style type="text/css">
article {
float: left;
width: 500px;
}
aside {
float: right;
width: 200px;
}
#wrap {
width: 700px;
margin: 0 auto;
}
</style>
<div id="wrap">
<article>
Main content here
</article>
<aside>
Sidebar stuff here
</aside>
</div>
I know this is an old post, but figured I'd add my two penneth. How about the seldom used and oft' forgot Description list? With a simple bit of css you can get a really clean markup.
<dl>
<dt></dt><dd></dd>
<dt></dt><dd></dd>
<dt></dt><dd></dd>
</dl>
take a look at this example http://codepen.io/butlerps/pen/wGmXPL
You can create text columns with CSS Multiple Columns property. You don't need any table or multiple divs.
HTML
<div class="column">
<!-- paragraph text comes here -->
</div>
CSS
.column {
column-count: 2;
column-gap: 40px;
}
Read more about CSS Multiple Columns at https://www.w3schools.com/css/css3_multiple_columns.asp
This code not only allows you to add two columns, it allows you to add as many coloumns as you want and align them left or right, change colors, add links etc. Check out the Fiddle link also
Fiddle Link : http://jsfiddle.net/eguFN/
<div class="menu">
<ul class="menuUl">
<li class="menuli">Cadastro</li>
<li class="menuli">Funcionamento</li>
<li class="menuli">Regulamento</li>
<li class="menuli">Contato</li>
</ul>
</div>
Css is as follows
.menu {
font-family:arial;
color:#000000;
font-size:12px;
text-align: left;
margin-top:35px;
}
.menu a{
color:#000000
}
.menuUl {
list-style: none outside none;
height: 34px;
}
.menuUl > li {
display:inline-block;
line-height: 33px;
margin-right: 45px;
}
<div id"content">
<div id"contentLeft"></div>
<div id"contentRight"></div>
</div>
#content {
clear: both;
width: 950px;
padding-bottom: 10px;
background:#fff;
overflow:hidden;
}
#contentLeft {
float: left;
display:inline;
width: 630px;
margin: 10px;
background:#fff;
}
#contentRight {
float: right;
width: 270px;
margin-top:25px;
margin-right:15px;
background:#d7e5f7;
}
Obviously you will need to adjust the size of the columns to suit your site as well as colours etc but that should do it. You also need to make sure that your ContentLeft and ContentRight widths do not exceed the Contents width (including margins).
a few small changes to make it responsive
<style type="text/css">
#wrap {
width: 100%;
margin: 0 auto;
display: table;
}
#left_col {
float:left;
width:50%;
}
#right_col {
float:right;
width:50%;
}
#media only screen and (max-width: 480px){
#left_col {
width:100%;
}
#right_col {
width:100%;
}
}
</style>
<div id="wrap">
<div id="left_col">
...
</div>
<div id="right_col">
...
</div>
</div>