Expand your view to avoid overflow

Question

Expand your view to avoid overflow

Take a look at this image

When viewing with standard resolution (1386 x 788), everything looks fine. However, when attempting to zoom out in Internet Explorer, things get messy:

Why does this happen and how can it be fixed? Here's the code causing the issue:

#pages{
    width: 190px;
    height: 100px;
    border: 1px solid black;
}

.p {
    float:left;
    width: 100px;
    height: 100px;
}

.i {
    float: right;
    width: 80px;
    border: 1px solid black;
}

<div id="pages">
    <img class="p" src="a.jpg"/>
    <div class="i"> Lorem... </div>
</div>

html css

Answer 1

Answer №1

Check out this CSS snippet:

#container{
width: 200px;
height: 150px;
border: 2px solid black;
position:relative;
}

.item{
width: 100px;
border: 1px solid black;
position:absolute;
right:0;
}

Apply the position attribute to #container and use absolute positioning for the class .item. Make sure to remove the float:right property from the .item class before testing it out.

Answer 2

Check out this CSS snippet:

#container{
width: 200px;
height: 150px;
border: 2px solid black;
position:relative;
}

.item{
width: 100px;
border: 1px solid black;
position:absolute;
right:0;
}

Apply the position attribute to #container and use absolute positioning for the class .item. Make sure to remove the float:right property from the .item class before testing it out.

Expand your view to avoid overflow

Answer №1

Similar questions

The issue of the highlighted row not disappearing persists even after clicking on the adjacent table row

Create an HTML document with a bottom section that shows up on every page when printed

Is the table scrollable within the tbody tag?

Update the font style of the navigation bar

Having an issue with Local Storage returning undefined

What steps can be taken to prevent a wrapper's CSS from affecting its enclosed elements?

Which one has better performance: class or CssClass?

Steps to dynamically update a button's href based on the active status of a class

Calculation operations nested within each other

When using JSON.Stringify in a React App, it only displays the first item and the length of the object instead of all the other items

I'm still unclear on the necessity of using clear:both

Images Centerfold Team

Steps for creating a border around a container Div:1. Set the width and

Using an HTML and PHP form to store data in the database, it currently defaults to entering "0000-00-00" for the date instead of the date chosen

Despite applying a CSS reset in the modal, the margin-bottom property is still being recognized in Chrome but not in Firefox

Add some flair to your list by animating the text within it

Adding a logo to a website that utilizes CSS, HTML, JS, and Bootstrap

Synchronize scrolling between two elements to create a dynamic user experience

Looking to modify the contents of a shopping cart by utilizing javascript/jQuery to add or remove items?

How can you execute PHP code within another PHP script without triggering a redirect?