The image sits on the edge of the container, not fully contained

.sub2 {
  background-color: #FFFFBF;
  margin-top: 30px;
  height: 410px;
  width: 100%;
}
h1.sub2 {
  font: bold 100px american captain;
  text-decoration: underline;
  float: right;
}
p.sub2- {
  font: italic 25px american captain;
  margin-top: -300px;
  margin-left: 750;
}
<div class="sub2">
  <h1 class="sub2"> Mobile Phones </h1>
  <img src="D:\ps\Notepad++\sub2.jpg" alt="Mobile Phones" style="width:47%;height:400px;">
</div>

The issue is that the image of mobile phones is not staying within the designated container named sub2. Even though the image is placed inside the <div> tag of the container, it is still overflowing. Additionally, the heading "Mobile Phones" is not aligning to the right despite using the <float> property on it. Any assistance in resolving this problem would be greatly appreciated.

htmlcss

Answer №1

To ensure proper styling, it is important to assign a unique class for the h1 element instead of inheriting properties from sub2. Removing the height restriction on the div will allow the browser to adjust its size based on content. Utilize the title attribute instead of alt for functionality.

.sub2 {
  background-color: #FFFFBF;
  margin-top: 30px;
  width: 100%;
}
.sub3 {
  font: bold 100px american captain;
  text-decoration: underline;
  float: right;
}

.phone{
  width:47%;
  height:400px;
}
<div class="sub2">
  <h1 class="sub3"> Smartphones </h1>
  <img src="D:\ps\Notepad++\sub2.jpg" class="phone" title="Smartphones">
</div>

Answer №2

Here is an example of how to structure your code: Demo

In the provided code, the sub2 div has a fixed height. Consider using min-height instead.

.sub2 {
  background-color: #FFFFBF;
  margin-top: 30px;
  min-height: 410px;
  width: 100%;
}

.sub2 h1{
  font: bold 100px american captain;
  text-decoration: underline;     
  text-align: right; /*removed float and added text align */
}

.sub2 img {
  max-height: 410px;
  width: 100%;
}

p.sub2 {
  font: italic 25px american captain;
  margin-top: -300px;
  margin-left: 750;
}

In HTML:

<h1 class="sub2"> Smartphones </h1>

In this code snippet, there is only one h1 tag within sub2. You can target it with .sub2 h1 in your CSS instead of specifying the class again for h1 (like h1.sub2). For multiple h1 tags with different styles, use selectors like .sub2 h1.classname1, .sub2 h1.class name2...

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

Connect the CSS file in React index.html to the Flask backend

I am attempting to connect a CSS template that is serving static backend content through Flask with my React frontend. Here is the structure I am working with: client/ src/ components/ menu.jsx public/ ...

cssreactjsflask

What is the process of extracting attribute values from child elements in XPath for HTML documents?

