What is the most effective method to achieve the following layout using HTML/CSS:
+---------+---------------------------------------------------+
| my | Home About Categories Donate |
| best +---------------------------------------------------+
| website | Search __________ |
+---------+---------------------------------------------------+
Requirements:
- "my best website" should be text, not an image, therefore the height of "masthead" cannot be specified in pixels
- The two long rectangles should each occupy 50% of the square box's height
- The two long rectangles should extend all the way to the right
This is what has been attempted so far:
#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>
The issue with the current attempt is that the two long rectangles do not stretch fully to the right and their heights do not match that of "masthead-sitename"