CODEWITHSUNDEEP
html
kalpetros
kalpetros

Reputation: 983

Divide HTML page into two or more sections

How can I divide a webpage into two sections or more? For example I want to put some pictures on the left side and a contact form on the right side. I can't find a way to do it. I tried to do it using div but it didn't work. Below is a sample code of what I'm trying to do.

<html>
<head>
    <title>Test</title>
</head>
<body>
    <div class="page">
            <div class="header">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="projects.html">Projects</a></li>
                    <li class="selected"><a href="contact.html">Contact</a></li>
                </ul>
            </div>
            <div class="body">
                <div id="pictures">
                   <h1>Picture</h1>
                </div>
                <div id="contacform">
                   <h1>
                       <form action="mail.php" method="POST">
                       <p>Name</p> <input type="text" name="name">
                       <p>Email</p> <input type="text" name="email">
                       <p>Message</p><textarea name="message" rows="6" cols="25"></textarea><br />
                       <input type="submit" value="Send"><input type="reset" value="Clear">
                       </form>
                   </h1>
                </div>
            </div>
            <div class="footer">
               <p>Test Footer</p>
            </div>
    </div>
</body>

Upvotes: 4

Views: 46386

Answers (1)

Phil.Wheeler
Phil.Wheeler

Reputation: 16858

I'm not going to pick apart all of the CSS you should be using so the following code sample shows you how to split two div tags apart evenly. Please don't use #id selectors in your css because it kills kittens.

Your HTML:

<div class="body">
                <div id="pictures" class="column half>
                   <h1>Picture</h1>
                </div>
                <div id="contactform" class="column last>
                   <h1>
                       <form action="mail.php" method="POST">
                       <p>Name</p> <input type="text" name="name">
                       <p>Email</p> <input type="text" name="email">
                       <p>Message</p><textarea name="message" rows="6" cols="25"></textarea><br />
                       <input type="submit" value="Send"><input type="reset" value="Clear">
                       </form>
                   </h1>
                </div>
            </div>

The CSS:

.body { overflow: hidden; }
.column { float: left; }
.half { width: 50%; }
.last { float: none; width: auto; }

I recommend reading about CSS grid systems.

Upvotes: 3

Related Questions