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