PDA

View Full Version : Left and right alignment?



Simuel
Jan 14th, 2009, 06:43 AM
I am trying to have a div with a background color that is the width of the browser size that has a h2 Title on the left and some links on the very right of the div that also go along the bottom of the div. It seems to work right, but it also seems like it's improper and stupid with having to do positioning like that. Am I doing this correctly or is this just dumb? An example of what it should look like is here http://img185.imageshack.us/my.php?image=exampleko0.jpg

here is my attempt:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Some Title</title>
</head>
<body>
<div style="background: #F6F6F6;">
<span style="float: right; margin-top: 12px; font-size: 11px;"><a href="#">Some Link</a> | <a href="#p">Another Link</a></span>
<h2>Title Here</h2>
</div>
</body>
</html>

Excavator
Jan 14th, 2009, 07:45 AM
Try this Simuel:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
background: #fc6;
font: 12px "Comic Sans MS";
}
* { /*zeros out all default margin/padding/border*/
margin: 0;
padding: 0;
border: none;
}
#wrap {
background: #fff;
margin: 30px 0; /*places #wrap 30px */
}
#header {
height: 30px; /*height, not including borders*/
line-height: 30px; /*centers text in 30px height*/
padding: 0 20px; /*moves text in from the edges*/
border-top: 20px solid #6ff;
border-bottom: 20px solid #6ff;
text-align: right;/*what moves the links over*/
overflow: auto; /*clears floats*/
}
#header h1 {
float: left; /*what moves the title over*/
}
#wrap p{
width: 400px;
padding: 0 20px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h1>Some Title Here</h1>
<a href="#">some link</a> | <a href="#">another link</a>
<!--end header--></div>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<!--end wrap--></div>
</body>
</html>


Yours works fine too, and it's valid. I'm not sure the links should really be in a span but it works.

Simuel
Jan 14th, 2009, 07:52 AM
Thanks much! Your example is more along the lines of what I was thinking it should be like.