homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Menu and Main Content

Msg#: 4360689 posted 8:16 pm on Sep 9, 2011 (gmt 0)

I have a basic page, it's got a header at the top and footer at the bottom.

Everything looks great and works well in all browsers.

The issue I have is on some pages I want the content to have a menu on the left, sometimes two menus on the left next to each other then the main content on the right.

This is all over the show in different browsers. Sometimes it looks great but for others it does this

I have

1. Menus are on top of each other
2. The menu has a different margins

How can I get this consistant.



WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

Msg#: 4360689 posted 8:47 pm on Sep 9, 2011 (gmt 0)



Msg#: 4360689 posted 9:21 pm on Sep 9, 2011 (gmt 0)

<div class="MainContent2">

<p class="HeadTitle">Page Title</p>
<p class="RegFont">This is my main paragraph with information</p>

<p class="RegFontBold">Bullet Points</p>
<ul class="nav2">

<div class="MainMenu"><?php require_once('includes/main_menu.php'); ?></div>
<div class="MainMenu"><?php require_once('includes/sub_menu.php'); ?></div>
<div style="clear: both;"></div>


.MainPage {
width: 990px;
margin: 0 auto;
min-width: 990px;


.MainContent2 {
min-height: 500px;
width: 600px;
margin-left: 15px;
margin-bottom: 15px;
display: table-cell;

.MainMenu {
font-family:Arial, Helvetica, sans-serif;
padding: 2px;

.nav2 {
width: 300px;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
padding-left: 0px;

ul.nav2 li {
border-bottom: 1px solid #666;
padding: 5px;

.RegFont {
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;

.RegFontBold {
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;


WebmasterWorld Senior Member 5+ Year Member

Msg#: 4360689 posted 2:17 pm on Sep 11, 2011 (gmt 0)

Hi kiwis, and welcome to WebmasterWorld :)

Thank you for providing a code sample. As you have large number of inconsistencies between browsers/versions I would suggest first making sure the css and html are valid.

From your description, you are wanting a simple two column layout with menu/s on the left and content on the right. There are lots of ways to achieve that, but to start, the provided html has both div.MainMenu inside div.MainContent2. If the div.MainMenu's contint he menus, and div.Maincontent2 contans the content that is supposed to float to the right, then the two menu divs need to be removed from inside that div.Maincontant2.

Second, depending on your html structure and the browser versions being supported the menu divs will probably need to be given a width and floated as well.

However, as you have used display:table-cell, I wonder if you are only supporting modern browser/versions. If so, it should be possible to achieve this using display:inline-block, or display:table/row/cell if you wish.

In terms of margins, browser/versions vary on the default margins and padding for <ul>'s. A common technique is to zero both, then set your preferred dimensions.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved