Cannot format webpage with two vertical divs next to each other, one for menu and one for content

HTML & CSS
1

I tried to make a page with two divs next to each other, the first one will have the vertical menu and the other one will show the content. I am having hard time to bring content of both divs next to each other to look like a normal page. The content of the secont div appears much lower than it should be, leaving a big blank area. I also want to have divs of the same height because I do not want to have blank space under the first div, on the left of the second div. My code:
html:

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="style/style.css">
<link href="images/favicon.ico" rel="shortcut icon">
<style>
.container {
        display: table;
		width: 100%;
      }
      
      .item {
	  display: table-cell;
	  align:top;
	  text-align: top;
      }
</style>
<body>
<div class="container">
      <div class="item navigation" style="width:200px;">
	  <div class="" >
<img style="display:block; margin:auto;" src="../images/Logo.jpg">
  <ul>
   <li> <a id="#home" href="../indexEn.php?page=home" >Home page</a></li>
	<li> <a id="#id" href="../indexEn.php?page=id">item 1</a></li>
	<li class="has-sub"> <a href="">menu item 2</a></li>
  </ul>
  <p class="unselectable">some text<br>here<br><br>
  credits<br>and copyright</p>
</div></div>
<div class="item">
<center>
<h2 style="color:#069">This is the page title.</h2>
</center>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

<p><b>Introduction</b></p>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

</div></div>
</body></html>

css:

html, body {
  height: 100%;
  margin: 0;
}

body{
   font-family: Helvetica;
}

p {
  margin-left: 10px;
  margin-right: 10px;
  text-shadow:none; 
  font-size:18px; 
  text-align:justify;
}

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	bottom: 0px;
	left:10px;
	text-align:center; 
	color:#034;

	position: absolute;
}

.navigation {
  padding: 0;
  margin: 0;
  margin-right: 1px;
  line-height: 1;
  width: 13em;
  min-height: 830px;
  position: relative;
  height:auto;
  background: #ffca0a;
  font-family: Arial, sans-serif;
  zoom: 1;
}

.navigation ul,
.navigation ul li,
.navigation ul ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navigation ul {
  position: relative;
  z-index: 500;
  float: left;
}

.navigation ul li {
  float: left;
  min-height: 0.05em;
  line-height: 1.1em;
  vertical-align: middle;
  position: relative;
}

.navigation ul li.hover,
.navigation ul li:hover {
  position: relative;
  z-index: 510;
  cursor: default;
}

.navigation ul ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0px;
  z-index: 520;
  width: 100%;
}

.navigation ul ul li { float: none; }

.navigation ul ul ul li { float: none; height: 40px; }

.navigation ul ul ul { width: 50%; top: 0; right: 0; }
}

.navigation ul li { float: none; }

