Instead of shifting the floated div, opt to have the window cut off instead

Currently, I am facing an issue with a section on my website that has absolute text overlaying an image. While it looks good on larger screens, I want to implement a media query to adjust it at a specific window size.

Here is what's currently happening: http://gyazo.com/ae86c3b3ab4028f32ad6ad6c846fb151

The floated right image is shifting as the window size decreases. I would like it to remain fixed in place and have the excess cut off by the window without generating a horizontal scrollbar.

HTML

<div class="sectionone">
        <div class="headingwrap">
            <h2>Heading Text</h2>
            <h3>Subheading Text</h3>
            <a href="">Free Demo</a>
        </div>
        <div class="imgwrap">
            <img src="resources/chloestore.png">
        </div>
    </div>

CSS

.imgwrap {
    width:70%;
    min-width:700px;
    overflow: hidden;
    float: right;
    margin-top:74px;
    margin-bottom:1000px;
}

img {
    width: 100%;

}
.headingwrap {
    margin-top:200px;
    margin-left:50px;
    float:left;
    color: #464646;
    letter-spacing: 1.5px;
    position:absolute;
}
jqueryhtmlcssresponsive-designposition

Answer №1

For the image to remain in place when the window is resized, apply position:fixed; right:0; to it.

<div class="sectionone">
        <div class="headingwrap">
            <h2>Heading Text</h2>
            <h3>Subheading Text</h3>
            <a href="">Free Demo</a>
        </div>
        <div class="imgwrap">
            <img src="resources/chloestore.png">
        </div>
    </div>

.imgwrap {
    width:70%;
    min-width:700px;
    overflow: hidden;
    float: right;
    margin-top:74px;
    margin-bottom:1000px;
    position:fixed; /* This is the key */
    right:0px; /* Optional */
}

img {
    width: 100%;

}
.headingwrap {
    margin-top:200px;
    margin-left:50px;
    float:left;
    color: #464646;
    letter-spacing: 1.5px;
    position:absolute;
}

Answer №2

It seems like you may want to consider using position instead of float for your layout. Here is an example:

To better understand, check out the live demo on jsFiddle and try resizing the result frame.

body{
    position:relative;
    width:100%;
    min-width:600px;
    overflow-x: hidden;
    margin:0;
}
img{
    position:absolute;
    right:0;
}
<img src="https://www.gravatar.com/avatar/8a6c643609e2ddf36223bdf5d61f0866?s=48&d=identicon&r=PG&f=1"/>

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

extra header in table

Hey guys, I'm not really into design and I could use some help. My CSS seems to be creating an extra head on my <tr> element. I used a CSS table generator to create the CSS code and employed a PHP HTML to build my table. <html> <title& ...

htmlcss

Tips for overlaying text on top of two images positioned side by side

I'm attempting to overlay text on two images placed side by side to fill the entire page. Here is the code: HTML: <div class="main"> <img src="city.jpg" class="city" alt="city"> ...

htmlcssimagetext

Utilizing PHP and JavaScript to showcase images within a div element

Disclaimer: This message pertains to an academic task. I am seeking clarification on the required steps for completion, rather than direct code solutions. My aim is to enhance my understanding of the fundamental components involved. Currently, I am engage ...

phpjavascriptjqueryhtmlmysql

What could be causing the javascript slidetoggle function to keep closing?

I have a link on a page that toggles the search form on and off. Let's say you search for Spring term classes, then you want to search for a new term and click "Start a new Search." The link works great and toggles just fine...BUT the toggle automatic ...

javascriptphpjquerytoggle

Utilizing a Text Box, HTML, and Javascript to Showcase a PDF within an iFrame

Is there a way to add a form on a Sharepoint page that prompts users to input the URL of a PDF document, which will then be displayed in an iFrame on the same page? I've come across some code that achieves this with an image, but I'm struggling ...

javascripthtmlpdfiframeform-fields

Steps for refreshing the content within a div without having to reload the entire page following an ajax request

I am trying to achieve the task of reloading the content of a specific div on a webpage without refreshing the entire page. My goal is to reload the div after uploading a photo so that the newly uploaded photo can be displayed from the database. However, t ...

javascriptjqueryajax

Guide on showcasing various PHP tables based on the selection from a PHP combobox

