7 replies [Last post]
faheem
Offline
newbie
Last seen: 10 years 45 weeks ago
Joined: 2006-02-22
Posts: 9
Points: 0

I'm newbie to css. Please bear with my qn.

I'm trying to start working on the boxed model but has a little problem.

In the following example, the background color used in the left navigation & the content does not carry over the entire height. What should I do to accomplish that? Pleas help me

Thanks a lot

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>2 col layout with equalising columns and footer - content first</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

/* mac hide\*/
html, body {height:100%}

/* end hide */

html,body {
	padding:0;
	margin:0;
}

body{	
	text-align:center;
	min-width:780px;/* for mozilla*/
	background-color: #FFF;
	color: #000000;
}

#outer{
	height:100%;
	min-height:100%;
	width:780px;
	border-left:1px solid #000;
	border-right:1px solid #000;
	color: #000000;
	text-align:left;
	position:relative;
	margin:auto;
}

#row1 {
   background: black;
   color: white;
   top: 0px
} 

#row2 {
   background: red;
   color: black;
} 

#footer {
	width:780px;
	clear:both;
	height:25px;
	background-color: #FF8080;
	left:0;
	bottom:0;
	position: absolute;
}

#leftNav{
   background: yellow;
   width: 150px;
   float: left;
}

#content{
   background: green;
   padding-left:100px;
}

</style>

</head>
<body>
   <div id="outer"> 
   
      <div id="row1">
         Row 1 .. Row 1.....
         Row 1 .. Row 1.....
         Row 1 .. Row 1.....
      </div>
      
      <div id="row2">
         Row 2 .. Row 2.....
      </div>

      <div id="leftNav">
         left..left..left..left..
         left..left..left..left..
         left..left..left..left..
      </div>

      <div id="content">
         content...content...content...content...content...
         content...content...content...content...content...
      </div>

      <div id="footer">
         footer footer footer footer 
      </div>

   </div>
</body>
</html>

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 45 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

100% Background color

You will need to explain exactly what it is that you mean by "does not carry over over the entire height" what is the entire height? entire height of what?

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

faheem
Offline
newbie
Last seen: 10 years 45 weeks ago
Joined: 2006-02-22
Posts: 9
Points: 0

100% Background color

Let's say
The outer div is of height 100%

the height of row1 = 25px
the height of row1 = 25px
the height of footer = 25px
(The footer sits at the bottom of the view port which is fine)

then the remaining height is allocated for the left nav & content section

I don't have specified the height for leftNav but I expect the remaining height should be allocated for this. I have specified the background color for leftNav but it just appears only a little area where the text. I want to see the background color to the full height.

#leftNav{
background: yellow;
width: 150px;
float: left;
}

I feel I'm going stupid but donno what I'm doing wrong

Help me pls

Thanks

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 45 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

100% Background color

Have a google for 'Faux columns' this is what you're after, it creates the illusion of full height columns by placing a background the same width as the column but on the parent div in other words sitting behind the left column.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

faheem
Offline
newbie
Last seen: 10 years 45 weeks ago
Joined: 2006-02-22
Posts: 9
Points: 0

100% Background color

Thanks a lot

hmm. I read about that already.. but I thought there must be some straight forward way to get the job done.

Anyway I'm very confused at the moment on how to use. Any simple snippet with a complete html page would be very helpful.

Thanks a lot

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 18 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

100% Background color

i used faux colums on www.jdtrader.com/admin17

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 6 hours 45 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

100% Background color

Another example of faux columns in action.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 45 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

100% Background color

Wow two examples to go with the ALA article. You're spoilt for choice me son. Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me