Jump to content

Moving DIV box when resize the browser window and resolutin.


LeonLatex

Recommended Posts

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 by LeonLatex
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.