CODEWITHSUNDEEP
htmlcss
CSS Apprentice
CSS Apprentice

Reputation: 939

How To Line Up A Header & Sub-Header

I'm trying to line up a header and a sub-header; my thought was to use text-align: justify; but it's not working. My guess is because the parent is set to inline-block?

jsFiddle: http://jsfiddle.net/9bnqab6n/1/

HTML:

<div id="header">
    <div id="logo">
        <h1 class="logo">My Business</h1>
        <h3 class="logo">This Is What We Do</h3>
    </div>
</div>

CSS:

h1, h3 {
    margin: 0;
    padding: 0;
    text-align: justify;
}
h1 {
    font-family: Arial;
    font-size: 1.75em;
}
h3 {
    font-family: Georgia;
    font-size: 1em;
}
.logo {
    text-align: justify;
}

Upvotes: 0

Views: 96

Answers (2)

Derek Misler
Derek Misler

Reputation: 106

Unfortunately, text-align:justify doesn't work on a single line of text; it's meant for paragraphs. You'll need to style the .logo:after like so:

h1, h3 {
    margin: 0;
    padding: 0;
    text-align: justify;
}

h1 {
    font-family: Arial;
    font-size: 1.75em;
}

h3 {
    font-family: Georgia;
    font-size: 1em;
}
.logo{
  text-align: justify;
}
.logo:after{
  content: "";
  display: inline-block;
  width: 100%;
}
<div id="header">
    <div id="logo">
        <h1 class="logo">My Business</h1>
        <h3 class="logo">This Is What We Do</h3>
    </div>
</div>

Upvotes: 2

Abdush Samad Miah
Abdush Samad Miah

Reputation: 316

In your css file change this:

.logo {
    text-align: justify;
}

to this:

.logo {
    display: inline;
}

Upvotes: 0

Related Questions