Menu
Community /Pin to ProfileBookmark
@NogDogAug 25.2005 — #Something like this?
Div Layout Dilema
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.
[CODE]+——————————————————————————————+
| +———+ +———+ |
| H1 HEADER HERE | button1 | | button2 | |
| +———+ +———+ |
+——————————————————————————————+
<body>
<h1>H1 HEADER HERE></h1>
<form action=”somescript.cgi” method=”post”>
<input type=”image” src=”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=”button2.jpg” alt=”button2″ width=”100″ height=”25″>
<input type=”hidden” name=”big” value=”deal”>
</form>
</body>
Sign in
to post a comment2 Comments(s) ↴
0
@NogDogAug 25.2005 — #Something like this?[code=html]
<!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>
[/code]