Topic: aligning div's within a div header Pages that link to <a href="https://ozoneasylum.com/backlink?for=11106" title="Pages that link to Topic: aligning div&amp;#039;s within a div header" rel="nofollow" >Topic: aligning div&#039;s within a div header\

 
Author Thread
ninmonkey
Nervous Wreck (II) Inmate

From:
Insane since: Nov 2003

IP logged posted posted 11-24-2003 17:27 Edit Quote

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:

code:
<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:

code:
#logo
{
display:inline;
}

#headeraddress
{
display:inline;
}



Nathus
Nervous Wreck (II) Inmate

From: Minnesota
Insane since: Aug 2003

IP logged posted posted 11-24-2003 17:39 Edit Quote

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.

code:
#logo
{
width:50%;
float:left;
}

#headeraddress
{
width:50%;
margin-left:50%;
text-align:right;
}



ninmonkey
Nervous Wreck (II) Inmate

From:
Insane since: Nov 2003

IP logged posted posted 11-24-2003 18:25 Edit Quote

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?

Suho1004
Maniac (V) Inmate

From: Seoul, Korea
Insane since: Apr 2002

IP logged posted posted 11-25-2003 01:52 Edit Quote

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

ninmonkey
Nervous Wreck (II) Inmate

From:
Insane since: Nov 2003

IP logged posted posted 11-28-2003 00:50 Edit Quote

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

code:
#header
{
height:71px;
}

#logo
{
float: left;
}



Cameron
Bipolar (III) Inmate

From: Brisbane
Insane since: Jan 2003

IP logged posted posted 11-28-2003 02:03 Edit Quote

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:

code:
.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:

code:
#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).]

Suho1004
Maniac (V) Inmate

From: Seoul, Korea
Insane since: Apr 2002

IP logged posted posted 11-28-2003 03:24 Edit Quote

^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

ninmonkey
Nervous Wreck (II) Inmate

From:
Insane since: Nov 2003

IP logged posted posted 11-28-2003 15:53 Edit Quote
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.



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu