Overlapping of Divs occurs when the Window size is adjusted

Question

Overlapping of Divs occurs when the Window size is adjusted

Looking for a solution to keep my divs in place and prevent them from moving around when resizing the window.

Below is the CSS causing the issue:

#Main {
  font-family: Arial;
}

#Intro{
  width: 70%;
  height: 1000px;
  background: rgba(255, 250, 250, 0.5);
  border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  border: 0px solid #000000;
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  padding-top: 20px;
 position: relative;
}

nav {
  width: 15%
  position: fixed;
  float: left;
  background: rgba(255, 250, 250, 0.5);
  border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  border: 0px solid #000000;
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

twitter {
  width: 15%;
  float: right;
  background: rgba(255, 250, 250, 0.5);
  border-radius: 10px 10px 10px 10px;
 -moz-border-radius: 10px 10px 10px 10px;
 -webkit-border-radius: 10px 10px 10px 10px;
  border: 0px solid #000000;
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

I have three nested Divs within my Main Div that overlap when the screen size changes or resolution is smaller. I suspect it's a simple mistake on my end, but I'm stuck at this point.

css scale

Answer 1

Answer №1

If I'm understanding correctly, you're looking for a column layout?

<center>
  <div id="Main">
    <nav id="nav">Navigation goes here</nav>
    <div id="twitter">Twitter goes here</div>
  </div>
</center>

#main {
  width: 100%;
}

#nav,
#twitter {
  float: left;
  color: #fff;
}

#nav {
  width: 30%;
  background: blue;
}

#twitter {
  width: 70%;
  background: green;
}

This example sets up a two-column layout with navigation on the left and "Twitter" on the right. If you want to add another column, simply include it as a child of #main and adjust the column widths accordingly (#nav, #twitter, and your third column).

To customize the size or order for smaller screens, use media queries. Here's an example:

@media screen and (max-width: 600px) {
    #nav,
    #twitter {
        float: none;
        width: 100%;
    }
}

Additionally, I noticed you tried using as an element in your HTML. Custom HTML elements may not work in all browsers, especially older ones (unless using a polyfill/library like Polymer). Stick to standard HTML5 elements for better compatibility.

Answer 2

If I'm understanding correctly, you're looking for a column layout?

<center>
  <div id="Main">
    <nav id="nav">Navigation goes here</nav>
    <div id="twitter">Twitter goes here</div>
  </div>
</center>

#main {
  width: 100%;
}

#nav,
#twitter {
  float: left;
  color: #fff;
}

#nav {
  width: 30%;
  background: blue;
}

#twitter {
  width: 70%;
  background: green;
}

This example sets up a two-column layout with navigation on the left and "Twitter" on the right. If you want to add another column, simply include it as a child of #main and adjust the column widths accordingly (#nav, #twitter, and your third column).

To customize the size or order for smaller screens, use media queries. Here's an example:

@media screen and (max-width: 600px) {
    #nav,
    #twitter {
        float: none;
        width: 100%;
    }
}

Additionally, I noticed you tried using as an element in your HTML. Custom HTML elements may not work in all browsers, especially older ones (unless using a polyfill/library like Polymer). Stick to standard HTML5 elements for better compatibility.

Answer 3

Answer №2

If your concern is about preventing divs from resizing when the window screen changes, one possible solution is adjusting the CSS code from:
width: x%;
to:
width: xpx;
Alternatively, you can address this issue post-page rendering by using the min-width attribute. This could potentially resolve the problem.
min-width: xpx;
or
min-width: x%;

Answer 4

If your concern is about preventing divs from resizing when the window screen changes, one possible solution is adjusting the CSS code from:
width: x%;
to:
width: xpx;
Alternatively, you can address this issue post-page rendering by using the min-width attribute. This could potentially resolve the problem.
min-width: xpx;
or
min-width: x%;

Answer 5

Answer №3

Can you please provide the HTML code you are currently using? It's possible that you may have forgotten to include the meta viewport tag. Alternatively, switching to pixel values instead of percentages (as suggested by Juan Carlos) can prevent the width from changing:

