Creating a layout with three rectangular shapes using HTML and CSS

What is the most effective method to achieve the following layout using HTML/CSS:

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

Requirements:

  1. "my best website" should be text, not an image, therefore the height of "masthead" cannot be specified in pixels
  2. The two long rectangles should each occupy 50% of the square box's height
  3. 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"

Answer №1

Adjust the masthead padding on the left to match the site name width, then use absolute positioning to place the sitename over the padding. Avoid floating the bars and refrain from setting a specific width for them. The bars will naturally fill the container without overlapping the left padding. Ensure the sitename's height is set to 100% and make sure the bars are tall enough to fully display the site name.

Check out the 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://example.com/jsfiddle/unique-link

Instead of setting a fixed height for the box, let the website name determine the height and position the two rows within the container with absolute positioning.

(You can then opt to center the content vertically in the rows using various methods if desired.)

Answer №3

One way to quickly create a layout is by using a table:

<table>
    <tr>
        <td colspan="2">Welcome to my website</td>
    </tr>
    <tr>
        <td>Home About Services Contact</td>
        <td>Content goes here</td>
    </tr>
</table>

While this method may not be recommended by purists, it can save time compared to wrestling with CSS for hours on end.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

division of vertical space

Is there a way to ensure that the column containing bbb + ccc is the same height as the aaa and ddd columns? <html><body> <div style="width:500px;height:500px;background-color:yellow"> <div style="float:left;height:100%;background-co ...

Clicking on the icon image that features a Background Video will trigger the video to play in a popup window originating from the same location

A background video is currently playing on the site. When the play icon is clicked, the video should start playing in a popup. The video should start playing continuously from the exact moment and position where it is clicked. Check out the example here. ...

Highlighting table column when input is selected

I am working with a table where each <td> contains an <input>. My goal is to apply the class .highlighted to all the column <td>s when an <input> is being focused on. Additionally, I want to remove this class from all other columns ...

What is the best way to adjust the size of an image as I navigate down a webpage?

I've been working on designing a navigation bar for a website, but I'm running into some issues. My goal is to have the logo shrink as the user scrolls down the site. I've experimented with webkit animations and various javascript/jQuery fun ...

Issues with implementing Bootstrap 4 navbar on a Rails 5 application

I'm currently in the process of transitioning my static HTML/CSS/JS website to a Rails application. Using Bootstrap 4, I had all the functionality and CSS classes working perfectly on the static site. However, after the migration to the Ruby app, the ...

Concealing a Div on Click Outside of Child Div in ReactJS

I have a parent div with a child div in the center. I am trying to figure out how to close the parent div only when clicking outside of the child div. My current code is structured like this, using triggerParentUpdate to control whether the div should be d ...

A comprehensive guide on implementing form array validations in Angular 8

I am currently using the formArray feature to dynamically display data in a table, which is working perfectly. However, I am facing difficulty in applying the required field validation for this table. My goal is to validate the table so that no null entry ...

Using JQuery to modify several background images in unison

I have a CSS code that uses 8 images to create a frame: background-image: url(images/blue/tl.png), url(images/blue/tr.png), url(images/blue/bl.png), url(images/blue/br.png), url(images/blue/t.png),url(images/blue/b.png),url(images/blue/l.png),url(images/b ...

HTML5 database error: Uncaught TypeError due to illegal invocation

When I test the code below in Chrome, I encounter an error: var db = openDatabase('foo', 1, 'foo', 1111); var sql = function(callback){ db.transaction(function(tx){ callback(tx.executeSql); }); }; sql(function(query){ ...

Is there a way to have a div element with a box-shadow effect on top of its h1 child element?

I am facing an issue where a div with a box-shadow and an h1 inside are not aligned properly, causing the shadow to not cover the h1 element. Below is the code snippet in question: h1 { position: absolute; top: 50%; left: 44%; -webkit-t ...

Can I link the accordion title to a different webpage?

Is it possible to turn the title of an accordion into a button without it looking like a button? Here is an image of the accordion title and some accompanying data. I want to be able to click on the text in the title to navigate to another page. I am worki ...

Ensure that all elements with the :hover event have a text color of #fff in CSS

 Troubleshooting problems with block's child elements during the :hover event. Specifically, I have a pricing block where I want all texts to be of color #fff when hovered over. Currently, when hovering over the <h3> and <p> elements ...

The issue of the Facebook like button not appearing may be due to the sequence in which FB.getLoginStatus() is being

After following the instructions on Facebook's site (http://developers.facebook.com/docs/reference/plugins/like/) to add a basic like button to my website using HTML5, XFBML, and iFrame methods without success, I suspected there may be an issue with m ...

What is the reason for the image not being positioned in the top left corner of the html page?

My simple HTML page consists of only one image: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Anz ...

Sending a base64 image of a canvas to a servlet

I have a JavaScript function that uploads HTML5 canvas base64 image data to a servlet. Here is the code: function saveDataURL(a) { var postData = "canvasData="+a; var ajax = new XMLHttpRequest(); ajax.open("POST",'uploadPhoto.cgi',tr ...

What is the best way to attach two separate event listeners to a single button?

I'm attempting to have one button trigger two different functions, but I haven't been successful so far. I tried adding the second event listener as indicated by the // part, but it didn't work. The two functions should be executed sequentia ...

Resizable item within a text box (similar to an HTML editing tool)

After extensive searching online, I have not been able to find a solution. What I need is a draggable input element within a textarea in a text-editable div. The draggable textarea should be integrated seamlessly into the text, and upon submitting, it shou ...

Establish a primary background color for the React application, with the majority of the display content

I have been working on styling a React project where App.js mainly handles routing and navigation to its components: App.js import {useState, useEffect} from 'react'; import Models from './pages/Models'; import Loadingpage from ' ...

Conceal and reveal text with a simple user click

Currently, I am working on a website project that utilizes bootstrap. However, I am facing some uncertainty regarding how to effectively hide and display text: <nav class="navbar navbar-light" style="background-color: #e3f2fd;"> ...

Creating a responsive website that utilizes YAML and is optimized for extremely narrow screen widths

I have noticed that my responsive design using YAML is working well for the most part. However, on screens with very small widths, the YAML grids become extremely tiny. In such cases, it would be more practical to have the right grid displayed below the le ...