0

I have following fiddle: http://jsfiddle.net/BFSH4/

As you see there are two issues:

  1. The h1 and h2 aren't vertically aligned.
  2. The nav and the content aren't horzontal alligned.

For the 1. I already tried margin and padding. No success...

The second one also isn't that easy the common ways of floating and using inline-block don't work...

What am I doing wrong?

I finally managed floating the header. The problem was that hgroup isn't a block element. However even it worked after all I think it is better to use a real image for the enterprise name and slogan.

Now only the issue with the horizontal alignment fails.

I don't know why: http://jsfiddle.net/BFSH4/2/

I can do what I want there is no way that they wan't to be side by side!

bodokaiser
  • 15,122
  • 22
  • 97
  • 140

1 Answers1

0

Solution for your first problem (found here):

HTML

<div class="header">
    <span></span><img src="images/prototype.png" /><hgroup><h1>Prototype</h1><h2>SideBySide</h2></hgroup>
</div>

CSS

.header {
    height: 160px;
    border: 1px solid #8a2be2;
    /* text-align: center; */
}

.header span {
    height: 100%;
    vertical-align: middle;
    display: inline-block;
}

.header img {
    display: inline-block;
    height: 160px;
    float: left; /* added, so the image will appear left to the text correctly */
}

.header hgroup {
    margin: 0;        
    vertical-align: middle;
    display: inline-block;
}

This solution depends on display: inline-block

Solution for the second problem:

.nav {
    width: 229px;
    display: block;
    margin: 0 auto;
}

Live demo: http://jsfiddle.net/BFSH4/4/

Community
  • 1
  • 1
doptrois
  • 1,560
  • 11
  • 10
  • http://jsfiddle.net/BFSH4/1/ Hi, I tried the methods mentioned in youre link but I don't know how I could verticaly align + horizontal align to the image. Combining both fails.... I don't know what you want to tell me about the second issue. What do the li's have to do with horizontal alignment of .nav and .content container??? – bodokaiser Jun 13 '12 at 16:27
  • Finally corrected my answer: http://jsfiddle.net/BFSH4/4/ Hope this works for you. – doptrois Jun 14 '12 at 08:24