Alignment using CSS

Hello

I'd like to align 3 elements using DIV and SPAN and i would like to know how is this done using css.

Element 1 has 1 image (logo)

Element 2 has some text (2 H1 headers)

Element 3 will ocupy with a background all the remaining of the screen (depends on how much is left)

Now using tables it would look like that:
<table width=100%>
<tr>
<td width=100>
<img ....>
</td>
<td width=1>
<h1>Blah</h1>
<h1>more blah blah blah</h1>
</td>
<td style="background ....">
</td>
</tr>
</table>

however trying the same thing with one <div> and three <span> i found that it won't align correctly

Can i get some help here?

In case you're curious i'm trying to rewrite the header for my homepage.

 

It's hard to help when you don't say what's broken

Anyway, you can find some info on centering block-level elements in the thread 7061.

Within block-level elements, you can align using text-align. Keep in mind that text-align is inheritable and don't set it in a high-level element unless you know what you are doing.

Sometimes it is easy to align inline elements as blocks by changing their display property (e.g. <img style="display: block; margin: auto;" ... >)

Finally, you can shift block-level elements to either side by making them into floats.

J.D.

 

Thanks J.D. for the help!

It's so hard to tell what's broken... there are so many things that don't work....
I don't even know where to start!

I'll read the thread you gave me and do some more experimenting, then get bak here with (hopefuly) a more concrete problem...

 

Ok: here's one concrete problem (one of the many)

<div style="width:100%; height:120px;">
<h1>Blah</h1>
<h1 class=a>More blah blah blah</h1>
</div>

The combined <h1>'s use about 60 pixels height, unless the text wraps and takes two lines; in this case they take about 80 pixels.

The challenge is: how should i vertically allign the <h1>'s ? As you can see, the div is 120 pixels height, but the "vertical-align" doesn't work...

Using tables i would just put the property "valign=middle" in a <td>........

 

Here's another problem:
http://www.crea-soft.com/about1.html

I can't seem to enter a <br> without the second line to go below the div.

When I enter the <br> the output looks like this:
http://www.crea-soft.com/about2.html


the offending code:
<div style="width:100%; height:116px; background: #FFFFFF url(./img/puzzles-grid/jigsaw<? print ((int)(Date("j")) % 8); ?>.jpg) no-repeat right top;">
<span>
<img src="/img/jigsaw-puzzles.jpg" width="130" height="96" border="0" vspace="10" hspace="10" alt="Jigsaw Puzzles and Puzzle Games">
</span>
<span>
<h1 valign=center style="display: inline; vertical-align:top;"><?php print $header1;?></h1>
<br>
<h1 style="display: inline;vertical-align:top;" class=a><?php print $header2;?></h1>
</span>
</div>

Apparently the <br> is a block element and gets displayed after the next block element (the div). But how am i suppose to display the second text below the first one?

 

Try this (untested):

<style>
#divA, #divB, #divC
{
  float: left;
}

#divA
{
  width: 10%;
}

#divB
{
  width: 40%;
}

#divC
{
  width: 40%;
}
</style>

[ ... ]

<div id="divA">
  [Content ...]
</div>

<div id="divB">
  [Content ...]
</div>

<div id="divC">
  [Content ...]
</div>

Code (markup):

Adjust the widths accordingly. Don't let the total width reach 100% , it will wrap in some browsers (IE), and remember, allow for padding and margins which adds to the total width.

If you want the same thing you have with tables, you need to do a lot of CSS hacking (or just stick with tables).

 

Thanks! the code work fine.

Question: how do i adapt the code for the following widths:

Width 1: 100px;
Width 2: All the remaining screen width?

I will need this in numeous places.....

Thanks again!

 

This works in Firefox (untested in IE):

<style>
#content
{
  margin: 0 0 0 110px;
  background: red;
}
#left
{
  width: 100px;
  float: left;
  background: green;
}
</style>

<div id="left">
  [ content ... ]
</div>

<div id="content">
  [ content ... ]
</div>

Code (markup):

I added the background colours, so the layout was clear.

 

Thanks! That code works just fine!!!!

I have just another question:

This code does not align my <h1><h2> headers in the middle; can somebody please give me a code that aligns vertically the div's content?

<div style="vertical-align: middle; height: 120px;">
<h1>Text 1</h1>
<h2>Text description ....</h1>
</div>

you can see the output here:

www.crea-soft.com/about2.html

 

vertical-align has no effect on block-level elements, only on inline elements and table cells. Use padding, margin and line-height to space h1's. Use floats to shift them left or right.

J.D.

 

J.D. , i noticed that.... Vertical won't work...

Can you give me please a solution that would not involve any fixed margin? sometimes the <h1> elements occupy half of the 120pixels height i have assigned for the header, but sometimes they take all the height.
I would need a solution that aligns them vertically centered, not just 10-20 pixels from the top down...

Thanks!

 

In general, in CSS any element can be displayed as something else using the display property. Unfortunately, IE doesn't seem to understand anything but block and inline. In FF, the following would do what you need:

<div style="display: table-cell; height: 120px; vertical-align: middle;">
<h1>0123456789 0123456789</h1>

Code (markup):

Another approach would be to inrease line-height, but in your case it won't work because you may have 2-3 lines in <h1> and lines will stand too far apart from each other.

I can't really think of anything else and would simply use a table - it seems that it's the right tool for the job in this case.

J.D.

 

Thanks guys for all the help! you've made my transition from table world to css world a lot smoother!

I'd like to offer you something back: some links from my website. J.D. , nullbit, please mail me your site's details and i'll add you a link on my pages!

Email: traian at crea-soft com

 

You are too kind. It's not necessary, I'm glad to help anyway.

 

But i want to! I'm not using of receiving something without giving something back. And a link costs me nothing!

 

You can click on the scales image instead, to add to my reputation. I'd be happy with that.