#Main {
    width: 800px;
}

On a side note, I recommend checking caniuse.com for browser prefixes. You might not need all those prefixes for box-shadow and border-radius

Answer 6

Can you please provide the HTML code you are currently using? It's possible that you may have forgotten to include the meta viewport tag. Alternatively, switching to pixel values instead of percentages (as suggested by Juan Carlos) can prevent the width from changing:

#Main {
    width: 800px;
}

On a side note, I recommend checking caniuse.com for browser prefixes. You might not need all those prefixes for box-shadow and border-radius

Answer 7

Answer №4

Here is the continuation of the code:

Index:

<?php
echo "<center>";
echo "<div id='Main'>";
            include("banner.php");
    include("navbar.php");
    include("twitter.php");
    include("intro.php");
    include("footer.php");
echo "</div>";
echo"</center>";

?>

Navbar

<?php
echo "<nav>
<table>
<tr>
<td>
        <ul>     
            <li><a href= 'index.php' class='LinkHome'/></a></li>       
            <li><a href= 'products.php' class='LinkProduct'/></a></li>
            <li><a href= 'fitch.php' class='LinkFitch'/></a></li>
            <li><a href= 'argodealers.php' class='LinkArgo'/></a></li>
            <li><a href= 'about.php' class='LinkAbout'/></a></li>
            <li><a href= 'contact.php' class='LinkContact'/></a></li>
        </ul>
</td>
</tr>


</table>

</nav>";
?>

Twitter

<?php
echo "
  <twitter>             
    Twitter Stuff would go here
  </twitter>";
?>

I realize it may look disorganized.

At one point, I removed two of them from Divs to experiment [adjusted CSS accordingly] - and this approach yielded better results

Answer 8

Here is the continuation of the code:

Index:

<?php
echo "<center>";
echo "<div id='Main'>";
            include("banner.php");
    include("navbar.php");
    include("twitter.php");
    include("intro.php");
    include("footer.php");
echo "</div>";
echo"</center>";

?>

Navbar

<?php
echo "<nav>
<table>
<tr>
<td>
        <ul>     
            <li><a href= 'index.php' class='LinkHome'/></a></li>       
            <li><a href= 'products.php' class='LinkProduct'/></a></li>
            <li><a href= 'fitch.php' class='LinkFitch'/></a></li>
            <li><a href= 'argodealers.php' class='LinkArgo'/></a></li>
            <li><a href= 'about.php' class='LinkAbout'/></a></li>
            <li><a href= 'contact.php' class='LinkContact'/></a></li>
        </ul>
</td>
</tr>


</table>

</nav>";
?>

Twitter

<?php
echo "
  <twitter>             
    Twitter Stuff would go here
  </twitter>";
?>

I realize it may look disorganized.

At one point, I removed two of them from Divs to experiment [adjusted CSS accordingly] - and this approach yielded better results

Overlapping of Divs occurs when the Window size is adjusted

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Reposition div when clicked

continuously repeating css text animation

navigating through a specific section of a data chart

Ways to make certain HTML elements stay fixed on a webpage while allowing others to be scrollable

Inline CSS not appearing correctly upon initial page load

In Laravel Blade, the modal content is obstructed by the Modal Backdrop on portrait screen orientation

Tips for disabling scrolling on a <div> using another <div> as a lock

Is it possible to use negative values in css?

Can you modify a specific column in a table using mat-table in Angular material?

Is it possible to create an input field exclusively for tags using only CSS?

Positioning of buttons within a div

After several interactions, the CSS files fail to load

What is the reason for nesting divs within each other?

What steps should I take to customize the design of my Stripe subscription payment page?

ReactJS Feature: Split Screen that Can Be Moved

Strategies for creating a fade-in/fade-out effect that occurs only once

Creating DIV's with Equal Heights Using AngularJS ng-repeat

Learn the process of covering the entire screen with a video

"Utilizing a custom CSS style for a half heart rating system

What could be the reason that the Mui button styles are not being applied even after setting it to 'contained'?