Using Columns with HTML and CSS

Question

I want to have 2 different columns for the content on my website, they way I want it is like this:

http://i.stack.imgur.com/V4uX2.jpg

It shows like that on my computer monitor, but on my mobile it shows up like this:

http://i.stack.imgur.com/H7CNe.png

As you can see, I would like the two sides to always be next to each other and not one under the other as on my mobile.

CSS

#leftSide {
margin-top:80px;
margin-left:200px;
float:left;
width:400px;
}

#rightSide {
margin-top:80px;
margin-left:10px;
float:left;
width:400px;
}

HTML:

<div id="leftSide">
</div>
<div id="rightSide">
</div>

Answer 1

Check the resolution of your mobile. You probably have a screen of width less than 800px while your content needs more than 800px to be displayed.

Also, for 2-column display, the best way is to use float left and right on the two divs. You should read about responsive CSS which can stylize the width of your divs based on the device width.

Answer 2

you could use a few things... The display block-inline function or you could just float the picture right. Or you could use tables but I personally hate those.

    #sidebar {
    margin-top:80px;
    float:right;
    width:400px;
    margin-left: 5%;

Make sure that the the total widths don't exceed the width of your parent container. You also might want some padding on the right side of the picture.