Search code examples
htmlcsspositioningcss-float

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 resolution 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

Solution

  • 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.
}