div scaling and positioning

[LeonLatex]

Do not quite know how to present it, but I have a div that I call menu. It is located on the left side of the page. Then I have a content div that is centered on the page. The problem is when the page is scaled. on fairly large screens then there is no problem. Then the website looks normal as I have set it up, but on smaller screens and when scaling, content div is placed under menu div. I have tried a bit with different css properties to lock them. but it seems like it does not work. I have also tried with position properties, but it seems impossible. Actually, they should stay calm and scale their size as the rest of the page scales. As usual, I have completely messed up again and can no longer see the forest for just trees.

I attach the two css blocks. Can you see what's wrong?

div.menu_box {
	color: #008833;
	position: fixed;
  	margin-top: 0px;
  	margin-left: 10px;
  	width: 165px;
	/*max-height; 100px;*/
	height: 300px;
	/*border: solid 1px;*/
	/*border-color: #ffcc99;*/
	/*border-radius: 5px;*/
}

div.content_box {
	display: block;
  	margin-left: auto;
  	margin-right: auto;
  	/*width: 50%;*/
	/*position: fixed;*/
    margin-top: 5px;
	width: 950px;
	max-height: 100%;
	margin: auto;
	border: solid 1px;
	border-color: #ffcc99;
	border-radius: 5px;

}

 

[gizmola]

This is the expected behavior. YOu have declared that the content_box has a width of 950px.  So at the point that it can not fit side by side with the menu_box div.  I'm not sure what you are going for, because the typical way to handle responsiveness down to mobile sizes is to use a media query and do something to hide the menu, perhaps with the display of a hamburger widget.  If you want to keep these divs side by side, then I would suggest you use flexbox instead. With Flexbox, you need a parent container for the columns you want to orientate.  

There are many layout options possible with flexbox, so I leave that to you, but you can see from this demo that this performs more inline with your expectations.  Rather than use a fixed width for your content div, I used 80%, but you can also see how flexbox handles expanding or shrinking.

Test Markup

<div class="content">
  <div class="menu_box">
    <ul>
      <li>Home</li>
      <li>Item1</li>
      <li>Item2</li>
    </ul>
  </div>
  <div class="content_box">
    <h1>Content Box</h1>
  </div>
</div>

CSS

div.content {
  display: flex;  
}

div.menu_box {
  color: #008833;
  margin-top: 0px;
  margin-left: 10px;
  width: 165px;
  /*max-height; 100px;*/
  height: 300px;
  /*border: solid 1px;*/
  /*border-color: #ffcc99;*/
  /*border-radius: 5px;*/
  background: gray;
}

div.content_box {
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  width: 80%;
  max-height: 100%;
  margin: auto;
  border: solid 1px;
  border-color: #ffcc99;
  border-radius: 5px;
  background: blue;
}

 

Codepen based on your original code, with some background colors to see something:  https://codepen.io/gizmola/pen/xxXMwLP

 

[Strider64]

If you also use grids along with Flexbox then designing a website becomes really easy to do. An example - https://codepen.io/Strider64/pen/gOGqrxo

[LeonLatex]

On 1/14/2022 at 10:01 PM, gizmola said:

This is the expected behavior. YOu have declared that the content_box has a width of 950px.  So at the point that it can not fit side by side with the menu_box div.  I'm not sure what you are going for, because the typical way to handle responsiveness down to mobile sizes is to use a media query and do something to hide the menu, perhaps with the display of a hamburger widget.  If you want to keep these divs side by side, then I would suggest you use flexbox instead. With Flexbox, you need a parent container for the columns you want to orientate.  

There are many layout options possible with flexbox, so I leave that to you, but you can see from this demo that this performs more inline with your expectations.  Rather than use a fixed width for your content div, I used 80%, but you can also see how flexbox handles expanding or shrinking.

Test Markup

<div class="content">
  <div class="menu_box">
    <ul>
      <li>Home</li>
      <li>Item1</li>
      <li>Item2</li>
    </ul>
  </div>
  <div class="content_box">
    <h1>Content Box</h1>
  </div>
