Simple alignment question

[dpeer]

I expect this question will be simple for most users here, just not me. I'm slightly modifying a Wordpress theme. The very top has a div that is 960 x 140 that contains an image. I need to adjust the width, to say 700px, and put a small bit of HTML to the right of it. I've made an image of what I need (link below), but every time I put in my html it appears above the header image.

[grayisgreen.org ]

The header.php has this code

<div id="wrap">
 
<div id="header">
 <div class="headerlogo">
 <h1 id="title"><a href="<?php echo get_option('home'); ?>/" title="Home"><?php bloginfo('name'); ?></a></h1>
 </div>
 </div>

and these are the header styles:

#header {
 background: none;
 width: 960px;
 height: 140px;
 margin: 0px auto 0px;
 padding: 0px;
 overflow: hidden;
 }
 #header #title a {
 background: url(images/logo.png) no-repeat;
 display: block;
 width: 960px;
 height: 140px;
 margin: 0;
 padding: 0;
 text-indent: -9999px;
 overflow: hidden;
 }
 .headerlogo {
 width: 960px;
 margin: 0px;
 padding: 0px;
 overflow: hidden;
 }

I need to add a small form to the right. Thoughts? Thank you.
.

[alt131]

Hi dpeer [webmasterworld.com], and welcome to WebmasterWorld :)

The point is to make this simple for you ;)

Exactly how to do this will depend on your html structure. Plus when you said the form is appearing "above" the header image did you mean "above" as in "on top of" (so the form is closest to the viewer, and the image is "behind" the form)? If so that is expected behaviour as on the provided code the image is a background-image, which means it is painted early, and so "behind" other elements.

However, that depends on where in the html you have coded the form and the styles applied. But as you say, you need to adjust the widths of the header and child elements to create enough room for the form. Then apply either a display [w3.org] or floats [w3.org] to get the alignment you want.

[dpeer]

Good point! By "above" I meant that the form is higher up on the page than the logo image, not floating in front of. I think it has something to do with the display: block; attribute, but changing that to inline or removing it entirely hasn't solved my problem.

[alt131]

Hi dpeer, thanks for the clarification. That suggests the <form> has been coded into the html before the div.headerlogo because elements are drawn top to bottom unless they have been styled so they are removed from the normal flow.

Whether display:inline works will depend on where you have applied it. Did you mean to the <a>? If so, that is only part of the issue: Forms and divs are all display:block by default, and you've set width:960px on all the elements ( except div#wrap which is unknown).

That means that if div#wrap is also width:960px, and the form has been nested somewhere inside div#wrap there won't be enough room for the form to align beside the other elements because they are already occupying the full width.

Also, I'm not sure display:inline is best here - I would have thought display:inline-block. But that requires you adjust the widths of the other elements back to something like your suggested 700px to provide enough horizontal space for the form - especially if div#wrap has width:960px as well. And yes - I am aware I'm saying "if" and "width" quite often ;)

Remember css styles html. So if this post reads like I am guessing that would be correct! There are several ways to achieve what you want, none of them difficult, but it would be really helpful if you could provide a simple html snippet. That will allow us to establish where the <form> is in the html - especially whether it is nested inside div#wrap - or outside. Note we don't need all the html - just enough to understand the basic structure. Also, the basic css for div#wrap as well - so I can see if that is affecting things as well.