Floating Headers

Forum Moderators: not2easy

Message Too Old, No Replies

Floating Headers

Float Two headings on same line with different text align

lupatis

10:55 pm on Oct 26, 2005 (gmt 0)

Hi,

I'm trying to make two DIV's float, one right and one left but on the same line. This is for a ontent box but i do not want to use tables but the eqivent would be ..

____________________
ŚHeader Ś SubH Ś
Ś--------------------Ś
Ś Paragraph content Ś
Ś here Ś
Ś____________________Ś

Sorry for the poor ascii art ;)
I have tried floating two divs left but the text remain aligned left despite asking for text-align:right; in the sub header div.

Any help appreciated ;)

Mike

alias

9:02 am on Oct 27, 2005 (gmt 0)

In order for two blocks to be able to fit in one line there has to be enough space for them.
So let's say we want to place a div1 and div2 in one line next to each other. In that case the html is:

<body>
<div id="div1">something</div>
<div id="div2">something</div>
</body>

To place them next to each other you'll need to apply the following styles to them:

#div1 {
float: left;
width: 50%;
}
#div2 {
float:left; /* or float:right; */
width: 50%;
}

That's it. Have in mind that if you apply any paddings or margins or borders to them - their width will be counted in, so you will need to set a smaller overall width value.

Hope that helps,
-=ms=-

lupatis

3:39 pm on Oct 27, 2005 (gmt 0)

Many thanks,

I can't beleive I did'nt think of width!

Cheers
Mike