Prevent div from moving while resizing the page
1 - remove the margin from your BODY CSS.
2 - wrap all of your html in a wrapper <div id="wrapper"> ... all your body content </div>
3 - Define the CSS for the wrapper:
This will hold everything together, centered on the page.
#wrapper {
margin-left:auto;
margin-right:auto;
width:960px;
}
Elements moving around when a window is resized?
Try it like this:
HTML:
<body>
<div class="yourContainer">
<a href="#" class="floatLeft">
<img width="300" height="150" src="CSGO%20Clash.png" alt="CSGO Clash" >
</a>
<a href= "#" class="floatRight" >
<img width="256" height="112" align="right" alt="Steam LogIn" src="SteamSignIn.png">
</a>
<div class="tablediv">
<table class="table">
<TD width=302.5px id="space">Current Pot</TD>
<TD width=302.5px id="space">Participants</TD>
<TD width=302.5px id="space">Items</TD>
<TD width=302.5px id="space">Chat</TD>
</table>
</div>
</div>
</body>
some additional CSS:
.yourContainer
{
min-width: 600px;
}
.floatLeft
{
float: left;
}
.floatRight
{
float: right;
}
.clear
{
clear: both;
float: none;
}
As you can see, the "yourContainer"-class defines a min-width, which should meet your requirements.
Maybe you also want to take a look at bootstrap, which includes a quite comfortable grid system.
How to make elements stop from moving when resizing the window after using percentage
I'm not sure about your question because you didn't post any code but i think that your solution can be using css style:
max-width:50%;
min-width:800px;
max-height:500px;
min-height:21%;
properties in pecentage or pixel as you prefer, so you can tell divs how much expand and how much get smaller.
Hope it helps, if you post your code maybe i can be more useful.
Regards
EDIT 1:
This should resolve your problem:
*{
margin: 0;
padding: 0;
text-decoration: none;
color: inherit;
}
.header{
position:relative;
float:left;
top:0px;
width:100%;
height:100px;
left:0;
background:#EB6A4A;
}
.slogan{
position:relative;
float:left;
top:60%;
left:40.5%;
}
.login{
position:relative;
float:left;
top:15%;
left:90%;
}
.whitebackground{
background:#FFFFFF;
}
Just do the same with the class you didn't poste in css. The idea is having all items with position relative and floated on the left so they don't move. Should work!
Content Moves when resizing
If you want the image and headerText stay side by side, you must give them enough room to do so. Add an appropriate width to the #wrapper
#wrapper {
margin-left: auto;
margin-right: auto;
width:960px;
}
JSFiddle (wrapper/width)
If you always want to occupy the whole width, use min-width instead
#wrapper {
margin-left: auto;
margin-right: auto;
min-width:960px;
}
JSFiddle (wrapper/min-width)
How to stop Div from moving when resizing browser window
Because your sidebar is position: fixed it is taken out of the regular flow of the layout, and float will not work the way you're expecting it to.
Try setting a left margin of 400px on your #pageContent div instead.
See below.
/* Main CSS */html, body { padding: 0; margin: 0; font-family: "Futura PT", sans-serif;}
/* Sidebar */#sidebar { background-color: #FFFFFF; width: 400px; height: 100%; padding: 10px; position: fixed;}
/* Page Content */#pageContentContainer { display: block; width: 100%; text-align: center; margin: 0 auto;}
#pageContent { margin-left: 400px; width: 78%; background-color: #212121;}<body> <div id="sidebar"> <a href="index.html"><img src="images/logo/mdLogo.png"></a> <nav> <ul> <li><a href="index.html">HOME</a></li> <li><a href="#">PHOTOGRAPHY</a></li> <li><a href="#">GRAPHIC DESIGN</a></li> <li><a href="#">3D MODELLING</a></li> </ul> </nav> <div id="socialLinks"> <a href="#/" class="fa fa-linkedin fa-3x"></a> <a href="#/" class="fa fa-facebook fa-3x"></a> <a href="#/" class="fa fa-youtube-play fa-3x"></a> </div> <p>© Macast Designs 2017</p> </div> <div id="pageContentContainer"> <div id="pageContent"> <!-- Parallax --> <div class="parallaxImage1"></div>
<div class="parallaxContent"> <h1>A little about me...</h1> <p>Information goes here.</p> </div>
<div class="parallaxContent"> <h1>A little about me...</h1> <p>Information goes here.</p> </div>
<div class="parallaxContent"> <h1>A little about me...</h1> <p>Information goes here.</p> </div>
<div class="parallaxContent"> <h1>A little about me...</h1> <p>Information goes here.</p> </div> </div> </div></body>Related Topics
Select Option Padding Not Working in Chrome
How to Reuse a Navigation Bar on Multiple Pages
How to Prevent VS Code from Breaking Up Long HTML Lines into Multiple Lines
Multiple Select Dropdown Not Working With Ng-Option
How to Automatically Set Text Box to Uppercase
How to Horizontally Center an Element
Flexbox Code Working on All Browsers Except Safari. Why
How to Keep Two Side-By-Side Div Elements the Same Height
What's the Difference Between an Id and a Class
How to Select the Last Element With a Specific Class, Not Last Child Inside of Parent
Simple Way to Display Data in a .Txt File on a Webpage
Angular Material Table - Apply Dynamically Background Color to a Row (Angular 2+)
Angular 5, Html, Boolean on Checkbox Is Checked
Rendering HTML Content With @Html.Raw in Razor Mail Template
Wrapping Text Inside Input Type="Text" Element Html/Css
Why Don't Flex Items Shrink Past Content Size