Arranging three rectangles using html/css - html

Question

What's the simplest way to achieve the following with HTML/CSS:
+---------+---------------------------------------------------+
| my | Home About Categories Donate |
| best +---------------------------------------------------+
| website | Search __________ |
+---------+---------------------------------------------------+
Constraints:
"my best website" is text, not an image, so cannot specify height of "masthead" in px
The height of each of the two long rectangles should take up 50% of the height of the square box
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>

Answer 2

http://jsfiddle.net/4cn7q/3/
Basically, let the site name dictate the box height, and absolutely position the two "rows" within the wrapper.
(You can then choose to vertically center content in the rows if you like, using a variety of techniques.)

Answer 3

The "easiest" (although probably not the best way) is to use a table:
<table>
<tr>
<td rowspan="2">my best website</td>
<td>Home About Categories Donate</td>
</tr>
<tr>
<td>Content goes here</td>
</tr>
</table>
However I know a lot of people who would lynch me for suggesting this. Hey, I just want to not have to spend five hours getting the CSS to work, okay? :p