Background image of block element overlaps with float element

I am facing a minor issue with positioning a background image on a block element that comes after a floating element.

When I float an image to the left, followed by an H1, the H1 flows behind the image, but its actual title appears next to the image due to the floating behavior.

The problem arises because the background-image on the H1 needs to align to the left, making it appear behind the img.

For example:

http://jsfiddle.net/WwuqG/

(I added a second title with clear: left property to demonstrate desired appearance).

One potential solution could be setting the left-margin of the title to slightly more than the width of the floating image, but this requires knowing the width in advance.

Another option is inserting the title's icon within an element inside the h1, but this may not align with semantic correctness.

Is there a better CSS-only approach that avoids the need for extra elements?

Answer №1

Include the property overflow:hidden in the style of the h1 element.

Check out this updated fiddle

Answer №2

I'm feeling a bit perplexed.

After following your suggestion:

adjusting the left margin of the title to be slightly wider than the floating image's width

The result can be seen here: http://jsfiddle.net/WwuqG/1/

I am puzzled because it seems like such an easy problem to solve.

Additionally, include float: left in the <h1>: http://jsfiddle.net/WwuqG/2/

This method works with images of any width: http://jsfiddle.net/WwuqG/3/

Am I on the right track or have I misunderstood something?

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

Ways to display a different div when clicking on a div?

Good afternoon, I've noticed that this question has been asked numerous times before, but none of the solutions provided seem to work for my specific issue. My problem involves a div with the class .title3. I want another div with the class .Content ...

javascript jquery html css

Creating a floating border effect.Would you like to know how

Currently working on a new component, I'm looking to create a unique border for certain cards. However, I'm struggling to find the perfect solution. Check out the specific border style needed in the image provided below. https://i.sstatic.net/4vA ...

css sass frontend

How can I center a Bootstrap modal vertically and make it responsive?

Is there a way to vertically center the bootstrap modal? I have been searching for a solution, but none seem to be responsive or effective. My website is using Bootstrap 3. The modal does not adjust properly on smaller screens or when the browser window i ...

javascript jquery html css twitter-bootstrap

broken alignment of right-aligned Bootstrap navbar

I need help with displaying a navbar on my webpage. I want the right side of the navbar to show different elements based on whether the user is logged in or not. If the user is not logged in, it should display "Login" and "Register," and if they are logged ...

html css twitter-bootstrap

Resetting the state of toggle/click states in AJAX and jQuery

Currently, I am encountering a small dilemma with a .on function and AJAX in conjunction with a mobile menu. The mobile menu is located in the header of a site that relies heavily on AJAX for its content loading. This poses an issue because when an AJAX ca ...

javascript jquery html css ajax

Error message in JS and HTML is totally bizarre

My expertise in JavaScript is very limited, so the terms I use might not be entirely accurate. However, I'll do my best to explain the issue at hand. I'm facing a peculiar problem... I've been attempting to modify someone else's JS scr ...

javascript jquery html css api

What could be the reason for the malfunctioning dropdown menu in my navigation bar upon clicking it?

After spending hours practicing creating a navbar using Bootstrap 3.3.7, I've hit a roadblock - the dropdown is not working when clicked on. It's frustrating because I have double-checked all my scripts and ensured that I have the latest version ...

javascript jquery html css twitter-bootstrap

Adjust the image size in the jumbotron to fit perfectly without the need for scrolling

I'm in the process of creating a website with a prominent jumbotron section on the landing page. I am looking to adjust the height of the image within the jumbotron without cutting off any parts of the picture, and I do not want it to scroll to displa ...

html css bootstrap-4

Attempting to create a responsive design for profile pictures and texts

Seeking advice on making my profile picture and About me text responsive, utilizing Bootstrap v5 with percentages for responsiveness. Wondering if there is a more efficient way to ensure the profile picture looks good on phones, tablets, and 1080p screens. ...

html css responsive-design bootstrap-5

What is stopping me from utilizing ES6 template literals with the .css() method in my code?

I am currently working on a project where I need to dynamically create grid blocks and change the color of each block. I have been using jQuery and ES6 for this task, but I am facing an issue with dynamically changing the colors. Below is the snippet of m ...

javascript jquery css ecmascript-6

What is the best way to implement spacing between the navigation bar logo, search bar, and links using flex in Bootstrap 5?

I want to customize the layout of my navigation bar using Bootstrap 5. Specifically, I would like the logo text to be on the left, the search bar in the middle, and the user links on the right. How can I achieve this using Bootstrap 5? <!-- NAVIGATION ...

html css bootstrap-5

Are there any alternative methods to elegantly organize a form within a table other than the one showcased here? My form consists of varying numbers of

Within the initial row, I have incorporated four columns, while rows 2-4 contain two columns each to enhance the formatting. I am seeking a more elegant approach to address this issue and avoid triggering the validation warning. This task pertains to a s ...

html css

Execute Jquery ajax only on the initial invocation

When I am using ajax post in jQuery to build a portion of a page, I am encountering an issue where it only runs once. Below is the code snippet I am working with: <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery ...

javascript jquery html ajax

Aligning Content in the Middle of a Bootstrap Row

I'm struggling to horizontally center the content in the "row" class div. I've attempted using justify-content-center and other variations. <div class="container"> <div class="row"> <div class="col-md-4 portfolio-item ...

html css bootstrap-4

Is it possible to produce data on the server and then transmit it to the client?

Can you provide guidance on creating a webpage that prompts a python script to run on the server, and then displays the output of the script back in the browser? I'm put time into researching and seeking assistance during my web programming course. A ...

python html

The position of the mouse on the canvas following a CSS scaling

I'm currently working on finding the mouse coordinates on an HTML5 canvas element. I set the canvas dimensions to 700x700. When I hover over the canvas, I aim to retrieve the X,Y coordinates of the mouse. Everything goes smoothly until I resize the c ...

javascript css html canvas

eliminate element from array and refresh table

I am facing an issue with my code where I have an array bound to ng-repeat and a button. When the user clicks on the button, I want to remove an element from the array. Here is my current code snippet: var app=angular.module('app',[]); app.con ...

javascript html arrays angularjs angularjs-directive

Can the Apache tomcat located at "localhost:8080/app.html" be accessed from a different network?

Currently, I am hosting my webpage on a Tomcat server. While I can easily access it from different computers on the same network, I am curious if there is any way to access this webpage/localhost from a different network? ...

tomcat webserver html

Developing a fresh browser window with a clickable button using JavaScript

Currently, I am learning JavaScript and trying to create a button on a webpage using the code I wrote in JavaScript. However, instead of adding the button to the page specified by me, it is always added to index.html. I am using WebStorm IDE for this proje ...

javascript html

Navigating the battleground between native and HTML5 mobile applications

As an experienced iOS developer with knowledge in Windows Phone and Android, I have observed the increasing popularity of HTML5 web-apps over native apps. This shift towards HTML5 development frustrates me, as a strong argument can be made for native app d ...

android iphone ios html

CSSer Q&A