Topic: aligning div's within a div header

I have a header div, and 2 div's within it. I want the first to be aligned to the left side, and the right aligned to the right. Or, at least have an affect where it's like the first and second are in different <td> tags if I were using a table to lay this out.

It only seems to affect the bolded text. If I add/remove the #headeraddress style, it will move the bolded text to the right or back under the logo (while the rest of the text stays in place)

If I add "border:1px solid #cccccc;" to the style #headeraddress it will create a border around each line of text, instead of one box. Since the div has the style, shouldn't there be just one box that has a border?

Here's the source:

<div id="header">

  <div id="logo">

    <img src="images/logo.gif" alt="logo" width="305" height="71" />

  </div>

    

  <div id="headeraddress">

    <b>some text</b>

    <br />E-mail: <a href="#">company</a>

    <br />address info

    <br />address info

  </div>

</div>

and this style:

#logo

{

display:inline;

}



#headeraddress

{

display:inline;

}

This should work. It will float the first one to the left, set its width to 50% . Set the second one's margin-left to 50% and set its width to 50% and text-align to right.

#logo

{

   width:50%;

   float:left;

}



#headeraddress

{

   width:50%;

   margin-left:50%;

   text-align:right;

}

just using float:left; on #logo almost works, but, the divs following the header div overlap it a bit.

Why doesn't just setting the header div to display as block, and the div's inside it to display as inline work?

Here's the CSS2 specs on inline formatting. Now if you can tell me exactly what all of that means, you win the prize. I understand it in principle, but those specs are confusing.

Anyway, I've never tried to use inline formatting in the way you're suggesting, but I think I know why it doesn't work. Setting a div to inline means that the elements within that div will display in an inline format, not that the div itself will display inline. In other words, if you want the two divs within the header to display in an inline format, you would need to set the header div itself to inline.

That being said, I think your best bet here is using float, as suggested above. Although I can't tell for certain without seeing the page, I'm pretty sure that the reason you are getting the overlap is because the floated element is not as tall as the non-floated element--the image on the left is only 71px tall, yet you've got a bunch of text on the right (not floated) that is longer. Your browser is calculating the vertical position of the following divs based on where the floated element ends, thus the overlap.

I experienced this same problem on my site, and due to the way I have things set up (sometimes the text on the right is longer than the float, sometimes it isn't), I had no choice but to create a dummy div set to "clear" to go right after the float and the text. You, however, shouldn't have to resort to that, since the image and text are not going to be changing in size (right?). If that is the case, you should be able to just float the (longer) right-hand element instead of the left-hand element, and the browser should calculate the vertical position of the following divs based on that.

Hope that helps.


___________________________
Suho: www.liminality.org

suho: The image (71 pixels high) was taller than the text. Some reason the #header div was only as tall as the text even though the image was taller... The only solution I could find was forcing the header div to have a height:71px; but it probably will cause problems if other content is taller... There must be a better way.

The only style's needed were

#header

{

height:71px;

}



#logo

{

float: left;

}

Setting a block level element like a DIV to display inline does absoluty nothing -- well, nothing productive anways.

display:block or display:inline only change they way a browser treats an element. The following is a list of elements and thier default display settings:

Block: DIV, P, TABLE etc...
Inline: SPAN, A, LI, IMG etc...

So setting a DIV to display:inline is the same as using a SPAN tag. Dig?

Anyways, the solution here it really simple:

.headeraddress{float:right;}



<div id="header">



	<span class="headeraddress">

		<b>some text</b><br />

		E-mail: <a href="#">company</a><br />

		address info<br />

		address info

	</span>





	<img src="images/logo.gif" alt="logo" width="305" height="71" />



</div>

When working with CSS layouts, always try and use as little markup as possible. Wrapping the logo image in a DIV is qiute pointless. Even if you need to apply block level styles to it you can just give the image an ID arrtibute and set it do display:block (which is a suitable reason to use the display style).

Infact, you could possibly do the above with a simple header container like so:

#header{float:right;} /* Or text-align:right;  */

#header img{position:absolute;left:0px;}

<div id="header">



	<img src="images/logo.gif" alt="logo" width="305" height="71" />



	<b>some text</b><br />

	E-mail: <a href="#">company</a><br />

	address info<br />

	address info



</div>

[This message has been edited by Cameron (edited 11-28-2003).]

^What he said. Especially the part about using as little markup as possible. I should have thought of that, but I was too focused on the question.

You win this time, Wee Bull!


___________________________
Suho: www.liminality.org

quote:

---

So setting a DIV to display:inline is the same as using a SPAN tag. Dig?

---

*hits self for forgetting*

I read through the inline formatting, and was able to get images to show up in paragraphs (css2 suho link). After that, it made cameron's code makes a lot more sense.

Thank you.