Menu and Main Content

[kiwis]

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.

[lucy24]

Code?

[kiwis]

<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">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>



<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>

</div>

.MainPage {
background-color:#FFFFFF;
width: 990px;
margin: 0 auto;
min-width: 990px;

}

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

}
.MainMenu {
text-align:left;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
list-style-type:none;
padding: 2px;
}

.nav2 {
list-style:none;
width: 300px;
float:left;
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;
text-align:left;
}

.RegFontBold {
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight:bold;
text-align:left;
}

[alt131]

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.