Initially, I searched for all the necessary elements, but now I am encountering errors while trying to retrieve attribute values from the child elements - title, URL, and image. What could be the mistake in my approach? function getContent($value) { ...

phphtmlxpath

How to delete rows from a table in bootstrap with JavaScript

My goal is to create a table that allows users to delete specific rows using JavaScript and bootstrap. I attempted the standard method, but it doesn't seem to be working: <form action="scrivi.php" method="POST"> <t ...

javascriptphphtmlbootstrap-4

Customizing the input field to have a width of 100%

Could someone provide a solution, like a link or working example, for creating input fields with rounded corners that have a width of 100% and a customizable right border? Here is the current structure I am using: <span class="rounded left-corner" ...

htmlcssinputwidthrounding

Alignment problem

In my design, I have a toolbar with flex display and I am trying to center my span element within it. However, I seem to be missing something in the CSS. CSS .toolbar { position: absolute; top: 0; left: 0; right: 0; height: 60px; d ...

cssflexbox

Winning opportunities created by using credits in the slot machine

**Greetings, I have created a slot machine using JavaScript, but I am looking to enhance the player's chances based on their credits. Can anyone guide me on how to achieve this? Essentially, I want the player's odds to increase proportionally wit ...

javascripthtmlslot

When initially loaded, the Bootstrap Datepicker displays an inaccurate calendar

I implemented Bootstrap Datepicker to insert a date input field into my HTML document. Below is the code I used: HTML: <input type="text" name="manifest-date" class="calendar form-control" placeholder="M-d-yy" id="manifest-date" value="{{$currentDate} ...

javascripthtmltwitter-bootstrap

Bizarrely rapid transitions from standard to hovering appearance in CSS

After creating a custom styled button with a hover effect, I noticed an issue where if you happen to hover over a specific spot on the button, it quickly switches between its normal and hover states. https://i.sstatic.net/uPq1F.gif This is my code: but ...

htmlcss

Stop the background from scrolling and prevent auto-jumping to the top on mobile devices

When users click on the hamburger icon in the top right of our mobile site, I want the drop-down menu to appear and be scrollable without the background scrolling. I tried using JavaScript to set the body to fixed when the menu icon is clicked, but this ca ...

javascriptjqueryhtmlcss

Ensuring the clickable area of the button aligns perfectly with the button itself and adjusting the arrow position to be

Check out the sandbox here: https://codesandbox.io/s/vigilant-currying-h7c3r?file=/styles.css If you are looking for the classes .line and .arrow, they are what you need. When you create an event, notice how the arrows appear too low, with the clickable a ...

css

Assign the value of "td" to the variable "val"

I am trying to set the value of my td element from my JavaScript JSON, but for some reason it doesn't seem to be working when I inspect the element. The HTML is functioning fine, it's just the value that isn't updating. I've tried chang ...

javascriptphpjqueryhtmljson

Is it possible to use an Ajax callback function to add a select dropdown HTML to a table

I am currently in the process of using jQuery to append some HTML with the code provided below. My main objective is to select an option based on AJAX response data and create a select dropdown menu. However, the variable scope of sOut doesn't seem to ...

javascriptjqueryhtmlajax

Obtain the value of the background image's URL

Is there a way to extract the value of the background-image URL that is set directly in the element tag using inline styling? <a style="background-image: url(https:// ....)"></a> I attempted to retrieve this information using var url = $(thi ...

javascriptjqueryhtmlcssmongodb

SliderToggle and Div implementation in Internet Explorer (IE) using jQuery

I'm encountering an issue with jQuery's slideToggle function and a div specifically in IE. Here is the code snippet causing the problem: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.d ...

jquerycssinternet-explorer

The nodes on a 2-dimensional grid overlap each other when the browser window is resized

In my project, I have set up a grid with 24 rows and 64 columns, totaling to 24x64 nodes. However, I am facing an issue where the nodes overlap when I open the console window. I am looking for a solution to automatically resize all nodes based on changes ...

cssreactjs

Can you guide me on how to activate the pickadate.js calendar above the input field?

Encountering an issue with the Pickadate calendar. There seems to be a problem at the bottom of the page, please refer to the attachment for more details. My challenge is that I need to display the Pickadate calendar above the input field when the field is ...

csshtmlbootstrap-4pickadate

Web design featuring an aesthetic reminiscent of an open folder on an iPhone

I'm struggling a bit and could really use some assistance. I've been searching for a long time but can't seem to figure out how to create an iPhone folder-like design for the web. The design should have that "slide out" effect when you click ...

jqueryiphonecssstylesheet

Assigning a class to a header upon loading the page from various sections at random

After scrolling, I used JavaScript to add a class to <header>. Here is the code snippet: $(window).scroll(function(){ var top = $(window).scrollTop(); if(top>=1){ $("header").addClass('bg-header'); } else ...

javascriptjquerycss

Click on the entire table to be redirected to the specified link

Currently, I am facing an issue with styling my tables as links. I have 3 tables and I want each table to be a clickable link. However, after implementing the links, I am unable round the corners of the tables. I envision the final look to be similar to t ...

htmlcss

Ways to detect events even after the object has been swapped out in JavaScript

I am currently developing a JavaScript-based Scrabble game and encountering a puzzling issue. The problem arises when tiles are generated within a tile rack div using a specific function, and an event listener is set up to respond to clicks on the tile div ...

javascripthtmlcss