Reputation: 321

How to fit the container based on screen size html

I have started designing a template for my webpage using html and for first time. I have used divs inside the body tag.Everything looks fine when the screen is maximized. But if i minimize the screen, the alignment looks very odd.How can i design the webpage so that it fits the screen all the time.Here is my sample code.

<body height="100%">
<table width="100%" style="border-spacing: 0;">
    <tr>
        <td></td>
    </tr>
</table>
<div>
  <div style="float: left; position:relative;width:700px;height:75px;border:2px solid black;">
  </div>
<div style="float: right; width:530px;height:260px;border:2px solid black;">
</div>
<div id="calendartable" style="float:right;position:relative;width:530px;height:30px;border:2px solid black;"></div>
</body>

Upvotes: 1

Answers (3)

user692

Reputation: 63

It's very hard to understand what you actually want to accomplish.

First of all, only use for real tables, such as a timetable, or something you would use Exel for. We don't use tables in modern webdesign anymore. Really. :)

Secondly, you should try to come up with an idea of how your site should look like. Before you do any code at all.

A very simple site with "responsive" design:

<body>
<div id="main">
    <header>
        <nav>
            <ul>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
                <li><a href="#">Item 4</a></li>
                <li><a href="#">Item 5</a></li>
                <li><a href="#">Item 6</a></li>
                <li><a href="#">Item 7</a></li>
            </ul>
        </nav>
    </header>
    <div id="content" class="content">
        <h1>My page title</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit eligendi non quaerat tempora totam similique aliquid quas architecto rem ratione iure recusandae. Sit incidunt sint amet maxime necessitatibus expedita aspernatur?</p>
        <h2>Subtitle</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam cupiditate similique nostrum impedit nulla doloremque assumenda quis provident ducimus nihil iusto veniam voluptatibus distinctio aperiam et vel quae ex libero!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti repellendus quibusdam praesentium cum facilis laboriosam numquam dolor atque cupiditate ullam quasi optio? Ratione maxime quam dolores sint dicta rerum.</p>
    </div>
    <footer class="footer">
        <p>&copy; 2014 &ndash; <a href="#">My Fancy Pagename.</a></p>
        <p>Please do copysteal. You're free to use whatever you like from this page as long as you attribute me and link back.</p>
    </footer>
</div>

(http://jsfiddle.net/n3gn5/)

As you can see here, I am not using any inline-CSS (that style="color:red;" stuff), but I have the CSS in an extra file:

body {
 margin: 0;
 padding: 0;
 font-family: Helvetica, Arial, sans-serif;
}

nav ul li {
    list-style: none;
    display: inline;
}

nav ul li a {
    text-decoration: none;
    color: gray;
    margin-right: 10px;
}

h1 {
    font-size: 80px;
    font-weight: 100;
    color: orange;
}

footer {
    font-size: 12px;
    color: gray;
    font-weight: 100;
}

#main {
    width: 70%;
    margin: auto;
}

With the jsfiddle link, you can mess around and see the result if you like.

I would really recommend to get some help with HTML, CSS and JavaScript. Codecademy does some really nice and free courses. On the other hand there are quite some good books out there. Just make sure with books or articles online: Pick some that are not older than a few years. If you pick up a book or tutorial from 1997, you'll learn wrong stuff, you'll learn bad habits and behavior. It will possibly work (table-layouts), but you won't have any fun with it, nor be able to create good websites with that knowledge.

If you're done there and have special questions, come back and ask them.

Your question feels a little like "How do I build a car? I have no idea!". There is no good answer to that kind of questions.

I hope I could help anyway. :)

Upvotes: 0