Unused menu block in template, expanding main content section to cover

HTML & CSS
1

Hi everyone,
I have a css stylesheet for a CMS I’m working on. The basic layout is:

CONTENT | SUBMENU

The problem is, when the submenu isn’t relevant (i.e.: no child items in the nav), I can’t find a way to have the CONTENT block roll into the blank submenu space, which leaves a large white space. Tried using inline-block and block in every combination I could think of. Any help is appreciated.

Basic page html is div tags:
WRAPPER
-MAINWRAPPER
—MAIN
-----CONTENT
-----HPRIGHT

Most relevant css is:

#wrapper {
    width: 850px;
    margin: 0 auto;
    padding-bottom: 10px;
}

#top {
    margin-top: 15px;
    height: 180px;
    background: url("../images/topbg.jpg") no-repeat;
}


#mainwrapper {
    display: inline-block;
    width: 850px;
    margin-top: 0;
}

#mainMenu {
    height: 20px;
    width: 600px;
    float: right;
    margin-top: 80px;
    margin-right: 10px;
}

#main {
    display: inline-block;
    width: 850px;
    background-color: #fff;
    border: solid 1px #D3CCCD;
    margin-top: 0;
    padding-bottom: 60px;    
}
2

Not sure about others, but I’m not clear on what situation you are dealing with here. Is this a menu?

3

Nope, just blocks of content. I’ve attached a screenshot to make it clearer.

I have css styles that I built for a CMS template, so I can’t make style changes page by page. When there are no items in the grey block on the right, I’d like the main content (the lorem ipsum text in the screenshot) to flow across the full page, leaving the grey block invisible.

Hope I’m clearer! :slight_smile:

4

Ah, that’s clear now. The easiest thing to do here is just float the gray block to the right and let the main content flow around it. When the gray block isn’t there, the content will just flow to full width. If you don’t want the main content to wrap around the right block when it’s there, you can apply overflow: hidden to the main content.

Examples attached. There may be a better way, but this is my attempt:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
	
<style type="text/css" media="all">
* {margin:0;padding:0}
.right {width: 200px; margin: 0 0 20px 20px; float: right; background: #f7f7f7;}
.main {margin: 10px 10px 40px;}
</style>
	
</head>

<body>
<div class="main">
  <div class="right">
    <p>Some right content text. Some right content text. Some right content text. Some right content text. Some right content text. Some right content text. Some right content text. </p>
  </div>
  <div class="content">
  <p>Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. </p>
  </div>
</div>

<div class="main">
  <div class="content">
  <p>Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. </p>
  </div>
</div>


<div class="main">
  <div class="right">
    <p>Some right content text. Some right content text. Some right content text. Some right content text. Some right content text. Some right content text. Some right content text. </p>
  </div>
  <div class="content" style="overflow:hidden">
  <p><b>Content with overflow: hidden applied</b> Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. Some main content text. </p>
  </div>
</div>

</body>

</html>
5

And don’t forget to add haslayout (zoom:1.0) for ie6 and 7 for the same effect :slight_smile:

Otherwise all good :slight_smile:

6

Thanks for the reminder, Paul. (I’m gradually forgetting that those old browsers exist. :smiley: )

7