</div>

CSS

div.content {
  display: flex;  
}

div.menu_box {
  color: #008833;
  margin-top: 0px;
  margin-left: 10px;
  width: 165px;
  /*max-height; 100px;*/
  height: 300px;
  /*border: solid 1px;*/
  /*border-color: #ffcc99;*/
  /*border-radius: 5px;*/
  background: gray;
}

div.content_box {
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  width: 80%;
  max-height: 100%;
  margin: auto;
  border: solid 1px;
  border-color: #ffcc99;
  border-radius: 5px;
  background: blue;
}

 

Codepen based on your original code, with some background colors to see something:  https://codepen.io/gizmola/pen/xxXMwLP

 

 

14 hours ago, Strider64 said:

If you also use grids along with Flexbox then designing a website becomes really easy to do. An example - https://codepen.io/Strider64/pen/gOGqrxo

 

Thanks to you both 😊👍👌

It did not work gizmola, but it put me on the right track, just as you mentioned when you said "leave it to you(me). Here is what solved the problem for me:

div.menu_box {
	color: #008833;
	position: fixed;
  	margin-top: 0px;
  	margin-left: 10px;
  	width: 165px;
	/*max-height; 100px;*/
	height: 300px;
	/*border: solid 1px;*/
	/*border-color: #ffcc99;*/
	/*border-radius: 5px;*/
}

div.content_box {
	display: block;
  	margin-left: auto;
  	margin-right: auto;
  	/*width: 50%;*/
	/*position: fixed;*/
    margin-top: 5px;
	width: 950px;
	max-height: 100%;
	margin: auto;
	border: solid 1px;
	border-color: #ffcc99;
	border-radius: 5px;

}

div.main_content_box {
	margin-top: 5px;
    width: 700px;
    max-height:100%;
    margin: 35px auto;
	font-weight: normal;
	/*background-color: #cc9966;*/
}

div.main_content {
	margin-top: 5px;
    width: 630px;
    max-height:100%;
    margin: 35px auto;
	font-weight: normal;
	/*background-color: #cc9966;*/
}

	<?php require_once("mnu.php") ?>
	<!--Conten Boxt Start-->
	<div class="w3-content w3-card-4 w3-margin-top w3-padding w3-light-gray">
	<!-- Content Start -->
<div class="main_content">
  <div class='w3-container'>
	  <p><h1 class="headline_bolder">En kort innføring i Internetts historie, vekst, dens utforming og funksjoner.</h1></p>
	<p><h1 class="headline_bold">Hva ligger bakenfor?<br>
	  Organisasjoner som setter standarder for drift, bruk og utvikling av internett.</h1></p>
