Troubleshooting problems with CSS when adjusting window sizes

Hey there, I'm encountering a CSS issue where the div is not properly positioned when resizing the window. Here's what I have:

This is the CSS code for the div:

.similar_story_block_form {
    background-color: white;
    border: 1px solid #CCCCCC;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.8);
    font-size: 13px;
    left: 337px;
    position: absolute;
    top: 105px;
    width: 337px;
    z-index: 100;
}

Here's the HTML code:

<div id="search-box-form">
  <div style="display:block;" class="similar_story_block_form">
     <div class="head">
        <p>What interest you?</p>
        <a onclick="javascript:closeSearchBox(event);" id="close-element-form" href="#"></a></div>
<ul>
 <li>
   <a no-confirm="" class="pushstate">
    <div col-400="" class="fleft"><p>No such business</p></div></a></li>
    <div class="head"><p>Nothing is found from <span style="color:red;font-weight:italic;">"s"</span></p>
    </div>
</ul>
</div>
</div>

I'm using Chrome and still facing the same issue. Any ideas on what could be causing this problem? Thanks for your assistance.

Answer №1

To ensure that the ".similar_story_block_form" position is relative/absolute to the parent position, add either "position: relative;" or "position: absolute" to the "#search-box-form" element. This will prevent it from being positioned according to the global/body position.

Answer №2

To ensure proper alignment, the parent div containing the search-box-form element with class similar_story_block_form should have a position set to relative. Meanwhile, the search-box-form div itself should be positioned absolutely, requiring adjustments to its top and left values. Additionally, don't forget to include left:0; top:0; in the styling of the parent div housing the search-box-form.

Answer №3

It is recommended to assign values of left, top, width to your style in percentages instead of pixels.

When using pixels, the size and position will be fixed for a standard browser size but not when resized.

By using percentages, the element's width and position will adjust according to its parent element.

For instance,

 .similar_content_section{ width:50%; }

This code will set the "similar_content_section" to occupy 50% of its parent element's width. As a result, it will automatically adjust its width based on the browser window size if the parent element is the body.

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

Enhancing HTML Vue JS by Dynamically Adding Rows Based on Multiple Selections

<div id="addForm"> <div class="row"> <div class="col-md-4"> <div class="form-group label-floating"> <label class="control-label">Case Type</label> <select class="form-control" v-mo ...

Effective method for retrieving several items using AJAX in combination with PHP

I've been researching the possibility of returning multiple items through AJAX and PHP. From what I understand, it involves using echo in PHP and responseText in Javascript. Is it possible to return an array of items from PHP and convert them into Jav ...

What is the process for creating distinct templates for various devices such as mobile phones, desktops, and tablets using Angular?

I am working on an Angular 9 application. Currently, I have some mockups but the template appears differently on mobile compared to desktop. However, the data fetched from API calls is mostly similar for both platforms, with slight variations possible be ...

Breaking or wrapping lines in Visual Studio Code

While working in Visual Studio Code, I often encounter the issue of long lines extending beyond the screen edge instead of breaking and wrapping to the next line. This lack of text wrapping can be quite bothersome. I utilize a split-screen setup on my co ...

When an input is double-clicked, the message"[object object]" appears on the screen

Here is the structure of the template used for the directive. Our code fetches data from a service which contains all the details of a specific individual. We display only the first name, last name, and either designation or company affiliation from that d ...

CSS and jQuery UI URLs are not resolving properly in MVC framework after deployment

Basically, the issue is that the url for an image in jquery-ui.css file does not resolve once the site is deployed. The website is deployed under the default web site in IIS7, causing the browser console to look for the image in a different location than e ...

Creating a basic image carousel with JavaScript, CSS, and HTML

After running the code, I encountered an issue where the first image displays but then after one second, only a white blank screen appears with no further action. It seems like there may be an error in the JavaScript code. Below is the code that was attemp ...

I am curious if there is a method to vertically center text without being affected by the font-family or font-size

Searching for a font-independent method to center text within a div. My div has a button-style fixed height, and I need the text (one line only) to be centered vertically within it. The issue arises when changing the font-family, as some fonts do not ali ...

Tips for avoiding the display of the overall scrollbar while utilizing grid with an overflow:

In my react-redux application, I am utilizing the material ui Grid component for layout design. The structure of my code is as follows: <div> <Grid container direction="row" spacing={1}> <Grid item xs={3}> ...

The SVG animation is reversing and decreasing in size from the bottom

Feeling lost, I spent a day searching without success. I have a project in full Vuejs and I thought using Svg would be easy and fun, but I can't figure out why the image resizes when playing an animation. The bottom of the svg seems to resize and get ...

An easy way to ensure IE opens PDF links in an iframe in a new tab

I've encountered an issue while trying to display pdf files on an html page using an iframe. Here's my code snippet: <iframe src="testfile.pdf" width="100%" height="100%"></iframe> My problem is that the links within the pdf always ...

Verify the presence of a specific select option using text in jQuery version 1.7

Looking at the following snippet of HTML: <select id="sel"> <option value="0">Option1</option> <option value="1">Option2</option> <option value="2">Option3</option> <option value="3">Option4</option> & ...

Retrieve the window.selection() range of a content-editable paragraph, taking into consideration any spans within the paragraph's length

When I click on the plain paragraph text, everything seems to work fine. I can determine the start and end of the selected range without any issues. However, when there is a span element with some styling inside the paragraph text, the end of the range is ...

Obtain the beginning and ending positions of a substring within a larger string

As a beginner in the world of AngularJS and web development, I am faced with a challenge. I have a specific string that is currently selected on a tab, like so: var getSelectedText = function() { var text = ""; if (typeof window.getSelection !== "un ...

I'm having trouble loading static files even though I've double-checked all the settings and added the necessary "load static" in the templates. It seems like the static files

https://i.sstatic.net/FO7Uh.pngThe static files are failing to load completely. When inspected on the template network, it shows a 404 not found error. Despite everything in the settings and template appearing correct, the network does not pick up the corr ...

Adjusting the margin to center vertical content dynamically

I have encountered a perplexing situation with my layout. In the design below, you can see both double-lined and single-lined text. I have set a margin for the single-lined texts to align them properly. However, when it comes to double-lined text, I find m ...

What is the best way to eliminate the blue outline around an image map?

On the landing page, I have a static background image and I've set up a clickable area using an image map. The issue is that when users click on the area, a blue border appears (see image below). I've tried several methods to remove this border b ...

dynamic color-changing feature on the menu

I have a navigation bar on my website with a set of sub-menus that appear when hovered over. I want to make the navigation bar change color dynamically each time it is hovered over. Additionally, I would like to add a range of colors to choose from. For ...

dragging and dropping files for easy upload

Here is a challenge I am facing: I am looking for a solution that allows users to drag multiple images from their local file system onto the flash/flex/html5 app. The app should then extract the file name details and communicate with the server. Once t ...

Is there a fixed header table feature that comes built-in with HTML5?

Is there a native feature in HTML 5 for implementing a fixed header table with a scrollable tbody, while keeping the thead and tfoot fixed? ...