Ensuring that my divs remain stationary despite changes in the size of the browser window

Hey there! I'm new to web design/development and I've been working on a simple website to get the hang of things. I managed to make my webpage look good at full screen, but as soon as I resize the window, everything starts shifting around and it turns into a big mess. How can I prevent this from happening?

Just in case, here's the code I have so far. It might not be pretty for the pros out there, but here it is:

THE STYLE.CSS FILE

   body{
    background-image: url(Images/background.gif);
    background-repeat: repeat-x;
    background-size: cover;
    }
    .topBar{
    width: 100%;
    top: 0;
    height: 50px;
    position: fixed;
    right: 0;
    -webkit-box-shadow: 0px 0px 8px 0px #000;
    background-image: url(Images/topBar2.gif);
    }

    #logoImage{
    float: left;
    width: 180px;
    height: 50px;
    top: 0;
    margin-left: 380px;
    background-image: url(Images/images/topBar_02.gif);
    }

    .topBar h1{
    float: left;
    margin-left: 400px;
    color: white;
    top: 0;
    font-family: Tahoma, Geneva, sans-serif;
    text-align: justify;
    text-shadow: -1px -1px 1px #000;
    }

    .logoImage {
    top: 0;
    float: left;
    margin-left: 100px;
    }

    #btn{
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid #039;
    font: 16px bold Tahoma, Geneva, sans-serif;
    color: white;
    background-color: #0499ff;
    padding: 4px;
    }

    .searchBox {
    float: right;
    margin-top: 7px;
    padding-right: 500px;
    }

    .searchBox input{
    border-radius: 5px;
    padding: 4px;
    color: #666;
    font: "Times New Roman", Times, serif;
    }

    .topBar img{
    width: 40px;
    height: 20px;
    margin: 20px;
    margin-left: 400px;
    }

    .mainLogin{
    border: 1px solid #999;
    border-radius: 6px;
    width: 300px;
    height: 100px;
    margin-top: 300px;
    float: right;
    margin-right: 500px;
    position: fixed;
    background-image: url(Images/login_back2.gif);
    padding: 20px;
    }

    .mainLogin input{
    border-radius: 5px;
    padding: 4px;
    }

    .username{
    width: 300px;
    }

    #rmbrme{
    float: right;
    color: #999;
    text-shadow: -.3px -.3px .3px #000;
    margin-right: 110px;
    margin-top: 3px;
    font: 10px Georgia, "Times New Roman", Times, serif;
    }

    #rmbrme a{
    text-decoration: none;
    color: #999;
    text-shadow: -.3px -.3px .3px #000;
    }
htmlcss

Answer №2

One solution could be to set the position attribute of your outermost div to relative.

style="position:relative"

After that, you can position the inner elements accordingly, which should hopefully solve your problem.

Answer №3

Hey there, I'm also fairly new to web development! One way to ensure that your divs remain fixed on browser resize is by using an outer container to set the size of your view window.

Here's an example of how you can achieve this:

<body>
     <div class="outercontainer">
           <div class="innercontainer">
            Place all your content here
           </div>
     </div>
</body>

In your CSS file, you can define the height and width for the outer and inner containers like so:

.outercontainer{
      height:100%;
      width:100%
}
.innercontainer{
      height:800px;
      width:1200px
}

You can adjust the dimensions as needed based on your design requirements. Hope this helps!

Answer №4

Instead of relying on float:left and float:right, there is a more effective approach. It seems that using both the position:fixed property and float property may be causing issues with your website.

You can consider using separate alignment classes such as:

.leftalign
 { 
   float:left;
   position:static;
 }

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

Mastering the art of utilizing icons in HTML/CSS within Bootstrap

We are in the process of creating a web application using Bootstrap Studio for the frontend. One issue we are facing is that when the window is resized, the icons start overlapping each other. Is there a way to make one icon go under the other? https://i. ...

htmlcsstwitter-bootstrapbootstrap-studio

Sending the value from a for loop through AJAX and populating it into a form field

Currently, I have implemented a piece of JavaScript code that captures user input, sends a request to an endpoint using AJAX, and appends a specific field from the returned results as an option within a datalist. This functionality is working perfectly fin ...

javascripthtmljsonajax

Is there a way to conceal the horizontal divider in the login form of the ionic HTML mobile user interface?

While designing this login form on the HTML ionic mobile UI, everything looks good except for one thing - I want to hide the horizontal line that appears between the "Forgot Password" label and the LOGIN button. Is there a way to do this? Login.html: < ...

androidhtmlangularionic-frameworkmobile

Trouble selecting options in hierarchical data

