How to make the page layout stay the same after minimized?


Tags: javascript,html,css

Problem :

How do I make my page layout stay the same and not become all clumped up when minimized?

this is how the page is supposed to normally look

but when minimized the page layout becomes

all squished out and the layout is messed up

. I was wondering how I could fix this? I'm still new to HTML and CSS so I was having trouble with figuring this out.

Sorry if the coding is a bit messed up this is my first time doing html and css! Appreciate all of the help I can get. I'm also doing this with google apps script.



Solution :

Something like this? https://jsfiddle.net/9nguoepu/7/ I just added some divs wrapping your labels and form inputs and a little css.

    <style type="text/css"> * {
    margin: 0
}
.container {
    margin-left: auto;
    margin-right: auto
}
.header {
    background-color: #8000FF;
    margin:auto;
    width: 50%;
    border:3px solid #41087B;
    padding: 10px;
}
.header img {
    float:left;
    padding: 5px;
}
.header h1 {
    color: white;
    line-height: 80px;
    text-align:center
}
.label {
   float: left;
    padding: 5px;
    color: red;
}
.label-container {
width: 50%;
    float:left;
}
.label p {
    padding: 2px
}
.inputBox {
    float:left;
}
.inputBox p {
    padding: 1px
}
.label2 {

    float:left;
    padding:5px;
    color: red
}
.label2 p {
    padding:2px
}
.inputBox2 {
    float:left;
}
.inputBox2 p {
    padding: 1px
}
.contentBackground {
    background-color:#D8D8D8;
    clear:left;
    width: 60%;
    margin: auto;
    height: 200px
         display: block;
}
.uploadFile p {
    text-align:center;
    padding: 20px;
    color:red
}
.content p {
    color:red;
    padding: 7px
}
.dropDown p {
    padding: 40px;
    margin-left: 8px;
    height:
}
.moreFiles {
    text-align:center
}
.textBox {
    text-align: center
}
.textBox p {
    text-align:center;
    padding: 5px
}
.button {
    text-align: center
}
</style>

    CSS Howto..

    How to change a vertical css menu to a horizontal one

    How can I create custom tooltips with css pseudoelements

    How does chrome extend the search window beyond the browser window

    How to move a table(or other content) next to vertical navigation bar

    How to disable google translator plug in and set margin-top: to 0px for body element?

    How to size a div box in CSS so text is centered regardless of length

    How to create opacity effect on webOS?

    how could I make a textarea dynamically resize with the chrome app window?

    How combine multiple media destinations (screen, print) with width restriction?

    How to add css to form elements if attribute class is already being used in Jquery

    How to style textbox using CSS in ASP.NET

    How do I evenly distribute a group of spans across a div?

    How to fill a transparent image with a progress bar ? #CSS #HTML #Jquery?

    How to draw rectangle on the website to highlight?

    How to make fadeIn() and hide() work only for tablet and desktop versions?

    How to remove margin on horizontal list line break?

    How to get the current browser resolution in css?

    How to make a DIV float on top of another DIV without pushing down the CSS Underneath

    How do I resize an element rotated in CSS to fit the new area in IE9?

    How to overlap two div with css

    CSS - How to set height of absolute div same with neighbor image?

    How can I get my coloured Bootstrap popover to render properly?

    How to add border to a container with transparent gaps in between

    How to have two background-images with CSS? [duplicate]

    How do I add a Css file to my Class library?

    Show/Hide & Change CSS functions are not working

    How to track element movement and trigger function at specific spot?

    Ruby on rails dropdown