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:

https://i.sstatic.net/V4uX2.jpg

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

https://i.sstatic.net/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>

Have you tried removing the margin-left to sidebar and using float:right instead of left? — Duver
– Duver, Commented Nov 6, 2013 at 20:03

Chandranshu · Accepted Answer · 2013-11-06 20:03:48Z

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.

answered Nov 6, 2013 at 20:03

Chandranshu

3,6693 gold badges22 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

idelest · Accepted Answer · 2013-11-06 20:07:39Z

0

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.

answered Nov 6, 2013 at 20:07

idelest

1111 silver badge9 bronze badges

Collectives™ on Stack Overflow

Using Columns with HTML and CSS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related