Header layout adjusts according to the content

**GurpreetC** · 04-03-2010

I often see the layout based on this model

Code:

<div id="container">
  <div id="header">Header</div>
  <div id="wrapper">
    <div id="content">Content</div>
  </div>
  <div id="leftNavigation">Navigation</div>
</div>

However, this model presents a major problem when the div "Content" contains a table wider than the viewport.

In this case, the content is stretched and a scrollbar appears at the bottom of the screen to scroll horizontally. Unless there is a "overflow: hidden". But I do not want to hide the contents of my table.

So if I understand it, to fix this problem. I need a model like that?

Code:

<div id="container">
  <div id="header">Header
      <div id="wrapper">
          <div id="content">Content</div>
      </div>
      <div id="leftNavigation">Navigation</div>
  </div>
</div>

And if my header must have a height of 100 pixel, then I must define its padding 100 pixels and a margin (width and height) to 0 px. Then placing my background picture.

Tell me if I'm on the right track. Or if you see another problem?

**void** · 04-03-2010

Its very difficult to help you without much info: How do you want us to help you if you do not put the CSS involved?

Also, what do you mean by the "viewport"?

Although I do not have all the info, in my opinion you're not in the right direction (in general you do not use padding to position the blocks but rather the margin and float)

**GurpreetC** · 04-03-2010

In fact, I did not speak such as CSS. I was talking about a problem of succession in a DIV layout especially. This is only my opinion, no matter that I will use the CSS here, it is impossible that my header fit the contents of a DIV below him.

The ViewPort here is what is visible in the browser window. So, what is beyond the screen is not included in the viewport.

In the case of the header, if I put a MARGIN-TOP, my background picture will also be subject to margin, or that I'd like the image of my header starts at 0px and 0px in the top left.

So to re-explain my problem, I'll put the CSS.

HTML Code:

<style type="text/css">
html,body
{
   margin:0;
   padding:0
}
div#header
{
   position:relative;
   height:80px;
}
div#wrapper
{
   float:left;
   width:100%
}
div#Menu
{
   float:left;
   width:33%;
   margin-left:-100%
}
div#content
{
   margin: 0px 0px 0px 200px
   clear :right;
}
</style>

<div id="container">
  <div id="header">Header (image of background repeated in x)</div>
  <div id="wrapper">
    <div id="menu">Menu</div>
    <div id="content">Content (insert hyper off the table here)</div>
  </div>
  <div id="leftNavigation">Navigation</div>
</div>

So if I insert a table that has say 1500 pixels wide in the div content and my window is 1024 pixels wide, then it expands to display the table and the horizontal scrollbar to be visible.

However, it remains the header to the size of the viewport. It does not follow the width of content. So the background image repeat only to the width of the viewport and not the width of its widest child (in this case the content). In short, it misses a bit of image width header.

**void** · 04-03-2010

If I understood everything, the problem is that the width of each block is defined according to the parent, and not the child

=> The only solution I see is to freeze the size of the parent tag in order to be sure that the picture goes:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
	<title>TEST</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" media="screen" type="text/css" title="mytheme1" href="../theme1.css" />
	<style type="text/css">
		html,body{
		   margin:0;
		   padding:0;
		}
		
		body{
			min-width:1500px; /* do not run on older version of IE*/
		}
		
		table{
			border-collapse:collapse;
			border:none;
		}
		
		th, td{
			border:2px solid black;
			padding:0.1em 0.9em;
			margin:0
		}
		
		#header{
			margin:0;
			padding:0;
			height:80px;
			background-color:black;
			color:white;
		}
 
		#menu{
			float:left;
			width:100%;
			margin:0;
			padding:0;
			background-color:red;
		}
 
		#wrapper{
			clear:both; 
			margin:0;
			padding:0;
			background-color:green;
		}
 
		#content{
		   margin: 0px 0px 0px 200px;
		   padding:1em;
		   background-color:yellow;
		}
 
		#leftNavigation{
			float:left;
			width: 200px;
			margin:0;
			padding:0;
			background-color:blue;
		}
 
		#footer{
			margin:0;
			padding:1em;
			background-color:black;
			color:white;
		}
		
		.spacer { 
			margin:0;
			padding:0;
			clear:both; 
		} 
 
		.spacer hr{     
		  display: none; 
		}
 
	</style>
</head>
<body>
 
	<div id="header">Header (background image repeated at x)</div>
	<div id="menu">Menu</div>
 
	<div id="wrapper">
		<div id="leftNavigation">
			Navigation<br/>
			Navigation<br/>
			Navigation<br/>
			Navigation<br/>
			Navigation<br/>
			Navigation<br/>
			Navigation<br/>
			Navigation<br/>
			Navigation<br/>
			Navigation<br/>
			Navigation<br/>
			Navigation<br/>
			Navigation<br/>
			Navigation<br/>
		</div>
 
		<div id="content">
			<table>
				<tr>
					<td>my text hahaha</td>
					<td>my text hahaha</td>
					<td>my text hahaha</td>
					<td>my text hahaha</td>
					<td>my text hahaha</td>
					<td>my text hahaha</td>
					<td>my text hahaha</td>
					<td>my text hahaha</td>
					<td>my text hahaha</td>
					<td>my text hahaha</td>
					<td>my text hahaha</td>
					<td>my text hahaha</td>
					<td>my text hahaha</td>
					<td>my text hahaha</td>
					
				</tr>
			</table>
		</div>
		
		<div class="spacer"></div><!-- useful if leftNavigation is higher than content -->
	</div>
	
	<div id="footer">footer</div>
</body>
</html>

**GurpreetC** · 04-03-2010

Thank you for your help is appreciated. However I have no menu on the left. I must absolutely have a menu to the left. The latter may have a fixed width, say 180 pixels. I tried a bunch of other combinations, but without success. I can not create the desired layout and header that adjusts to content.

This is not my style, but I think I give up. As your solution works, but I have no left menu, I thought using a sliding menu and it would have solved the problem. However, I think that users of the intranet site will find it annoying.

As a final solution, I may be using good old tables that they never asked me too many problems. This might look like:

HTML Code:

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr id="header" style="height :80px; background :url(Images/header.gif;) repeat-x;">
       <td>Header</td>
  </tr>
   <tr>
      <td>
            <div style="float :left; width :160px;">Left menu</div>
            <div style="float :left; clear :right;"> Central Content</div>
      </td>
   </tr>
</table>

It is often said that tables require more markup than the CSS. However here will not be a problem.

I put my menu and my core content in a DIV, because when I want to print, I only apply a "display: none" in #header.

And that's it. Table = 1, CSS = 0! It's ugly, most of the time I return to use the table because of similar problems. I would have liked to do without, but I have no idea how to work around the problem.