Struggling with Layouts in CSS

Question

Here is a simple frame for the layout I'm trying to achieve: https://i.stack.imgur.com/pKnR1.png I'm focused on the header at the moment, and I've managed to get it to look how I want it to, but I feel like I haven't employed the best methods. When I resize the browser width, the words at the ends of the h1 and h2 elements are pushed to the next line and it creates a jumbled mess. Ideally, I'd like all of the contents of the header to scale proportionally when the browser becomes too narrow. What is the best way to achieve this?

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Title</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <img src='logo.png' alt="Logo" class="logo">
            <h1>TITLE TITLE</h1>
            <h2 id="Subtitle1">SUBTITLE 1 SUBTITLE 1</h2>
            <h2 id="Subtitle2">SUBTITLE 2 SUBTITLE 2</h2>
        </header>
        <nav>
            <li><a href="index.html">Home</a></li>
            <li><a href="aboutus.html">About Us</a></li>
            <li><a href="services.html">Services</a></li>
            <li><a href="resources.html">Resources</a></li>
            <li><a href="events.html">Events</a></li>
            <li><a href="contactus.html">Contact Us</a></li>
            <li><a href="getinvolved.html">Get Involved</a></li>
        </nav>
        <footer>
            <p>&copy; 2014 </p>
        </footer>
    </body>
</html>

CSS

header {
    max-width: 800px;
    max-height: 285px;
    margin: auto;
}

h1, h2, li, p {
    font-family: "tw cen mt", "century gothic", sans-serif;
}

h1, h2 {
    position: absolute;
    display: inline;
    letter-spacing: 2px;
    float: left;
}

h1 {
    font-size: 5em;
}

h2 {
    font-size: 3em;
}

#Subtitle1 {
    top: 100px;
}

#Subtitle2 {
    top: 150px;
}

.logo {
    position: relative;
    display: inline;
    float: left;
    max-width: 285px;
}

what do you mean by 'the words at the ends of the h1 and h2' ? — Viswanath Donthi, Aug 24 '14 at 02:11
@BronzeGiraffe There are some issues with the css of your example, e.g. mixing position absolute and float left. Have some information on this e.g. here: http://stackoverflow.com/questions/11333624/css-float-right-and-position-absolute-doesnt-work-together. — matthias_h, Aug 24 '14 at 02:18
And the bunch of li-tags should be wrapped in an ul-tag, though browsers correct this issue in most cases it's not valid html. — matthias_h, Aug 24 '14 at 02:29

score 0 · Accepted Answer · answered Aug 24 '14 at 02:28

Maybe applying the following would get what you're looking for

h1, h2 { white-space: nowrap; }

You can use media queries to resize elements based on window size.

Also, as a general tip, try using {display: inline-block;} instead of {float: ...;}. It will vastly simplify a lot of cases.

score 0 · Answer 2 · answered Aug 24 '14 at 02:49

First, of all it would be a good practice if you wrap your headings with a div and float this instead of the headings. Something like this:

HTML

<header>
    <img src='logo.png' alt="Logo" class="logo">
    <div id="h-container">
        <h1>TITLE TITLE</h1>
        <h2 id="Subtitle1">SUBTITLE 1 SUBTITLE 1</h2>
        <h2 id="Subtitle2">SUBTITLE 2 SUBTITLE 2</h2>
    </div>
</header>

CSS

header img,
header #h-container { float:left; }

Second, you should not mix float with absolute positioning. In this case there is no need to absolute position your headings.

As for the scaling, you could use media queries to target specific browser widths and reduce the font size for smaller widths. If you want your logo to scale too you could do something like:

HTML

<div id="logo-container">
    <img src='logo.png' alt="Logo" class="logo">
</div>

CSS

#logo-container { max-width:200px; min-width:100px; }
#logo-container img { width:100%; height:auto; }

Struggling with Layouts in CSS

2 Answers2