I've been attempting to run this sample code for selecting an option from a select element with hierarchical data, but it seems to be having some issues. $scope.options = [ { id: 1, info: { label: "Item 1" } }, { id: 2, info: { label: ...

javascripthtmlangularjs

Is it possible for JQuery to interact with an Access database for both reading and writing

Is it possible to utilize Jquery to establish a link with a Microsoft Access database? I have been exploring this possibility but haven't found any relevant information. This database won't be used for a production site, but rather for a small gr ...

jqueryhtmlms-access-2010

Having trouble with your website div not appearing correctly on Firefox?

I'm facing an issue with the display of a website (found here). The elements inside the div with the class name of .index_container are not appearing correctly in Firefox. Despite being present, they remain invisible. I've attempted to resolve th ...

htmlcssfirefoxsass

I am looking to adjust the height of my MUI Grid component

Recently exploring React, and I'm looking to set a height limit for MUI Grid. I've structured my project into 3 sections using MUI grid components. My goal is to restrict the page height in order to eliminate the browser scrollbar. If the conten ...

javascriptcssmaterial-uigrid

Achieving vertical alignment and stretching of subchild within a flexbox element

I am in the process of creating a mobile navigation menu using Flexbox. It will be a vertical menu that occupies 100% of the available height, with the navigation items evenly spaced and taking up the entire height. The structure I am using is ul>li> ...

htmlcssflexbox

Instructions on adding a class to every input element within a form using CakePHP

Is there a way to utilize the inputDefaults property in order to apply a consistent class across all input elements within my form? Additionally, could you provide a concise explanation of what exactly the inputDefaults entails? ...

phphtmlcsscakephp

Issue with background/hero video not adjusting its size

I've been experimenting with creating a page that features a video as the background, but no matter what I try, the video never seems to resize properly. The image below shows how it looks: image in question body { margin: 0; } .hero-se ...

htmlcss

Is there a way to create a duplicate form without any pre-filled text when clicking the "next" button using JavaScript?

This form contains the details that I would like to display on the page again when clicking the "Add Another Module" button. <div> <form class="in-line" id="module_info"></form> <div style="display: flex;"> < ...

javascripthtml

Hover effect malfunctioning on the website

I am in the process of building a website using WordPress with the 2017 theme. I recently added a link to my page by inserting the following HTML code: <a href="www." target="_blank"><span style="color: #0000ff;">text</span></a> A ...

htmlcsswordpress

Conceal two DIV elements if one of them is empty

My slideshow has thumbnails connected to each slide. There are 10 DIVs representing the slides like this... <div class="SSSlide clip_frame grpelem slide" id="u751"><!-- image --> <?php while ($row = mysql_fetch_array($query ...

javascriptphpjqueryhtml

Contemplating the Sequence of DOM Execution

In the world of html/javascript, the order of execution is typically serial, meaning that the browser reads the code line by line and interprets it accordingly. This is a common practice in most programming languages. Some javascript programmers prefer to ...

javascripthtmldom

What strategies can I use to divide lengthy words in my Django application?

My username on the site is causing overflow outside of the content box, as shown here I tried adding h1, h2, h3, h4, h5, h6 { color: #44444; overflow-wrap: break-word;}, but it didn't work. Here is the code for the profile page: All CSS styles for ...

htmlcssdjango

Hiding a button based on the visibility of another button in the user's viewport

Is there a way to dynamically hide button B when the user scrolls and button A becomes visible on the screen? Additionally, how can we show button B again once button A is no longer visible to the user? Both buttons should never be visible simultaneously. ...

javascripthtmljquerycss

When accessing the innerHTML and outerHTML properties on an HTMLElement, they may return undefined without triggering

Task: My goal is to take an HTML string, make changes to certain attributes of image tags within it, and then return the modified HTML string. The function I have developed follows these steps: private resolveImagesInHTML (body: string): string { le ...

javascripthtmltypescriptreact-nativehtml-parsing

Maintain the layout of HTML page while reducing the window size

My webpage is experiencing an issue. When I resize the window, the placement of all elements becomes misaligned and the layout gets distorted. ...

htmlcsswindowpositionminimized

The novice image slideshow script in JavaScript is causing all images to disappear and generating errors

Trying to create a simple image slider that pulls information from various sources. CSS and HTML are set up properly, but adding the JavaScript logic causes all images to disappear. The console displays an error saying "Uncaught TypeError: Cannot read prop ...

javascripthtmlcssslideshowweb-maker

JavaScript strangeness

I am currently working on a dynamic page loaded with ajax. Here is the code that the ' $.get' jQuery function calls (located in an external HTML page): <script type="text/javascript"> $(function() { $('button').sb_animateBut ...

javascriptjqueryhtmlajax