Member Avatar for mehgcap

Hi all,
I am relatively new to css. I have volunteered to help a small organization with their website, and I found what they currently had to be very out of date and not at all modular (for instance, their main nav menu was replicated in every site page, instead of being included from a single file). I am trying to modernize things. I have gotten most of what I want done, except for one major problem. I have a mainMenu div, holding a column of navigation links, which takes up the left 20% of the page. Beside that is my content div, holding the main content of the page. There is a div above both of these holding the logo.

The problem is this: my content div lines up where it should, but the actual text does not start until after the last button in the mainMenu div. This leaves the whole page to the right of the menu completely blank. I have no idea why this is happening, and I have done countless searches on the topic. The website I am working on is at http://www.acbmaine.org/dev (leave off the /dev to see the original site). I have pasted my css below. Any suggestions on how to get the content text to move up to the top of the page, instead of after the menu, would be great. Thanks in advance.

div.mainMenu{ //main navigation menu container
float:left;
width:20%;
}

.mainMenuItemContainer{ //div holding a menu item link
position:relative;
height:100px;
width:300px;
}

a.mainMenuItem{ //a link in the menu; it should be a circle, with the text in the middle
position:absolute;
display:block;
width:100%;
height:100%;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
-khtml-border-radius:50%;
-o-border-radius:50%;
font-size:24px;
line-height:100px;
text-align:center;
color:#00b;
background:#fff;
}

.mainMenuItem:hover{ //turn menu item gray when you hover
background:#aaa;
border:#fff 4px;
}

.content{ //main content container for all pages
float:right;
width:80%;
}

p.style{ //most paragraphs have this styling, so I just put it here
float:left;
margin-left: 0.5in;
margin-top: 6px;
margin-bottom: 6px;
}

div.header{ //div holding the header image and text
align:center;
text-align:center;
margin-top:6px;
margin-bottom:6px;
margin-left:0 auto;
margin-right:0 auto;
overflow:hidden;
}

div.headerContainer{
align:center;
}

div.clear{
clear:both;
}
  • 2 Contributors
  • 1 Reply
  • 199 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by simplypixie

Dani AI

Generated

A quick diagnosis: the page is behaving as if the left column and its round buttons are creating a taller, overflowing column that the content text is being forced to flow around. was right to flag the width mismatch — mixing a fluid column with fixed-size items and floating inner paragraphs often produces exactly this symptom. The immediate culprits to check are: (1) fixed-size menu items that can overflow the column, (2) the use of floats on content paragraphs, and (3) absolute positioning inside the menu which complicates normal flow.

Three practical ways to fix it, ordered from easiest to most robust:

  • Stop floating the paragraph elements in the content. Let paragraphs be normal block elements and use margins or padding for spacing; floating those paragraphs frequently produces unexpected vertical gaps next to floats.
  • Make the left column and its items consistent. Either give the column a fixed pixel width and let the content use a matching left margin, or make the menu items scale to the column (percent / max-width) so nothing overflows.
  • Consider replacing the float layout with flexbox: a parent row with a fixed-width menu column and a flexible content column avoids float interaction entirely and is easier to reason about.

Example (two short options):

/* fixed-column approach */
.menuCol { width:320px; float:left; }
.pageContent { margin-left:320px; overflow:auto; }
.pageContent p { float:none; margin:6px 0 6px 0.5in; }

/* flexbox alternative (no floats) */
.pageRow { display:flex; align-items:flex-start; }
.menuCol { width:320px; }
.pageContent { flex:1; padding-left:1rem; }
.menuItem { display:flex; align-items:center; justify-content:center; border-radius:50%; height:100px; }

Final checks: use DevTools to watch computed widths and see which element is overflowing (a colored 1px border still helps, as suggested). Try toggling the paragraph float off first — that single change often makes the text jump back up. If you post the updated HTML structure I can point to the smallest CSS change to make it right.

Member Avatar for simplypixie

You have a confilct here

div.mainMenu{ //main navigation menu container
float:left;
width:20%;
}

.mainMenuItemContainer{ //div holding a menu item link
position:relative;
height:100px;
width:300px;
}

You are setting the width of the overall menu container to be 20% of the page width which could be anything depending on the screen resolution, but then you are saying to set the width of the actual menu items to 300px - you cannot mix the 2. So firstly you need to change the width of your menu container to match the overall width of what is inside it including the width of the menu item and any padding and/or margin widths you may have set on the left and right.

Once you have changed the menu to be a set width you can then change the main content area to either be a set width in pixels and a margin-left to match the width you have now determined for you menu.

A way to check the overlap is to apply a coloured 1px right border to your div.mainMenu div and a different coloured 1px left border to your .content div and you will then be able to see if and where the 2 are overlapping and causing the shift below of your content.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.