Question

What’s the simplest way to achieve the following with HTML/CSS:

+---------+---------------------------------------------------+
| my      | Home About Categories Donate                      |
| best    +---------------------------------------------------+
| website | Search __________                                 |
+---------+---------------------------------------------------+

Constraints:

1. “my best website” is text, not an image, so cannot specify height of “masthead” in px
2. The height of each of the two long rectangles should take up 50% of the height of the square box
3. The two long rectangles should stretch “all the way” to the right

Here is my best attempt:

#masthead {
    background-color:red;
}
#masthead-sitename {
    font-size:3em;
    float:left;
    color:white;
    padding:20px;
    background-color:black;
    width:188px;
}
#masthead-twobars {
    float:left;
    background-color:green;
}
#masthead-menu {
    float:left;
    width:100%;
    font-size:x-large;
    color:white;
    padding:20px;
    background-color:gray;
}
#masthead-search {
    float:left;
    width:100%;
    font-size:x-large;
    color:white;
    padding:20px;
    background-color:yellow;
}

<div id="masthead">
    <div id="masthead-sitename" >
        my<br/>best<br/>website
    </div>
    <div id="masthead-twobars" >
        <div id="masthead-menu">
            Home About Categories Donate
        </div>
        <div id="masthead-search">
            Search
        </div>
    </div>
</div>

It fails because the two long rectangles do not stretch all the way to the right, and the heights of the two long rectangles do not add up to the height of “masthead-sitename”

Answer 1

Give the masthead left padding as wide as the site name, then position the sitename absolutely over the padding. Don’t float the bars, don’t give them width. They’ll just naturally fill the container without overlapping the left padding. Set the sitename’s height to 100% and make the bars tall enough to fully display the site name.

Demo: http://jsfiddle.net/d6xsQ/1/

.masthead { 
    padding-left: 218px;
    background-color:red; 
    position: relative;
} 
.masthead .sitename {
    position:absolute;
    left: 0;
    top: 0;
    font-size:3em; 
    color:white; 
    background-color:black; 
    width:218px;
    height: 100%;
    overflow: hidden;
} 
.masthead .sitename > div {
    padding:20px;
}
.masthead .bar { 
    font-size:x-large; 
    padding:40px 20px;
}
.masthead .menu { 
    background-color:gray;
    color:white;
}
.masthead .search {
    background-color:yellow; 
}

<div class="masthead">
    <div class="sitename" >
        <div>
            my<br/>best<br/>website
        </div>
    </div>
    <div class="bar menu">
        Home About Categories Donate
    </div>
    <div class="bar search">
        Search
    </div>
</div>