.navigation ul ul { margin-top: 0.05em; background: #ffca0a;}

.navigation a {
  display: block;
  padding: 1em 1.0em;
  color: #019;
  text-decoration: none;
}
2

align: top and text-align: top are invalid CSS definitions at that point.

Change it to vertical-align: top and tweak your H2’s margins as appropriate.

2 Likes
3

That solves my problem. Thank you very much! Now I have another issue. When the content of the second div is too small, min-height of navigation class seems not to be working and the paragraph under the menu appears over it.

4

apply your min-height to the container, not the cell. A table cell will stretch to fill the table.

5

Thank you very much!!

7

One thing, you seem to be missing a closing </head> tag.

8

thanks for spoting. it is not the complete code. accidentally deleted when posting here.

1 Like
9

on more thing. I added mobile menu. Now my divs are:

<div class="container">
   <div id="navigation-desktop" class="item navigation" style="width:200px;">
      ... // desktop menu
      ...
   </div>
   <div id="navigation-mobile" class="navigation-mobile" style="display:none;">
      ... // mobile menu
      ...
   </div>
   <div class="item" style="padding-left: 5px; padding-right: 5px;">
      ... // content 
   </div>
</div>

and in css I addded:

@media only screen and (max-width: 400px) {
  .navigation {
    display: none;
  }

  .navigation-mobile {
    display: block;
  }
}

In mobile devices I see no menu, just the content. In Chrome, using the tool to act like mobile, if I change manually navigation-mobile’s display to block, then I see the menu. If I use that Chrome’s tool to turn back to desktop, mobile menu still exist along with the desktop one. What am I missing?

10

<div id="navigation-mobile" class="navigation-mobile" style="display:none;">

Why are you using inline styles, rather than putting everything in an external stylesheet? You are making problems for yourself. The only way to override that is with an !important declaration, and that way lies madness.

See https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

11

I moved it in external css file. Nothing changed.

12

Assuming you still want the same side by side behaviour then you’d do something like this.

<div class="container">
   <div id="navigation-desktop" class="item navigation">
      ... // desktop menu
      ...
   </div>
   <div id="navigation-mobile" class="item navigation-mobile">
      ... // mobile menu
      ...
   </div>
   <div class="item" style="padding-left: 5px; padding-right: 5px;">
      ... // content 
   </div>
</div>

.navigation,
.navigation-mobile{width:200px;}
.navigation-mobile{
  display:none;
}
@media only screen and (max-width: 400px) {
  .navigation {
    display: none;
  }
  .navigation-mobile {
    display: table-cell;
  }
}

Note that its generally best practice if you can use the same menu for both mobile and desktop but just restyle it. Having two separate menus is harder to maintain unless of course there is no way to achieve the design you want.

Also be careful of magic numbers.

min-height: 830px;

13

No, the mobile menu appears above content, like Joomla does. I took it from Joomla where sets display: block to show the mobile menu div. Now I noticed that my mobile phone show the page correctly, but in desktop Chrome the tool to act like mobile fails to show mobile menu. Same happens with firefox. In my phone, if I rotate the device, I see both menus.

14

I know nothing about Joomla but I do know that that they will all be different so you will need to explain how you want your page to look :slight_smile:

Your container is display:table so you will need to change that to display:block in the media query or items will be side by side. Change .item to display:block also in the media query

I’d need to see your full page to comment further. I assume you have the correct viewport meta tag in place? Sometimes you have to refresh the page for the devtools to take effect fully.

That sounds correct if the width of landscape is greater than 400px.

15

Yes, I have added

<meta name="viewport" content="width=device-width, initial-scale=1.0">

The site is this: https://synthesi.mysch.gr/indexEn.php I know it is not perfect as I am not a web developer. I am just a newbie.

How do I get rid of the second menu when rotating? Yes, width is more than 400px then. (I changed it to 500)

16

No worries we all have to start somewhere :slight_smile:

Yes good that’s fine :slight_smile:

This would be the changes for the block display.

<div class="container">
   <div id="navigation-desktop" class="item navigation">
      ... // desktop menu
      ...
   </div>
   <div id="navigation-mobile" class="item navigation-mobile">
      ... // mobile menu
      ...
   </div>
   <div class="item" style="padding-left: 5px; padding-right: 5px;">
      ... // content 
   </div>
</div>

.navigation,
.navigation-mobile{width:200px;}
.navigation-mobile{
  display:none;
}
@media only screen and (max-width: 400px) {
  .item,.container {
    display: block;
    width:auto;
  }
    .navigation {
    display: none;
  }
}
17

I changed it a few minutes ago. Mobile menu is inside the content div.

<div class="container">
   <div id="navigation-desktop" class="item navigation">
      ... // desktop menu
      ...
   </div>
   <div class="item">
       <div id="navigation-mobile" class="item navigation-mobile">
           ... // mobile menu
           ...
        </div>
      ... // content 
   </div>
</div>
18

This is good question because it strikes at the fundamental heart of responsive web design.:slight_smile:

The only criteria for your media queries should be the space that your design requires in order to function properly at any size that it is shown. Essentially you have to ignore all you thought was true and instead concentrate on your design and change your design when it no longer works at a specific size.

You have to be device agnostic as there are hundreds of devices and hundreds of different widths and heights to cater for. So many in fact that it is futile to try. If for example you set your media query at 500px then some phones may be 501px. How will you know when a new phone comes out what size it will be? You can never be certain.

Therefore the only approach is to concentrate on what you know and work with the design you are creating and the needs of that design. For example if your menu only has 2 words in it then it will probably work from 300px up to 3000px. Ignore devices and when you design in the desktop close your browser window smaller and smaller down to about 300px. If at any point a horizontal scrollbar appears or things break then that’s the point you would use a media query.

Just because you turn your phone to landscape doesn’t mean that it should get the same design as a vertical screen. If the larger menu fits nicely in landscape then that’s fine. You should already have worked out what size the menu can fit so devices and portrait and landscape are irrelevant. I sometimes have my desktop open smaller than some phones so I want to see the same as a mobile does at that size. :slight_smile:

1 Like
19

Just looked at your live link (thanks) and I see one problem.

#navigation-mobile{display:none}

You’ve used an id to turn it off so you will need to use an ID to turn it back on again.
IDs always win out against all classes as they have more weight. Its best practice (when learning) to just use classes for all your styles and avoid specificity errors.:slight_smile:

20

It looks to me as though the two columns look unwieldy at about 700px so I would change your 400px media query to 700px (or thereabouts) instead.

21

here is my way of thinking about this page. When a user access the page from a device with a width lower or equal to 500 (lets say so) then I do not want the desktop menu to earn space for the content. When width is more than 500px, then there is enough space for the desktop menu. That is what I am trying to accomplish.
I added:

@media only screen and (min-width: 501px) {
  #navigation-desktop {
    display: table-cell;
  }

  #navigation-mobile {
    display: none;
  }
}

and mobile menu is lost on all devices, mobile and desktop Chrome acting as mobile.