CODEWITHSUNDEEP
cssscale
enKode
enKode

Reputation: 15

Div overlapping when Window size changes

Trying to get my divs to NOT move around when I change the size of my window.

Here's the CSS in question

#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);
}

Basically, I have three Divs inside my Main Div, that are overlapping when the screen size changes or resolution is smaller. I'm sure it's something stupid that I'm doing wrong, but here we are.

Upvotes: 0

Views: 1352

Answers (4)

user2218824
user2218824

Reputation:

If I understand you correctly what you want to have is 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 creates a two-column-layout with a navigation on the left and "Twitter" on the right. If you would like to have another column you would have to add it as a children to #main and change the width of the columns. (#nav, #twitter and your third)

If you want to change the size or the order for smaller screens you have to use media queries. What you could do is the following:

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

Another thing I see in your HTML is that you tried to use as an element. This would be a Custom HTML element which won't work in every browser, especially not in older ones (without a polyfill/library like Polymer). You can read more about Custom HTML elements in this article on html5rocks: Custom elements. To keep things simple you should stick to the available HTML5 elements.

Upvotes: 1

enKode
enKode

Reputation: 15

Here's the rest 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>";
?>

Messy, I know

Also, I had taken two of them out of Divs to see what would happen [edited CSS appropriately] - and this method had a better effect

Upvotes: 0

user2218824
user2218824

Reputation:

Could you show the HTML you are using? It might be that you are missing the meta viewport tag. Another solution might be to use pixel values instead of percent (as Juan Carlos suggested) if you don't want the width to change:

#Main {
    width: 800px;
}

As a side note I would recommend you to take a look at caniuse.com for prefixes. You don't need all of those prefixes for box-shadow and border-radius

Upvotes: 0

Juan Carlos
Juan Carlos

Reputation: 187

If I understand your problem correctly, then you don't want your divs to resize when you change your window screen. I suggest that you change your:
width: x%;
to:
width: xpx;
Or, if you want this solved AFTER the page is rendered then you might want to use the min-width attribute, that may be able to solve your problem.
min-width: xpx;
or
min-width: x%;

Upvotes: 0

Related Questions