Split HTML page into two or more sections
How can I split a webpage into two or more sections? For example, I want to put some pictures on the left side and a contact form on the right side. I cannot find a way to do this. I tried to do it with a div, but it didn't work. Below is the sample code 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>
+3
source to share
1 answer
I'm not going to cull all the CSS you should be using, so the following code example shows you how to separate two div tags separately. 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>
CSS:
.body { overflow: hidden; }
.column { float: left; }
.half { width: 50%; }
.last { float: none; width: auto; }
I recommend reading about CSS grid systems.
+2
source to share