I have this code:

<html>
<head>
    <title> Psycho Site - About Us </title>

    <style>
        /* container */
        div.container
        {
            width: 1574px;
        }
        /* end container */

        /* header */
        div.header
        {
            background-color: #DDA500;
        }

        h1.header_h1
        {
            margin-bottom: 0;
            font-size: 65;
        }
        /* end header*/

        /* menu */
        div.menu
        {
            background-color: #FFD700;
            width: 200px;
            float: right;
        }
        /* end menu */

        /* content */
        div.content
        {
            background-color: orange;
            height: 500px;
            width: 1374px;
            float: left;
        }
        /* end content */
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <center>
                <h1 class="header_h1"><i> Who are we? </i></h1>
            </center>
        </div> 

        <div class="menu">
            <a href="appointment.html">Appointment</a><br>
            <a href="emergancy.html">Need Help Emidiatly</a><br>
            <a href="homepage.html">Back To Home Page</a><br>
            <a href="">My Account</a>
        </div>

        <div class="content">
            We are a forum for teens, kids and parents or anyone that just want to speak their mind and/or need phsychological help </br>
            Mr. A Bouwer is our phsyc and he offer these services:
            <ul>
                <li>Work test</li>
                <li>Phsycho ...</li>
                <li>Talking</li>
            </ul>
            <center>
                <img src="counselling.gif" width="240" height="240"/>
            </center>
            Anyone can join out forums. When you join you get the ability to post on your onw wall, you can post any thing that is on your mind <br>
            as long as it complies to out forum rules found <a href="forumrules.html">HERE</a>
            If you do not wish to join but need a appointment click <a href="appointment.html">HERE</a>
            <br>
            <center>
                <img src="us.jpg" width="300" height="300"/>
            </center>
        </div>
    </div>
</body>
</html>

But the problem is that on smaller screens then mine it doesnt fit in properly. You have to scroll to the side (it is anoying) to see the other content. So how do I make it that it will fit on any screen without having to scroll to the side? Oh and I only want to use javascript and html.

Thanks...

Recommended Answers

All 3 Replies

Instead of setting width, height in pixels / em in CSS. Better use percentage.

Have a look at CSS media queries.

You'll have to make the site responsive for that

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.