<br><br>		
<div class="content">
  <p><h1 class="headline">WEBMASTERinfo er en opplysningstjeneste på Imternett av Webmasters for Webmasters.</h1> WEBMASTERinfo opplyser og formidler ut i fra kunnskap i forhold til de siste satte standarder som er satt av bla. Internasjonale Standardiseringsorganisasjoner. <br>ISO (International Organization for Standardization/ Den internasjonale standardiseringsorganisasjonen), ICANN, IANA m.fl.</p>
    
  <br><br>
  <p><h1 class="headline">IANA (Internet Assigned Numbers Authority)</h1> 
    er en organisasjon som fører tilsyn med forvaltningen av IP-adresser, toppnivådomenenavn (Top Level Domain=TLD) og Internet Protocol Control Protocol - <a href="ipcp.php" title="IPCP" target="new">IPCP</a>. I begynnelsen besto IANA kun av en person,  Jon Postel. IANA delegerer lokal forvaltning av IP-adresser til Regional Internet Registries (<a class="bold">RIR</a>)(på Norsk, registrar). Hver RIR forvalter adresser for en del av verden. I norge er det NORID som er registrar for .no, TLD  (Top Level Domain). Samla utgjør disse en del av Numbers Resource Organization som er et organ som skal representere felles interesser.
    
  <br><br>
  <p><h1 class="headline">IANA delegerer forvaltningen av IPv4 -adresser</h1> til de ulike RIRene i større biter (typisk /8 eller mer). Hver RIR forvalter adresseblokkene etter egne bestemmelser. Typisk fungerer det på den måten at forvaltningen av adresser blir delegert videre til ISPer som får tildelt mindre blokker av adresser som /19 og /20. Det er også et system for delegering og forvaltning av IPv6-adresser, men det er lite konkurranse om IPv6 adresseblokker siden tilgjengeligheten på adresser er mye større enn etterspørselen. IANA er under kontroll av ICANN (Forklaring finnes i avsnitt nedenfor), men den endelige kontrollen over DNS rot-sona er det det amerikanske næringsdepartementet som har. Den 1. oktober 2016 utløp avtalen med National Telecommunications and Information Administration og IANAs funksjoner utføres heretter av Public Technical Identifiers.</p>
    
  <br>
  <p><h1 class="headline">ICANN Internet Corporation for Assigned Names and Numbers</h1> (ICANN er organisasjonen over IANA) er en allmennyttig (eng: nonprofit) organisasjon med hovedkvarter i Marina del Rey (California) i USA, med formål å administrere global tildeling av DNS-navn, internett-adresser (domenenavn/URL) og protokoll-parametre. Oppgavene utføres innenfor rammene av en kontrakt med USAs handelsdepartement, men ICANN forsøker å hente innspill fra mange forskjellige deltakere i Internett-samfunnet. Hvor mye de tar hensyn til de innspillene de får strides det mye om. Den ble opprettet 18. september 1998, og overtok de oppgavene som til da hadde blitt utført av Jon Postel ved Information Sciences Institute – disse oppgavene refereres ofte til som IANA. 6. november 2006 ble Jon Bing innvalgt som medlem i ICANNs råd for globale toppnivådomener (GNSO Council) I 2012 samlet en konferanse i Dubai i et forsøk på å innføre internasjonale retningslinjer for internett. Konferansens forhandlinger brøt sammen 13. desember 2012 etter at USA og Storbritannia nektet å godta en FN-basert styring som kunne tillate Russland og Kina å innføre mer sensur i sine egne land.</p> 
    
  <br>
  <p><h1 class="headline">ITU (The International Telecommunication Union)</h1> Den internasjonale telekommunikasjonsunion er et FN-organ for global standardisering innen telekommunikasjon med formelt ansvar for å lage verdensstandarder innenfor telekommunikasjonsområdet. ITU arrangerer også de fireårlige Telecom-messene.   
    
  <br>
  <p><h1 class="headline">IEE (Industrial Electronics Engineers)</h1> Verdens største standardiserte tekniske faglige organisasjon for utvikling av teknologi. 
    
  <br><br>
  <p><h1 class="headline">IETF (Internet Engineering Task Force)</h1>utvikler og promoterer Internett-standarder, i nært samarbeid med W3C og standardiseringsorganisasjonene ISO og IEC, og befatter seg spesielt med standardene innen TCP/IP. Wikipedia 
    
  <br><br>
  <p><h1 class="headline">Norske Standardiserte/Stardiserings-organisasjoner.</h1>
  <br>
    SN (Standard Norge) 
    
    PoT (Post og Teletilsynet) 
    
    NORID (AS (NOrsk Registreringstjeneste for Internett Domenenavn)) 
    
    NEK (Norsk Elektrotekniske Komite) 
    
    ProNormAS 
    
  <br>
	  <p><h1 class="headline">Disse organisasjonene er bla.</h1> de som er med å gjør at du som bruker av internett kan benytte dette innenfor en fastsatt ramme med lover og regler, enkelt forklart standardiserte retningslinjer. Slik at du som er en vanlig surfer eller utvikler av tjenester på internett kan ha en rolig og avslappet dag der det meste går av seg selv uten for mye å sette seg inn i for mye for at du skal finne den websida som du ønsker uten at du trenger å tenke over og huske noe mer enn adressen (URL=Uniform Resource Locator) til ønsket internettside eller tjeneste du ønsker å “besøke”.
  <p><h1 class="headline">Fra Tanke til Idé til Internet slik det fremstår i dag, og hvorfor en Norsk Organisasjon?</h1> Tunga rett i munnen nå. Hold forskjell på <a class="bold">ARPAnet</a>(Advanced Research Projects Agency Network) og <a class="bold">DARPA</a>(Defense Advanced Research Projects Agency). ARPAnet  er forgjengeren til Internett slik vi kjenner det i dag, og DARPA er en organisasjon som skulle rettighetsbeskytte ARPA, beskytte dets eksistens og utvikling. ARPAnet ble lansert av USA’s forsvarsdepartement i 1969, men hadde vært forsket og snakket om siden 1962. DARPA  var de som beskyttet og holdt orden på ARPAnet som et &quot;produkt&quot; under utvikling inntil det ble hetende internett, og det ble til det det er i dag ,slik vi kjenner det. ARPAnet var kun ment for, og derfor i stand til kun å kun sende/overføre og motta tekst.. Men under utviklingen av ARPAnet var det noen som så muligheter for noe mer, og det meldte seg rask at det kunne bli behov for å utvikle ARPAnet på veg mot noe mer og større. Muligheter ble avdekket og synliggjort.  Det skjedde nemlig noe i 1975, 1983, og i 1986. Det som skjedde har stor betydning for hva vi har i dag. I 1975 ga DARPA fra seg rettighetene til ARPA-nettet.  
    Det ble helt siden starten i 1969 opprettet nasjonale under-organisajoner. De internasjonale organisasjonene i USA ville aldri hatt kapasitet eller mulighet til å følge opp og sette standarder for ARPAnet/Internett alene, og det ville vært et kaos "forsøkt" satt i system. Det ville i hvertfall ikke vært mulig etter at DARPA sa i fra seg ansvaret og eierskapet over ARPA til National Science Foundation (NSF) Da begynte andre land og bli forespeilet ARPAnet og hva det var/ment for.</p> 
	<br>
	<p><h1 class="headline">Hvorfor har vi internasjonale (feks. Norske) organisasjoner</h1>
    Norge har ingen egne organisasjoner som kun er rettet direkte mot utviklingen og bruk av internett og internettjenester. De nevnte organisasjoner du leste om høyere opp er det vi har (de som er verdt og nevne), de som har noe og si, som har en juridisk makt og tyngde. Norge har NORID (les mer nedenfor om NORID)<br>
    I 2004 åpnet IANA for at domenenavn med Æ, Ø og Å kunne registreres. Så hvordan fikk plutselig IANA det for seg at særnorske (og nordiske) tegn skulle nå også eksistere i internettadresser. De fleste utenfor Norge og Norden har hørt om våre særnorske tegne. Derfor hadde ikke dette eksistert eller vært vært mulig siden starten i 1969 (1962). Det var på grunn av de små organisasjonene i de nordiske landene, bla. NORID. er pga. at disse små organisasjonene det hele tiden kan utvikles og lages en plan for hvordan internettt til en hvaer tid skal utvikles til alles beste. Det eksisterer ett samarbeide. Hele tiden formidles det nye forslag fra forskjellige land om nye standarder. De små organisasjonene innhenter og mottar også nye forslag fra private aktører. Det gjør også de store organisasjoner, men det skjer i de fleste tilfeller fra de små underorganisasjonene, som for eksempel  NORID.</p>  
    
	
    <br>
    <p><h1 class="headline">Et godt eksempel på at det fungerer, er at IANA har godkjent særnorske tegn i domenenavn. Om det er noe som har slått til (blitt en suksess) er ett annet spørsmål. Du kan jo forsøke selv og se om det er noen norske butikker og firmaer som har registrert sitt firmanavn, for eksempel. www.elkjøp.no . 
    
    <br>
    Dette var litt om  hovedtrekkene som betyr noe for internetts eksistens. Så nå videre litt om Norges rolle i mellom alle organisasjoner og standarder, .no domenet og IANA's tilrettelegging av Internett for den norske mann og edderkoppnettet/www/WorldWideWeb.
    
    <br>
    <p><h1 class="headline">I 1983 ble toppdomenet .no delegert til Televerkets forskningsinstitutt.</h1> Norge hadde hverken blitt glemt, gjemt eller sittet på gjerdet for det verdensomspennende nettverket som hadde vært under planlegging, forskning og utvikling mens den kalde krigen pågikk. Tanken og ideen var egentlig at ARPAnet skulle fungere som en kommunikasjonsplattform i tilfelle atomkrig.<br>
    Det norske forskningsinstituttet var det naturlige valget ettersom de allerede var hovedsamarbeidspartner med ARPAnet. I 1987 ble UNINETT-prosjektet startet opp, og da ble det naturlig at de overtok dette nasjonale ansvaret, ettersom de var en teknisk kompetent og nøytral part. I 1993 ble UNINETT etablert som et ikke-kommersielt aksjeselskap, og alle kommersielle aktører ble stengt ute. Dette var for å styrke UNINETT som en nøytral aktør. I 1995 ble det første regelverket for domeneregistrering (navnepolitikken) offentliggjort. Norid hadde på den tiden et mye strengere regelverk enn for eksempel .com-domenet. Regelverket ble imidlertid myket opp i 2000 ved at man tillot registrering av generelle ord og uttrykk. I februar året etter[ økte det tillatte antallet domener per organisasjon til 15, og organisasjonene trengte ikke lenger dokumentere at de hadde rettigheter til navnet før de søkte. Fra 1. juli 2003 ble Norid skilt ut som eget datterselskap under UNINETT AS, UNINETT Norid AS. Selskapet endret navn til NORID AS 27. juni 2019.<!-- kontakt slutt --></p>
  <p>Dette var litt om historien til Internett. Fra begynnelsen som ARPAnet til det Internett vi kjenner i dag, men det var jo sånn at ARPAnet skulle fungere som en kommunikasjonsplattform, skulle den ikke? Det er noe som mangler. Vi har jo allerede lært at ARPAnet protokellen kun var i stand til å sende tekst over nettverket. </p>
  <p>De fleste i Norge tror at Internett var noe som oppsto på 90-tallet. I hvertfall at det kom til Norge på 90-tallet. Det er en sannhet med modifikasjoner. Nå har du lært at Internett oppsto som et fungerende produkt i 1969, men når kom det til Norge. Du lærte jo det at .no domenet ble regisrert som et internasjonalt domene i 1983 av Televerkets forskningsinstitutt. Norge har vært tilknyttet Internett siden 1973. Televerkets forskningsinstitutt har vært med så og si hele veien.</p>
</div>
	</div>
	<!-- content_box slutt -->
	</div>
	<!-- Footer Start -->
	<?php require_once("footer.php") ?>

	<div class="menu_box w3-content w3-card-4 w3-padding w3-light-gray" style="line-height: 6px">
		<h4 class="headline_bold">Naviger</h4><br>
		<p><a class="mnu_link" href="index.php" title="Tilbake til Start">Hjem </a></p>
		<p><a href="design.php" title="Hva vi kan utvikle">Art & Design</a></p>
		<p><a href="design.php" title="Opplysning og Info-tjeneste">Opplysning og info-tjenesten</a></p>
		<p><a href="std_org.php" title="Internetts historie">Internetts historie </a></p>
		<p><a href="contact.php" title="Kontakt WEBMASTERinfo">Kontakt </a></p>
	</div>

 

[gizmola]

Hi Leon,

Some problems with your markup:

Block elements already have a box around them.  You don't want to nest an h1 inside a p for example:

<p><h1 class="headline">Et godt eksempel på at det fungerer, er at IANA har godkjent særnorske tegn i domenenavn. Om det er noe som har slått til (blitt en suksess) er ett annet spørsmål. Du kan jo forsøke selv og se om det er noen norske butikker og firmaer som har registrert sitt firmanavn, for eksempel. www.elkjøp.no .</h1></p> 
    

Use something like this instead:

<article class="article">
  <h1>Title</h1>
  <p>Article text here ........ </p>
</article>

 

Hey let me suggest to you a methodology for css naming and specificity I really like:  BEM.

CSS can easily have specificity issues, and can also make your page structure brittle.  One thing you are doing that is not great, is to use div.class in your css.  That's just a bad idea.  

Rules of thumb are these:

• Never use ID's for selectors
• Don't select by tags for any complex selectors
• Give everything you want to style its own class

So with BEM you want to step back and look at your "blocks"  What are they from a structural level?

From what I can see your outline should have started with something like this:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Site Title</title>
        <link rel="stylesheet" href="style.css">  
    </head>
    <body class="body">
        <header class="header">
            <!-- Logo Top Menu nested here-->
        </header>
        <div class="body__container">
            <section class="menu">
                <!-- Menu block here -->
            </section>
            <main class="main">
                <article class="main__article main__article--primary">
                    <h1 class="main__headline">Hva ligger bakenfor?</h1>
                    <p class="main__content">Organisasjoner som setter standarder for drift, bruk og utvikling av internett.</p>
                </article>
                <article class="main__article">
                        <h1 class="main__headline">...</h1>
                        <p class="main__content">...</p>
                </article>
            </main>
        </div>
        <footer class="footer">Footer Stuff Nested here</footer>   
    </body>
</html>

 

I would take a step back from what you are doing and make sure you have a clean block structure.

With BEM, you make a class for each semantic block.  You should remove all those div.class selectors.

Make a css class for every block, element and element--modifier you see, and add any additional ones you need for menus etc.

.body {
}
.body__container {
}
.menu {
}
.menu__button {
}
.menu__title {
}
.menu__text {
}
.menu__link {
}

etc.

 

For the menu, usually people will use either a ul with nested li items, or a bunch of buttons inside a section.  

 

<section class="menu">
  <div class="menu__title">Naviger</div>
      <a class="menu__link" href="index.php" title="Tilbake til Start">
      <button class="menu__button">
          <span class="menu__text">Hjem</span>
      </button>  
  </a>
  <!-- other menu items the same -->
</section>

 

[LeonLatex]

Thanks for a well-worded answer gizmola. Good to have people like you who "have the strength" to take such good time to answer so well-formulated and explanatory. Now I will tread a little carefully, since it is in your field I step in. I have not yet tried to change the layout as you suggest. I do not think the answer lies there. In relation to the problem, well it's like "makeup" and understand for me. So far so good. I have been away from the subject (web development) for a long time (you have heard that before). I'm still trying to learn, but there's too much "the old school" in me for me to constantly manage to get things to be correct 2021/2022. and as long as I make it work in the three major browsers wich in my head is Chrome, Edge / Explorer, and the Norwegian, Opera (which is one of the larger companies listed on the Norwegian stock exchange, wich i cant understand why😮🤔🙄). Anyway, I will re-write it when I get this far, or if I find that to be the main reason. Or, what am I saying. It's been 5 days tomorrow since I posted the opening post. A lot has happened since then. I finally found the error myself (I should post what / where the error was, but do not remember it now. There was something with "position:" fixed; ". Yes, that's right. When I removed" position: "fixed; from "div.content_box" fixed everything. Everything was in line, but there is something with this scaling I still can not figure out.

You, gizmola, you are really helpful, and I really appreciate that. So thank you so much for trying to get me on the right track. I need that. Thank you again for taking the time to correct my mistakes and shortcomings.
With the best regards from someone who has been a student at the old school, disappeared a few years, came back and thought he could continue as before (and a little on hes own way 😂👍👌).

[gizmola]

No worries my friend, your passion and desire to produce is very evident, and speaking for most of the regulars here, we invest time here to try and help people like yourself who are working hard at building up their expertise.