Member Avatar for PixelatedKarma

Hello everyone,
I am currently wondering if I am backing myself into a corner. I am currently building a layout that has a center column that spans 100% of the height of the viewable browser window; on top of that I have put in a div with absolute positioning as a top menu bar that is exactly 25px in height. This part works. Now it gets tricky and is starting to make my brain hurt;

The top bar is a transparent .png because of how it is sitting you can see the top 25px of the column underneath it(this would be fine except it clashes with the background image). Now the simple solution would just be to make that top menu bar a solid color and be done with it - but I'm way to stubborn to give in that easy. So I am wondering if it is possible to position the column down 25px so the two don't clash but still keep the column expanding all the way to the bottom of the page?

Here is the css - the #site is the column and the #topbar is obviously the top menu bar:

#topbar {
	height:25px;
	width:100%;
	margin:0px; 
	padding:0px; 
	border-bottom: #000000 1px solid;
	position:absolute;
	top:0px;
	left:0px;
	background-image:url(../images/topbg.png);
	background-repeat: repeat;
	background-attachment:fixed;
	background-position:top;
}

#site {
	height:100%;
	min-height:100%;
	width:70%;
	margin:0px; 
	padding:0px; 
	border-left: #000000 2px solid;
	border-right: #000000 2px solid;
	background-image:url(../images/sitebg.png);
	background-repeat: repeat;
	background-attachment:fixed;
	background-position:fixed;
	float:left;
}

Please let me know if you need the actual page code. Thank you.

  • 4 Contributors
  • 5 Replies
  • 98 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by PixelatedKarma
Member Avatar for tinimic

Try something like this:

<html>
<head>
<title>Height &amp; Alignment Conundrum</title>
<style type="text/css">
<!--
#wrapper {
	width: 100%;
	height: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
}
#topbar {
	height:25px;
	width:100%;
	border-bottom: #000000 1px solid;
	background-image:url(../images/topbg.png);
	background-repeat: repeat;
	background-position:top;
}
#site {	
	height: 100%;
	width:70%;
	border-left: #000000 2px solid;
	border-right: #000000 2px solid;
	background-image:url(../images/sitebg.png);
	background-repeat: repeat;
	background-attachment:fixed;
	background-position:fixed;
	float:left;
}
.clearfloat {
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
  <div id="topbar"></div>
  <div id="site" class="clearfloat"></div>
</div>
</body>
</html>
Member Avatar for jwd.adodis

Hello
Thanks for your sharing.it is very much elaborated and all can easily follow up
your tips.

Member Avatar for PixelatedKarma

Thank you very much

Member Avatar for MidiMagic

You can't span 100% of the viewport height. This is not provided.

There are too many variations in the following features to ever make anything able to fit the vertical size of the viewport:

- Graphics mode
- Screen Resolution
- Screen Aspect Ratio
- Which Browser Used
- Browser Viewport Aspect Ratio
- Restored-Down Browser Window (affects resolution and aspect ratio of viewport)
- Extra Toolbars Installed on Browsers (affects aspect ratio of viewport)
- Preserving Aspect Ratios of Page Elements

With all of these variables, they chose to make width have priority, and sacrifice the ability to specify heights to match the viewport.

Member Avatar for PixelatedKarma

Ya but I do have 100% height on the site now - and its working great (in both IE and firefox). As content is added or removed it will expand the window so it becomes scrollable but case and point a single three line article the template fills the whole viewport regardless of browser size; and it still looks great.

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.