Div Won't Adjust to adjusting browser window

StackOverflow https://stackoverflow.com/questions/21965407

  •  15-10-2022
  •  | 
  •  

Question

I am very new to web design, so I might be completely over my head here.. but I can not seem to figure out how to work this. I have an image inside my first div, underneath this I want to have to more divs with the background colors in which I will add content. But for some reason my divs are not adjusting with the browser. Everytime I adjust the browser to be smaller, the divs backgrounds are separating and a white space is coming in between them.

Any help would be highly appreciated.. Also any critical feedback on my obvious coding skills, would be highly appreciated.

<!DOCTYPE html>
<html>
<head> <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="container">
<div class= "header">
<div class="large-logo-wrap">
<img src="Assets/Giadaslogoindexwhitebig.png" draggable="false"></img>
</div>
<div class="middle">
</div>
<div class="end">
</div>
</body>
</html>

CSS

body{
margin: 0px;
padding: 0px;
overflow: hidden;
}
.container{
width:100%;
margin: 0px;
padding: 0px;
}

.header{
width:100%;
height:768px;
background-image: url('Assets/header.jpg');
background-size: 100%;
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
}
.large-logo-wrap {
margin-left: auto;
margin-right: auto;
width: 100%;
height: 100%;
max-width: 700px;
}
.middle{
position: absolute;
top: 768px;
background-color: rgb(229,225,209);
width: 100%;
height:100%;
background-size: 100%;
overflow-y: auto;
 }
.end{
position: absolute;
top: 1500px;
background-color: rgb(29,25,29);
width: 100%;
height:768px;
background-size: 100%;
}

be nice. Cheers!

Was it helpful?

Solution

I suggest you take a closer look at the code and strip out as much as you can to see what is actually necessary to get where you are going. Here is a fiddle with some cleaned up code that does what I think you are going for. Hopefully it helps.

HTML

<header class="container global-header">
    <div class="inner-w">
        <div class="large-logo-wrap">
            <img src="http://placehold.it/400x300" />
        </div>
    </div>
</header>

<section class="container section01">
    <div class="inner-w">
        Middle - arbitrary set height - I suggest you let the content decide the height
    </div>
</section>

<section class="container section02">
    <div class="inner-w">
        Other section - arbitrary set height
    </div>
</section>

CSS

*, *:before, *:after { /* get your box model so that padding and margins go inside the box instead of outside, and add to the overall size of the box */
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
}

body {
    margin: 0;
}

.container { /* things the sections have in common */
    width: 100%;
    float: left;
}

.inner-w {
    max-width: 700px;
    margin-right: auto;
    margin-left: auto;
    padding: 1em;
    border: 1px solid rgba(0,0,0,.05); /* just so you can see */
    /* by using an inner div in your container... you allow yourself to maintain a background-color across the whole page if you wish. If you don't want that, then you just style the inner div for each section with the background color */
}

.global-header {
    background-color: lightblue;
    text-align: center; /* centers inline, and inline-block elements (logo) */
}

.large-logo-wrap {
    display: inline-block;
    max-width: 8em; /* set max image size */
}

.large-logo-wrap img { /* responsive image */
    display: block; 
    width: 100%; /* fits whatever you set the wrapper to */
    height: auto;
}

.section01 { /* arbitray section */
    background-color: rgb(229,225,209);
    color: rgb(0,0,0);
    min-height: 234px; /* if you absolutly must - choose a height... use min */
}

.section02 { /* arbitray section */
    background-color: rgb(29,25,29);
    color: rgb(229,225,209);
    min-height: 346px; /* if you absolutly must - choose a height... use min */
}

OTHER TIPS

Please change your css with this one:

body{
margin: 0px;
padding: 0px;
overflow: hidden;
}

.container{
width:100%;
margin: 0px;
padding: 0px;
}

.header{
width:100%;
height:768px;
background-image: url('Assets/header.jpg');
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
}

.large-logo-wrap {
margin-left: auto;
margin-right: auto;
max-width: 700px;
}

.middle{
margin-left: auto;
margin-right: auto;
max-width: 700px;
background-color: rgb(229,225,209);
 }

.end{
margin-left: auto;
margin-right: auto;
max-width: 700px;
background-color: rgb(29,25,29);
}

Some of your css styles were wrong, for example you used width and height with %100 which is wrong and effects on all of your css styles. Also, you used position:absolute for all of div which effects on div to be nonadjustable.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top