Menu
I wish to produce the following layout within a header div on my page, using CSS only
+-----------+ + + + Image + Title text Some text aligned on the right + + +-----------+
I am having trouble aligning the text on the right. It keeps aligning immediately to the right and one line below the title text, like this
+-----------+ + + + Image + Title text + + Some text aligned on the right +-----------+
This is my current markup.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
#header, #footer { padding: 0.3em 0; border-bottom: 1px solid; }
#header img { display: inline;}
#header h1 { display: inline; margin: 0px; padding: 0px;
vertical-align: 50%; position: left;}
#login-status { margin: 0px; padding: 0px;
display: inline;text-align: right; position: right;}
</style>
<title>Models</title>
</head>
<body>
<div id="header">
<img alt="Logo" height="110" width="276"
src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="276" />
<h1>Models</h1>
<p id="login-status">You are currently logged in as steve</p>
</div> <!-- end of header -->
</body>
</html>
I had expected the inline styling to not cause a line break after the h1 element but this is not the case. Can anyone suggest what I am doing wrong?
948
#header, #footer { padding: 0.3em 0; border-bottom: 1px solid; overflow: hidden; zoom: 1; }
#header img { float: left;}
#header h1 { float: left; margin: 0px; padding: 0px; }
#login-status { margin: 0px; padding: 0px; float: right; }
There's no need for extra divs around the elements or a clearing div when floating. I use the above technique regularly to do exactly what you're trying to do. overflow:hidden; makes the header clear the floats, but if there is no width specified you will need zoom: 1; for IE6. zoom doesn't validate, but it works flawlessly, and you can add it to an ie6 only css file if need be.
77
You will most likely have to do something like this...
<head>
<style type="text/css">
#header, #footer
{
padding: 0.3em 0;
border-bottom: 1px solid;
}
#login-status
{
margin: 0px;
padding: 0px;
line-height: 110px;
vertical-align: middle;
}
</style>
<title>Models</title>
</head>
<body>
<div id="header">
<div style="float: left">
<img alt="Logo" src="http://www.google.co.uk/intl/en_uk/images/logo.gif" style="width: 276px;
height: 110px" />
</div>
<div style="float: left; margin: 0px 8px 0px 8px;
line-height: 110px; vertical-align: middle;">
<h1>Models</h1>
</div>
<div id="login-status" style="float: right;">
You are currently logged in as steve
</div>
<div style="clear: both">
</div>
</div>
<!-- end of header -->
</body>
The "Clear" will be needed somewhere in order to clear your floating, but it could be applied to another div tag that would follow your header instead of being included in the header.
Note... I changed this up a bit to get the text areas that are to the right of the image to be vertically aligned "middle". You can change the styling to be css based, but this should acheive what you were looking for.
45
img float: left; title text float: left; some text float: right;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
