I need some help with a div. My goal is to achieve something similar to the diagram below. I have an H1 heading on the left, and two (2) images (form submit buttons...both wrapped in separate forms) to the right. I've tried many different combinations using different divs within divs, floats and more. I had a bad case of "divitis" at one point, and just ripped out all of my styles and div structure and now I'm hoping someone can just post a friendly, cross-browser solution.
P.S.
This div is 100% in width.
+------------------------------------------------------------------------------------------+
| +---------+ +---------+ |
| H1 HEADER HERE | button1 | | button2 | |
| +---------+ +---------+ |
+------------------------------------------------------------------------------------------+
<body>
<h1>H1 HEADER HERE></h1>
<form action="somescript.cgi" method="post">
<input type="image" src=http://www.webdeveloper.com/forum/archive/index.php/"button1.jpg" alt="button1" width="100" height="25">
<input type="hidden" name="big" value="joke">
</form>
<form action="somescript.cgi" method="post">
<input type="image" src=http://www.webdeveloper.com/forum/archive/index.php/"button2.jpg" alt="button2" width="100" height="25">
<input type="hidden" name="big" value="deal">
</form>
</body>Something like this?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<title>Page title</title>
<style type="text/css">
<!--
#header {
margin: 0;
padding: 1em;
background-color: aqua;
}
#header h1 {
float: left;
margin: 0;
}
#header form {
float: right;
margin: 0 5px;
padding: 0;
}
.clear {
font-size: 0;
line-height: 0;
height: 0;
margin: 0;
padding: 0;
clear: both;
}
-->
</style>
</head>
<body>
<div id="header">
<h1>This Is The H1 Heading</h1>
<form action="#" method="post">
<div><input type="submit" value="Button 1"></div>
</form>
<form action="#" method="post">
<div><input type="submit" value="Button 1"></div>
</form>
<div class="clear"></div>
</div> <!-- end header -->
</body>
</html>Excellent, NogDog.
My original structure was similar (4 divs), but I just couldn't get it right. Thank you kindly. I owe ya one.
P.S.
This div is 100% in width.
+------------------------------------------------------------------------------------------+
| +---------+ +---------+ |
| H1 HEADER HERE | button1 | | button2 | |
| +---------+ +---------+ |
+------------------------------------------------------------------------------------------+
<body>
<h1>H1 HEADER HERE></h1>
<form action="somescript.cgi" method="post">
<input type="image" src=http://www.webdeveloper.com/forum/archive/index.php/"button1.jpg" alt="button1" width="100" height="25">
<input type="hidden" name="big" value="joke">
</form>
<form action="somescript.cgi" method="post">
<input type="image" src=http://www.webdeveloper.com/forum/archive/index.php/"button2.jpg" alt="button2" width="100" height="25">
<input type="hidden" name="big" value="deal">
</form>
</body>Something like this?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<title>Page title</title>
<style type="text/css">
<!--
#header {
margin: 0;
padding: 1em;
background-color: aqua;
}
#header h1 {
float: left;
margin: 0;
}
#header form {
float: right;
margin: 0 5px;
padding: 0;
}
.clear {
font-size: 0;
line-height: 0;
height: 0;
margin: 0;
padding: 0;
clear: both;
}
-->
</style>
</head>
<body>
<div id="header">
<h1>This Is The H1 Heading</h1>
<form action="#" method="post">
<div><input type="submit" value="Button 1"></div>
</form>
<form action="#" method="post">
<div><input type="submit" value="Button 1"></div>
</form>
<div class="clear"></div>
</div> <!-- end header -->
</body>
</html>Excellent, NogDog.
My original structure was similar (4 divs), but I just couldn't get it right. Thank you kindly. I owe ya one.