I am facing a challenge where I need to retrieve multiple queries and display each query in a PHP table when a specific item is selected from a combobox. For instance, upon clicking on the first item listed below, the corresponding table with its respect ...

phpjquerymysqlajaxcombobox

What is the best method to extract individual data values from ul li tags using PHP?

As I navigate through a page filled with HTML codes, I stumble upon snippets like this: <ul class ='trainList'> <li> <div class="smallFont farelist no-discount "> <div class="train-no">ABC 701</div> ...

phphtmlxpathdomdocument

Tips on adjusting the SVG view box for optimal visibility in a web browser

Recently, I've encountered an issue with the following code snippet: d3.xml("https://crossorigin.me/https://svgshare.com/i/5w9.svg").mimeType("image/svg+xml").get(function(error, xml) { if (error) throw error; document.body.appendChild(xml.docume ...

csssvg

Determine the number of visible li elements using jQuery

Currently, I am utilizing a jQuery script to count the number of li elements in my HTML code. Here is an example of the setup: HTML: <ul class="relatedelements"> <li style="display:none;" class="1">anything</li> <li style="disp ...

jqueryhtmlcssjquery-selectorshtml-lists

What could be causing the malfunction of the .setAttribute() and .removeAttribute functions in my JavaScript program?

Below is a flashcard game I have developed: Once a user enters the correct answer in the text box, "Correct!" is expected to be displayed in bold green font. The CSS attributes are then supposed to be removed shortly after. Here is the HTML code for the i ...

javascripthtmlcss

Trigger a callback to refresh the file

I have successfully implemented a php and jQuery tool for uploading and cropping images. Everything is working well, but I am facing an issue with getting a preview of the cropped image. Currently, the preview shows the image before cropping, most likely d ...

phpjqueryimagecropimage-uploading

Is there a way to trigger the opening of a jQuery-UI-Selectmenu dropdown using the 'ENTER' key instead of the 'SPACE' key as indicated in the documentation?

I'm currently working on implementing jQuery-UI-Selectmenu to create a dropdown feature. As per the API documentation for select menu available at https://api.jqueryui.com/selectmenu/, it mentions that the 'SPACE' key can be utilized to ope ...

htmljquerydrop-down-menuaccessibilityjquery-ui-selectmenu

Modify class upon click event

I've been trying to solve this question with a few answers I found, but none of them seem to work with my script. My goal is to change the class of the .icon-menu element when it's clicked. What would be the best approach to achieve this? $(&ap ...

javascriptjquery

Skrollr triggers a fade-in effect once the user reaches a specific distance from the bottom of the

Using skrollr, I have a div positioned at the bottom of some content that I want to fade in once the screen reaches its level. I attempted various examples found on their cheat sheet but had no success. This div is situated above the footer (500px from t ...

javascriptjqueryhtmlcss

What is the reason for this basic JSON encoding not functioning properly?

I am facing an issue with a PHP page that is generating a JSON object. I have another page using the jQuery library and trying to access this object, but it's not working as expected. Instead of 'inside_ok', I see the message 'inside_nk ...

phpjqueryjson

Plugin for Jquery sliders with advanced support for multiple ranged handles

After extensive searching, I have yet to find a Jquery UI slider plugin that can support multiple ranges of handles. The current Jquery UI slider only allows for one set range of values. I am in need of a slider that can accommodate several ranges, such as ...

jqueryjquery-uislider

Including an image side by side with clickable text within a list

Check out my progress here: http://jsfiddle.net/dDK6z/ I've experimented with using display:inline(-block), as well as adjusting margins, padding, and more, but I can't seem to get the image to move down or the text to move up. Does anyone have ...

htmlcss

Tips for sending event and additional arguments to a click handler

Hi there, I recently created a canvas using easelJS. Within my canvas, I have points that have a click handler defined for them with this syntax: p.on("click", handleMouseClickEvent); However, I am facing an issue when trying to pass arguments to the han ...

javascriptjqueryangularjs

The ng-click event handler is not functioning

var myApp = angular.module('myApp', ['ngRoute']); myApp.config(function($routeProvider) { $routeProvider.when('/', { template: '', controller: 'DefaultController as dc' }).when('/rent& ...

javascriptjqueryangularjs