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

Quiz application utilizing MySQL and JSP technology

I've been developing a Web Application using JSP to host MCQ quizzes. The questions are stored in a MySql Database table called 'qna', with each question having 10 choices. My goal is to design the quiz so that each question appears on a new ...

htmlmysqljsp

Ensure that clicking on an element closes any currently visible elements before opening a new element

Take a look at my code snippet below. I am working on creating multiple clickable divs that reveal different content when clicked. However, the issue I am facing is that currently, both content blocks can be displayed simultaneously. My goal is to have onl ...

javascripthtmljquerycss

Integrating a fresh element into the carousel structure will automatically generate a new row within Angular

I'm currently working on an Angular4 application that features a carousel displaying products, their names, and prices. At the moment, there are 6 products organized into two rows of 3 each. The carousel includes buttons to navigate left or right to d ...

javascripthtmlcssangularbootstrap-4

Ways to ensure the image stays fixed even as the screen dimensions fluctuate. HTML/CSS

Struggling to create an HTML header with a title and image positioned on the right side, but facing issues with the image shifting over the title when screen size changes. How can I ensure the image stays in place? Have tried various solutions without succ ...

htmlcssimageposition

Substitute the images with links provided in an external text file

I have a function that I use to replace avatars of players with custom images. Currently, I have three replacement links hardcoded into a Chrome extension. However, I want the function to read an external txt file to dynamically build an array so that I ca ...

jqueryhtmljson

Is there a way to determine if a table cell contains overflowing text compared to another cell?

Is there a way to detect if the content of the fourth td overflows from the second td? I am looking for a method to determine which td has overflowed text and identify which td's text is overflowing. What approach can be used to determine which td i ...

javascriptjqueryhtmlcss

Tips for dynamically updating the id value while iterating through a class

Here's the HTML snippet I am working with: <div class="info"> <div class="form-group"> <label class="control-label col-sm-2">Title</label> <div class="col-xs-10 col-sm-8"> <inpu ...

javascriptjqueryhtmlcss

What is the best way to stop Quasar dropdown list from moving along with the page scroll?

I am facing an issue with my code while using Quasar (Vue 3.0). The code snippet in question is: <q-select filled v-model="model" :options="options" label="Filled" /> When the drop-down menu is open and I scroll the pag ...

javascriptcssvue.jsquasar-framework

How to Use CSS to Align an Image in a Header

I'm struggling to position an image on the top right corner of my page, specifically in the header. Despite searching for help on Stack Overflow and other online resources, I can't seem to figure it out. Currently, here is what I have: The seco ...

htmlcss

Issues with Videojs Responsive Lightbox Functionality

I am looking for a solution to display VideoJS in a lightbox while keeping it responsive. I came across this helpful code snippet: https://github.com/rudkovskyi/videojs_popup. It seemed perfect until I tried using it with the latest version of Videojs and ...

javascriptcsshtmllightboxvideo.js

What's causing ng-show to malfunction in IE11 on AngularJS?

I am experiencing a strange issue with my code - ng-show works perfectly fine on Firefox, but not on IE 11. <div ng-show="isExist" class="panel panel-default"> Here is the relevant code snippet from the controller: $scope.isExist = false; if(user ...

javascriptangularjshtmlcssangularjs-directive

Is there a way to give a unique color to a single <a> element with a specific class, differentiating it from the

Apologies if my title is not precise enough. Describing this in just a few words for the title was a bit challenging. Context I am personalizing a template on wordpress.com. The website in question is: I have enclosed the DONATE menu item in a gold-col ...

htmlcss

The issue of the selection option not being cleared after being set to 0 persists in JavaScript

I am facing an issue where I need to reset the select option to `0` when another option is selected. I have tried the code below for this purpose. if (varALPO1MobNum == "0") { var selectElement = $(&apo ...

javascripthtml

What is the best way to manage classNames dynamically in React with Material-UI?

I am wondering how to dynamically add and remove classes from an img tag. My goal is to change the image automatically every 2 seconds, similar to Instagram's signup page. I am struggling to achieve this using the material-ui approach. Below is a snip ...

javascriptcssreactjsreact-hooksmaterial-ui

Keep moving the box back and forth by pressing the left and right buttons continuously

Looking to continuously move the .popup class left and right by clicking buttons for left and right movement. Here is the js fiddle link for reference. This is the HTML code structure: <button class="right">Right</button> <button class="l ...

javascriptjqueryhtmlcssjquery-animate

"Click to view the latest data visualization using the Chart.js

I am exploring ways to enhance the animations in Chart.js for a new web project. The content is organized in tabs, with the chart displayed on the third tab out of four. Currently, the chart animates upon loading. How can I make it so that when #chartTrig ...

javascriptjquerycsschartschart.js

Implementing a hamburger menu and social media sharing buttons on websites

Currently working on my personal website and delving into the world of Web Development, I have some inquiries for seasoned developers. My first query revolves around incorporating a hamburger menu onto my site for easy navigation to other pages. After att ...

javascripthtmlcsswebhamburger-menu

Organize every rectangle and text element in D3 into distinct groups

Currently, I am working on creating a bar graph using d3.js. The goal is to display text on top of each bar when the user hovers over it. To achieve this, the <text> and <rect> elements need to be grouped inside a <g> element. For Exampl ...

javascripthtmld3.js

"Enhance your web development skills by mastering jQuery alongside the

It's curious that jQuery doesn't support the use of the "+" sign. You can see how it functions with "1" and "3", but not with "2+". Just hover your mouse over each div to experience it. <div id="div-2+"></div> JSFiddle $('a. ...

javascriptjqueryhtmljquery-selectors

I need assistance with retrieving an image from a database using PHP

How can I display an image from the database on a new page using PHP? Whenever I click on the image, it always shows the same image on the new page. How can I make it so that the image displayed on the new page is the one I clicked on in the previous pag ...

phphtmlmysqlsql