Screen resolution problem

I have this problem after coding my index page. I have divided the page into 2 columns:

header

nav

content floating left, content floating right

footer

On my screen reso开发者_C百科lution I have it properly aligned:

Content left | Content right

But on a small screen, it looks like this:

Content left
        Content right

This is the code:

    <div id="contentleft">
    text & content left
    </div>
    <div id="contentright">
    text & content right
    </div>

CSS:

 #contentleft {
    float:left;
    margin-left:12%;}

#contentright {
    float:right;
    margin-right:12%;}

Help would be great appriciated

floats will wrap when there does not exist enough space for them. your css has the width set to auto expand to the content.

 #contentleft {
    float:left;
    margin-left:12%;
    width:38%; // note margins grow the width of divides
}

#contentright {
    float:right;
    margin-right:12%;
    width:37%; // note on odd width screen some browsers IE rounds up so 100%/2 + 100%/2 = 101% according to microsoft.
}

One way to prevent the overlap is to place both divs in a #wrapper div and give the #wrapper a set width.

#wrapper{
    width:400px;

}
#contentleft {
    float:left;
    width:120px;
    margin-left:12%;
    background:green;
}

#contentright {
    float:left;
    width:120px;
    margin-left:12%;
    background:red;
}

Example: http://jsfiddle.net/jasongennaro/b2eyx/1/

Fyi... I also floated them both left and changed the margins and added some color to make it easier to see.

And welcome to SO!

add width to your Divs and put it in % like 50%-50%.