The background image in the header does not fully extend to cover all of the header content

I am currently working on a website for a friend and I am facing an issue with the header section. The header is a div that contains two images inside divs, as well as the company name and slogan in separate divs.

The main purpose of this header div is to group all the header content together for easier positioning and to allow for a background image to be applied.

However, I am encountering a problem where the background image of the header does not completely fill the entire background area of the content within it. It only fills up to the padding specified on the header div.

In theory, I believe that a container div should have the same size as the combined sizes of its child divs. This would mean that setting a background image for the parent div should result in a background that covers all the child divs as well. Unfortunately, this is not happening in practice.

Can someone please help me understand what I am overlooking? How can I make sure that the image acts as a background for the entire header? I have included the relevant (generic) code here: http://codepen.io/deadwanderer/pen/LnGKC/

If you take a look at the code, you'll notice that the borders of the header div create more of a line at the top of the content rather than surrounding it like a box.

Thank you in advance for any assistance or advice!

htmlcss

Answer №1

To fix the layout with floating divs, it is essential to clear them:

Use this method:

<div class="header">
  <div class="leftpic">
     <img src="" alt="Left Image" class="pic"/>
  </div>
  <div class="rightpic">
    <img src="" alt="Right Image" class="pic"/>
  </div>
  <div class="hdrtext">
    <div class="companyName">Company Name</div>
    <div class="companySlogan">Company Slogan</div>
  </div>
  <div style="clear:both;"></div> <!-- Make sure to include this line -->
</div>

DEMO AVAILABLE HERE: http://codepen.io/anon/pen/dRtEf

Learn more about Clearfix techniques here: http://css-tricks.com/the-how-and-why-of-clearing-floats/

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

What steps should I take to make the image appear on the browser?

I am having trouble displaying an image on a webpage in the browser. Despite using the correct path to the image, only the alt tag is being shown along with an ordered list below it. Strangely, Visual Studio Code suggests files while building the path in t ...

htmlnode.js

Can a <style> tag be included in a .css file without issue?

Within one of our projects, there is a <style> tag placed at the beginning of a CSS file (for the purpose of ensuring CSS highlighting in certain text editors): <style> body { ... } .... Although I am aware that this is considered incorrect ...

css

What is the best way to vertically center my footer text?

footer { text-align: center; color: #FFF; position: fixed; bottom: 0px; width: 100%; height: 90px; background-color: #464646; } <footer> &copy; Name </footer> I am looking to center my name within the footer, however, it cu ...

htmlcssfooter

Tips for waiting on image loading in canvas

My challenge involves interacting with the image loaded on a canvas. However, I am uncertain about how to handle waiting for the image to load before starting interactions with it in canvas tests. Using driver.sleep() is not a reliable solution. Here is ...

javascriptangularjshtmlcanvasselenium-webdriver

What steps should I take with my Android PWA manifest and service workers?

I created a web application that I want to prompt Android users to download when they visit. To build my service workers and manifest, I utilized PWA Builder which can be found at Now that I have the manifest file ready, should I simply upload it to the r ...

javascriptandroidhtmlprogressive-web-apps

The form data is being passed as null to HttpContext.Current.Request

My file upload module is working well with Postman without any content type. However, in the code, the file count always shows as 0 in the backend API. If anyone has any insights into what I might be doing wrong, please help me out. Thank you. Below is my ...

javascripthtmlangularjsasp.net-web-api

When adjusting the viewport size, CSS animated elements may shift unexpectedly in Firefox and Safari, while Chrome displays them correctly

This example demonstrates a simple code snippet: body { display: flex; justify-content: center; align-items: center; height: 100vh; width: 100vw; } .container { animation: moves 5s ease 0s normal forwards; /* transform: trans ...

htmlcssfirefoxsafari

Just a snippet of a webpage shown

My website focuses on online magazines. I'm looking for a way to selectively display specific parts of articles that are in regular HTML format with a global CSS stylesheet applied. There are no images, only text. How can I extract certain segments of ...

htmlcssiframe

Hiding overflow when navigating back a page in Safari

I need help finding a solution to this issue. On my website, the results page works perfectly fine until I navigate to a product's details page and then return to the results using the "page before" button. At that point, the overflow becomes hidden, ...

htmlcssscrollsafarioverflow

Matching the heights of child elements in different block elements using CSS (flex/grid)

Hey there! I need some help with a markup issue. I want to replicate the layout shown in this picture. The challenge is ensuring that the grey line between the upper and lower sections of cards on the same row are aligned perfectly. In the image, you can s ...

htmlcssflexboxcss-grid

HTML: Choose from a list of options by selecting multiple items from

I want to implement a select field with the multiple attribute as a standard dropdown field with size=1: <select name="test[]" size="1" multiple> <option>123 <option>456 <option>789 </select> Any reason why the a ...

htmldrop-down-menu

Transitioning with a CSS cubic-bezier function results in a noticeable jump of the content

My transition in an accordion list is using cubic-bezier(0.68, -0.55, 0.265, 1.55), but the issue I am facing is that the content below is also 'jumping'. Does anyone have suggestions on how to create space below my accordion (ul list) so that w ...

jqueryhtmlcsstwitter-bootstrap

Integrating XML API Requests Using HTML and JavaScript

When there is only one item in the XML document, I want to update my inner HTML with the result of an API call. I have managed to successfully make the API call work when there are multiple items in the XML document (thanks to W3). <!DOCTYPE html> ...

javascripthtml

Discussing the use of local identification within a <BASE> tag in SVG specifically on the Firefox browser

Encountering an issue on a current Firefox browser running on Win7 while utilizing SVG (although the details may not be directly related to the problem): ` <head> <!-- base href="http://127.0.0.1/package/index.php" /--> < ...

htmlsvg

Error: JavaScript alert box malfunctioning

I am facing an issue with my JavaScript code. I have successfully implemented all the functionalities and can change the color of an image background. However, I am struggling to prompt a pop-up message when clicking on an image using "onclick". I have tri ...

javascripthtml

Clicking on the image in an owl carousel slider does not trigger the onsen template page to load

I am experiencing an issue with my owl carousel slider while calling an API for page content on image click. I have implemented an onsen template page using ng-click on image, but it only works for the first image click. Subsequent images do not call the o ...

javascriptjqueryhtmlangularjsonsen-ui

Using jQuery to retrieve the values of two distinct sliders and executing a specific mathematical operation

I have two sliders with their own values and properties: https://i.stack.imgur.com/3OZqr.gif My goal is to retrieve the values of these two sliders and calculate a result that will be displayed next to the interest label. The calculation formula is: poun ...

javascriptjqueryhtml

What is the best way to create a dynamic JavaScript counter, like one that counts the world's population

Can someone guide me on creating a real-time JavaScript count-up feature that doesn't reset when the page reloads? Any tips or examples similar to would be much appreciated. Thank you! ...

javascripthtmlcss

Unable to show inline within web forms application utilizing bootstrap

I am currently modifying the account registration section of a new VS 2013 web application that uses bootstrap css for formatting. I am working on creating a form on a page and struggling to get one section to display inline instead of as a block element. ...

csstwitter-bootstrap

Having troubles with Navbar svg images not loading on certain pages on the express/ejs app?

Hello there, I'm encountering an issue with my navbar in an express app. The navbar is saved as a partial and included in a boilerplate wrapper used on most pages. Here's a snippet of how it looks: <h1>HELLO<h1> Within the boilerplat ...

cssexpressejs