Home/ Questions/Q 8369225
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T13:35:32+00:00

I’m trying to make it so when one div becomes smaller in height the

  • 0

I’m trying to make it so when one div becomes smaller in height the other moves up with it.

Here’s a fiddle.

So if I was to make #top (which has absolute positioning) have a height of 400px instead of 600px, how to I ensure the relatively-positioned div below it moves up to 420px from the top, from it’s original position of 620px?

Basically, it’s to respond to the browser. If the browser is made smaller, #top will scale, so the div below needs to move with it.

UPDATE

HTML:

<!DOCTYPE HTML>
<html lang="en-UK">
    <head>
        <link href="Stylesheet.css" rel ="stylesheet" type="text/css">


        <title>Hello World</title>
    </head>
    <body>
        <div id="top"></div>
        <div id ="logo"></div>
<div class="container">A wiki (i/ˈwɪkiː/ wik-ee) is a website which allows its users to add, modify, or delete its content via a web browser usually using a simplified markup language or a rich-text editor.[1][2][3] Wikis are powered by wiki software. Most are created collaboratively.
Wikis may serve many different purposes, such as knowledge management and notetaking. Wikis can be community websites and intranets, for example. Some permit control over different functions (levels of access). For example, editing rights may permit changing, adding or removing material. Others may permit access without enforcing access control. Other rules may also be imposed for organizing content.
Ward Cunningham, the developer of the first wiki software, WikiWikiWeb, originally described it as "the simplest online database that could possibly work."[4] "Wiki" (pronounced [ˈwiti] or [ˈviti]) is a Hawaiian word meaning "fast" or "quick".[5]A wiki (i/ˈwɪkiː/ wik-ee) is a website which allows its users to add, modify, or delete its content via a web browser usually using a simplified markup language or a rich-text editor.[1][2][3] Wikis are powered by wiki software. Most are created collaboratively.
Wikis may serve many different purposes, such as knowledge management and notetaking. Wikis can be community websites and intranets, for example. Some permit control over different functions (levels of access). For example, editing rights may permit changing, adding or removing material. Others may permit access without enforcing access control. Other rules may also be imposed for organizing content.
Ward Cunningham, the developer of the first wiki software, WikiWikiWeb, originally described it as "the simplest online database that could possibly work</div>
    </body>
</html>

CSS:

body{
    background-color: red;
    width: 100%;
}

div#top{
    position: relative;
    display: block;
    width:100%;
    height: 600px;
    top:0;
    left:0;
    background-color: black;
    border-bottom: 3px solid white;
    margin-bottom: 20px;

}


div#logo{
    position:absolute;
    color: green;
    left: 50%;
    margin-top: 20px;
    margin-bottom: 30px;
}


.container{
    position: relative;
    margin: 0 auto;
    margin-top: 20px;
    width: 920px;

    }​

Padding issue

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Assuming you need to keep #top as position: absolute, there is no CSS-only way of doing this. Since #top is absolute, it is no longer part of the document flow, and #container can no longer relate to it. You can either

    A. Use javascript to watch the window.resize event or whichever resizing event you’re referring to, then perform math to change the top property for #container

    or

    B. Change #top to position: relative and remove the top CSS property from #container

    or

    C. Use percentage-based values for #top‘s height and #container‘s top property.

    • 0