Moving DIV box when resize the browser window and resolutin.

[LeonLatex]

It is a website with two DIV boxes. The one on the left / margin is a menu div box and the one to the right of it centered is the content. The menu box is locked with position: fixed; so that the menu does not follow scrolling. I have tried to lock the content box the same way, but it didn't help. works perfectly without any problems until I start resizs on window or screen resolution. Then the content DIV ends up under menu DIV regardless of whether I resize from the right corner to the left or the left corner to the right. The position in relation to the right margin is the same regardless of this. I atached the two css blocks and html for the DIV boxes.

Hope someone sees what is wrong and can help me. Put me a little blind to a problem again.

 

(this is from head)
	<link rel='stylesheet' href='https://www.w3schools.com/w3css/4/w3.css'>
	<link href="css/nav.css" rel="stylesheet" type="text/css">
	<link href="css/contact.css" rel="stylesheet" type="text/css">

nav.css

div.menu_box {
	position: fixed;
  	top: 156px;
  	left: 10px;
  	width: 165px;
	height: 300px;
	border: solid 1px;
	border-color: #ffcc99;
	border-radius: 7px;
}

div.content_box { 
	position: fixed;
	margin-top: 5px;
	width: 950px;
	height: 87vh;
	margin: auto;
	border: solid 1px;
	border-color: #ffcc99;
	border-radius: 7px;
}

mnu.php

	<div class="menu_box w3-content w3-card-4 w3-padding w3-light-gray w3-left" style="line-height: 6px">
		<!--<h4 class="headline_bold">Naviger</h4>--><br>
		<p><a class="link.php" href="index.php" title="Tilbake til Start">Hjem</a></p>
		<p><a href="link.php" title="Hva kan vi tilby">Hva tilbys</a></p>
		<p><a href="link.php" title="Opplysning">Opplysning</a></p>
		<p><a href="link.php" title="Poteter">Poteter</a></p>
		<p><a href="link.php" title="Historie">Historie</a></p>
		<p><a href="link.php" title="Kontakt">Kontakt</a></p>
	</div>

(paste into) index.php

<?php require_once("header.php") ?>
	<?php require_once("mnu.php") ?>
	<!--Conten Boxt Start-->
	<div class="w3-content w3-card-4 w3-padding w3-light-gray">
	<!-- Content Start -->
  	<h4 class="headline_bold">Test text goes here.</h4>
	<h3 class="content">Test text goes here.</a>.</h3>
	<h4 class="headline_bold">Test text goes here.</h4>
	<h3 class="content">Test text goes here.</h3>
	<h4 class="headline_bold">Test text goes here.</h4>
	<h3 class="content">Test text goes here.</h3>
	<h3 class="content">
    </h4>		<h3 class="contact_link" style="font-size: 13px">Leon</h3></a>
	<!-- Content slutt -->
	<!-- content box slutt -->
	</div>
	<!-- Footer Start -->
	<?php require_once("footer.php") ?>

 

Edited February 11, 2022 by LeonLatex

[requinix]

If you pull all the content out of the normal flow then there won't be any normal flow anymore.

You don't have to make the content_box fixed. All you have to do is constrain the height so it never goes beyond the bottom of the viewport. Then there won't be anything to scroll.

[LeonLatex]

reqinix: I dont follow you now.  Its nothing wrong with the scrolling. It's when I resize the browser window.

[LeonLatex]

2 hours ago, requinix said:

If you pull all the content out of the normal flow then there won't be any normal flow anymore.

You don't have to make the content_box fixed. All you have to do is constrain the height so it never goes beyond the bottom of the viewport. Then there won't be anything to scroll.

What is a bit of my point is the following. Regardless of unit and resolution, the DIV content box should stay in place right / left position, but extend so that the content text becomes readable by the DIV content box sliding under the DIV menu box. I know that this could be solved by the DIV menu box disappearing at and below a certain screen resolution and that the menu then becomes a drop-down menu, a kind of popup, but it is something I have no idea about. So I have to read up on that a bit. I have ordered 3 new books about HTML5 and CSS3. I know there is a chapter about this there, but the postal service especially in from england and usa as well as asia and australia is going sooooo slow now in these corona times.

I found a exampel showing what i mean, and works excacly how i like it to work. Except the dropdown menu.
https://www.toptal.com/responsive-web/introduction-to-responsive-web-design-pseudo-elements-media-queries

But this one is not mine so i can't use it for my purpose. That is: Use it in a commercially system Thats why i want and have to develop my own.

[requinix]

It's possible you're running into some sort of browser bug. Maybe that some positioning is reliant on such tiny fractional numbers that a tiny difference after the recalculation caused by resizing matters.

My solution would be the same as most other CSS solutions: find a way to do what you want with fewer attributes. Such as by not having both boxes fixed.