12 replies [Last post]
jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 7 years 29 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

I've generated many a layout w/ the CSS Layout Generator, but i have never really examined them in the past as i am now that i'm actually trying to do things properly. before i was satisfied if, for example, my left, main, and right columns looked okay in both IE and FF, nevermind how i arrived at an acceptable "look". but now, i want to know the "right" way.

i'm using a 3 column style layout w/ header and footer. for identification purposes, i've currently got each div a different color so i can easily see the area that they occupy. my left, main, and right columns all have "white space" beneath them before the colored "footer" div area. what is the proper way to handle this?

from my beginners perspective, i can think of a few ways to attempt to "close the gap".

1) to go to the stylesheet and give the html, body selectors a color value matching one of my intended ultimate colors for one or all of the columns-- this would cause that surrounding white space area to appear to be part of those columns.

or
2) i could try to use padding and margins to cause the columns to extend down into the footer-- a practice which i've tried before w/out success, so i assume that is not the desired option.

is there another way that i haven't thought of which is the correct method to arrive at a nice smooth looking layout w/out gaps between the column divs?

my guess is the answer to that question is the very essence of what many CSS developers strive to achieve-- proper use of floats, positioning, and manipulation of the box model to ensure that there are no gaps, that everything has its place, and on top of it all, that it "looks good".

so, as simple and at the same time complex as the issue is, i ask-- what should i do to get rid of the white space gaps? if i need to provide more info, then what should i have considered before posting this inquiry so that i would have come here knowing what i needed to tell you? i'm not trying to sound profound-- it's just that i feel i'm on the edge of a breaktrhough (however slight it may be), and , if for no other reason than i'm just trying to get better at having the bases covered on my own.

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

"normal" whitespace in layout from layout generato

We would need to know the conditions of the layout the structure and the rules applied to various elements without which all we would be able to do is give you some clues as to what can cause these problems such as margins that need to be zeroed or a problem with collapsing margins where the inner elements margin will neutralize the parents and effectively push through forcing the group away from the other div.

One thing that helps in determining these things is to use borders to attempt to show where elements really are positioned , if you now have the webdev toolbar installed in FF the most useful tools are the
outline block level elements and then the view style information which will allow you to hover over outlined blocks and see just what div/element you are looking at. If you do this with your white space you will be able to tell what that space belongs which should help in working out what needs to tackled.

If you place borders on elements in your CSS to highlite them you may well find that the gaps disappear if this the case then you likely have collapsing margins at work as borders will prevent margins collapsing.

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

jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 7 years 29 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

"normal" whitespace in layout from layout generato

i have actually used one of your suggested methods before when trying to determine what is what in the general layout-- which definitely helped in that situation! but, when i tried it just now on this, a newer layout (using the equivalent of <style="border: thick blue ridge;"> added to my stylesheet), it causes the columns to get way out of whack.

LEVEL 0: div#pagewidth
LEVEL 1: div#header
LEVEL 1: div.clearfix#wrapper
LEVEL 2.2: div.clearfix#twocols
LEVEL 3: div#maincol
LEVEL 3: div#rightcol
LEVEL 2: div#leftcol
LEVEL 1: div#footer

i put that on paper, indenting each level, so i could see the arrangement a bit better, and get a better mental picture of what resides where.

here's my stylesheet

/* generated by csscreator.com */ 
html, body{
	color: #E3E3E3;
	font-family: sans-serif;
	font: "Trebuchet MS", Verdana, Arial, geneva, helvetica;
	font-size: small;
	padding: 0;
} 

#pagewidth{ 
 width:90%;  
} 
 
#header{
	position: relative;
	height: 200px;
	background-color: Background;
	width: 100%;
	border: medium blue ridge;
} 
 
#leftcol{
	width: 20%;
	float: left;
	position: relative;
	background-color: Maroon;
	border: medium blue ridge;
}
 
#twocols{
 width:80%; 
 float:right; 
 position:relative; 
 border: medium blue ridge;
  }
 
#rightcol{
 width:31%; 
 float:right; 
 position:relative; 
 background-color:#505050;
 font-size: smaller;
 border: medium blue ridge;
 }
 
#maincol{
	background-color: Blue;
	float: left;
	display: inline;
	position: relative;
	width: 69%;
	border: medium blue ridge;
}
 
#footer{
 height:25px; 
  background-color:#000000; 
 clear:both;
border: medium blue ridge;
 } 
 
/* END ID SECTION */

/* NAVIGATION */
a:link {color: lightgrey;}
a:visited {color: darkgrey;}
a:hover {color: yellow;}
a:focus {background: darkslategrey; color: white;}

.nav {
	font-weight: bold;
	border: thin darkblue ridge;
	margin-bottom: -.5em;
	padding-left: .5em;
	}

p.nav:link {
	color: lightgrey;
	margin-bottom: -.5em;
	padding-left: .5em;
	}
p.nav:visited {
	color: darkgrey;
	margin-bottom: -.5em;
	padding-left: .5em;
	}
p.nav:focus {
	background: darkslategrey;
	color: white;
	margin-bottom: -.5em;
	padding-left: .5em;
	}

p.nav:hover {
	color: yellow;
	margin-bottom: -.5em;
	padding-left: .5em;
	border: thin blue outset;
	}
p#nav3:hover {
	color: yellow;
	margin-bottom: -.5em;
	padding-left: .5em;
	border: thin blue outset;
	}
p#nav4:hover {
	color: yellow;
	margin-bottom: -.5em;
	padding-left: .5em;
	border: thin blue outset;
	}
#nav3 {
	border: thin silver ridge; 
	background-color: firebrick;	
	margin-bottom: -.5em;
	padding-left: .5em;
	}
#nav4 {
	border: thin silver ridge; 
	background-color: darkblue;	
	margin-bottom: -.5em;
	padding-left: .5em;
	}

#navfoot {
	border: thin blue ridge;
	color: rgb(0, 10, 190);
	font: medium sans-serif;
	font-style: italic;
	font-weight: bold;
	padding-left: 1em;
	padding-right: 1em;
	}
	
/* END NAVIGATION */

.strem {
	font-size: 110%;
	font-weight: bold;
	}
.strem2 {
	font-size: 110%;
	font-weight: bold;
	font-style: oblique;
}
.indent {
	padding-left: 1em;
}

.antihead {
	margin-top: -.3em;
	}
 
 /* *** Float containers fix:
 http://www.csscreator.com/attributes/containedfloat.php *** */ 
.clearfix:after {
 content: "."; 
 display: block; 
height: 0; 
 clear: both; 
 visibility: hidden;
 }
 
.clearfix{display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */  


 
 /*printer styles*/ 
 @media print{ 
/*hide the left column when printing*/ 
#leftcol{display:none;} 

/*hide the right column when printing*/ 
#rightcol{display:none;} 
#twocols, #maincol{width:100%; float:none;}
}

and my XHTML

<!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" lang="en" >
<head>
<title>Club Rive! San Antonio's Hottest Dance Party on the Riverwalk</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<meta name="generator" content="www.csscreator.com" />

<link rel="stylesheet" href="css/rive.css" type="text/css" />
</head>
<body>

<!-- BEGIN 'PAGEWIDTH' CONTAINER DIV  'LEVEL-0' -->
<div id="pagewidth" >

<!-- BEGIN 'HEADER' DIV 'LEVEL1'--> 
	<div id="header" >
	
	 <h1>Club Rive Logo Will Appear Here</h1> 
	 
<!-- END 'HEADER' DIV -->	 
	 </div>
		
<!-- BEGIN 'WRAPPER' 'CLEARFIX' DIV 'LEVEL1.2.2' -->		
			<div id="wrapper" class="clearfix" > 
			
<!-- BEGIN 'TWOCOLS' 'CLEARFIX' DIV 'LEVEL2.2' -->			
		<div id="twocols" class="clearfix"> 
		
<!-- BEGIN 'MAINCOL' DIV 'LEVEL3' -->		
			<div id="maincol" >
			
			 <h1>Club Rive</h1>
<p>The San Antonio Riverwalk's premiere night club since December of 2002
Club Rive welcomes you into <span class="strem">four amazing clubs in one</span>. We elevate the multi-concept club model to a new plateau.</p>

<p><span class="strem2">the Bubble Room</span> -- the first room entered as you walk in to Club Rive. Named for its mesmerizing water wall behind the bar, the Bubble Room offers some of the best live music in Texas and is the only such venue in downtown San Antonio</p>

<p><span class="strem2">The Sky Dome</span> -- features the tantric beats of cutting-edge dance tracks served up in an awe-inspiring atmosphere.</p>

<p><span class="strem2">TABU</span> -- offers a more intimate dance club setting, along w/a seductive VIP room and the sensuous Rive dancers right on top of the bar</p>

<p><span class="strem2">HUSH Lounge</span> -- the place to relax with a hookah and enjoy a martini upstairs while stretching out on one of the luxurious sofas</p>

<!-- END 'MAINCOL' DIV -->			 
			 </div>
			 
<!-- BEGIN 'RIGHTCOL' DIV 'LEVEL3' -->			 
			<div id="rightcol" >
			
			<p class="strem">Hours of Operation:</p>

<p class="strem indent">Doors: 8:30pm Wed - Sat<br />
<span class="indent">Open till 2:15am Wed &amp; Thur<br /></span>
<span class="indent">Open till 3:00am Fri &amp; Sat</span></p>
<p class="strem">Club Rive is the Riverwalk's only after hours party!</p>
<p>Please check the calendar page for special events, band listings, drink specials and other detailed information.</p>
<p>Sign up for the Club Rive Mailing list, and receive a pass for FREE ADMISSION!</p>  
<p>*Offer not valid for Thursdays</p>
<p class="strem">Join the Club Rive mailing list</p>
<form name="ccoptin" action="http://ccprod.roving.com/roving/d.jsp" target="_blank" method="post" id="dancers">
Email:<br />
<input type=text name="ea" size=25 class="formbg" />
<input type=hidden name="m" value="1011233438393" />
<input type=hidden name="p" value="oi" /><br />
<input type=submit name="go" value="Go" />
</form>
			 
<!-- END 'RIGHTCOL' DIV -->			 
			 </div>
			 
<!-- END 'TWOCOLS' DIV -->			 
		</div> 
		
<!-- BEGIN 'LEFTCOL' DIV 'LEVEL2' -->		
			<div id="leftcol" > 
			
<p class="nav"><a href="about.html" target="_parent">About</a></p>
<p class="nav"><a  href="http://www.huntcal.com/cgi/calview.cgi/Club_Rive/Club_Rive?vm=r-l" target="_blank">Calendar</a></p>
<p class="nav"><a href="bubbleroom.htm" target="_parent">Bubble Room</a></p>
<p class="nav"><a href="tabu.htm" target="_parent"> Tabu</a></p>
<p class="nav"><a href="skydome.htm" target="_parent">Sky Dome</a></p>
<p class="nav"><a href="hush/index.htm" target="_parent"> Hush Lounge</a></p>
<p class="nav"><a href="special.htm" target="_parent"> Special Events</a></p>
<p class="nav"><a href="gallery.htm" target="_parent">Photo Gallery</a></p>
<p class="nav"><a href="links.htm" target="_parent">Links</a></p>
<p class="nav"><a href="contact.htm" target="_parent">Contact</a></p>
<p class="nav" id="nav3"><a href="vip.html" target="_parent">V.I.P./ Bottle Service</a></p>
<p class="nav" id="nav4"><a href="corp.html" target="_parent">Party/ Corporate Booking</a></p>
<p id="navfoot">San Antonio's Hottest Dance Party<br /> on the Riverwalk!</p>
</div><!-- CLOSE LEFT COL DIV -->
			
<!-- END 'LEFTCOL' DIV -->			
			</div>

<!-- END 'WRAPPER' 'CLEARFIX' DIV -->
</div>

<!-- BEGIN 'FOOTER' DIV 'LEVEL1'-->
	<div id="footer" > 
	
	<p>Club Rive / TABU
245 E. Commerce
(in the Presidio Plaza)
San Antonio, Texas 78210
210-222-4700</p>
	
<!-- END 'FOOTER' DIV -->	
	</div>
	
<!-- END 'PAGEWIDTH' DIV -->	
	</div>
</body>
</html>

sorry for the LENGTHY post, but i couldn't think of any other way to show you w/out it. this is kind of embarassing-- i feel like i just dropped my pants in front of you all!
:oops:

edit:
oh, and thanks for the instructions about the FF tools. they are definitely going to help a TON

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

&quot;normal&quot; whitespace in layout from layout generato

Jeff you need to apply some logical debugging to matters to try and establish where the problem is stemming from .

For starters try commenting out all your content in the main layout divs , that's all the <p>'s etc and see if that cures the problem if it does then you will know that these are the elements causing the problem and will need to look at the margins on these or at possibly adding padding 1px to either top or bottom of the main layout divs which will counter the collapsing margin effect as I mentioned earlier , both border and padding will un-collapse a margin. With a border used to highlite elements don't use 'Thick' as a border width can easily disrupt a layout, use the smallest border you can: 1px solid red.

If this is not the solution you need to apply the same principles to the stylesheet rules comment out all unnecessary rules until the problem goes away then start adding back rules checking after each one to see if the problem has re-appeared this way you will isolate the rules that are causing the problem and then be able to determine a solution or at least be aware of what is causing it and be able to either ask specifically or know what to hunt for.

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

jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 7 years 29 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

&quot;normal&quot; whitespace in layout from layout generato

hugo, i'll do as you suggest for sure-- but, let me first clarify-- how should i phrase this... am i indeed facing a problematic relationship between my html and CSS? or, am i seeing something that should go away if i were to add, for example, more content?

i ask the latter of those questions because it seems as though usually when i start adding content to a layout generated by CSS Layout Generator, the awkward positioning of things seems to gradually go away. is that purely coincidental?

wow, i really do rely on that generator, dont i! someday, i'm going to have to stop using that crutch.

i was going to start a new topic, but since it's pretty much relevant to this one, i'll ask here. when we talk of "white space", what are we really describing? i mean, as far as i know, any extra white space is ignored by a browser when displaying html. for example, it doesn't matter how many times you start a new line in the html code, in mid paragraph for example, it will not really cause a line break until the </p> tag is hit and another <p> is started, or a <br /> is used. so, why then is there a "white space issue" at all?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 3 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

&quot;normal&quot; whitespace in layout from layout generato

Hi jsabarese,
You have closed the leftcol twice:

Quote:

</div><!-- CLOSE LEFT COL DIV -->

<!-- END 'LEFTCOL' DIV -->
</div>

Also if you add borders to the columns then it is best to make allowances for them by reducing the widths of the columns.

Hope that helps

jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 7 years 29 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

&quot;normal&quot; whitespace in layout from layout generato

Tony wrote:
Hi jsabarese,
You have closed the leftcol twice:
Quote:

</div><!-- CLOSE LEFT COL DIV -->

<!-- END 'LEFTCOL' DIV -->
</div>
wow! i totally missed that!

i guess that would explain why the FF HTML Validator is reporting the final div as unexpected

i wish i knew for sure if i added that div or not. i honestly don't recall adding anything other than style and content to this layout (in other words, no <div>s for any reason)

is it possible that the generator put the extra one in there?

EDIT:

now that i take a look at where it is, it IS possible that i put it threre unknowingly-- because i copy/ pasted the navigation from a previous version of this doc. hmm... i'll dig around and see if removing that fixes it!

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

&quot;normal&quot; whitespace in layout from layout generato

Smile

Hugo wrote:
n the tag or an extra tag,


As I mentioned in the other thread..

With problems it's more often than not a case of the Butler really did do it, one tends to overlook the most obvious cause for something more complicated when 9 times out of ten it it was the most obvious suspect.

Always worth eliminating all the these thing first before delving deeper although I admit I may have thrown a red herring (in classic detective writers style) with the white space issue and sidetracked you.

I didn't look at the code above particularly, but wanted to give you some idea of methods to track down problems with divs one could employ a sort of card counting technique for every open div you increase the count by one for every closed div you decrease the count total by one which should leave you back at zero.

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

jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 7 years 29 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

&quot;normal&quot; whitespace in layout from layout generato

hugo, i usually understand your replies and, in most cases, my knowledge is increased by at least 110% afterward-- however, i'm a bit unclear in my understanding of this reply above in particular. not the "obvious suspect" part, but the "card counting" bit. could you try another approach at explaining what you mean by the part about

Quote:
one could employ a sort of card counting technique for every open div you increase the count by one for every closed div you decrease the count total by one which should leave you back at zero.

thanks again!

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

&quot;normal&quot; whitespace in layout from layout generato

The obvious suspect reference was just by way of trying to say that it's easy to assume a problem must be more involved than it really is ; case in point: I broke a layout the other day, went completely haywire on me and I had changed nothing ! so set about looking through the properties scratching my head looking for the problem over and over, of course if only I had stopped and thought things through, for a layout to break in such a total way meant that my rules had suddenly ceased to apply and what I was looking for was a missing closing curly brace on a rule set. As I don't make syntax errors Smile I had assumed must have been something else, my pride got in the way. I had in fact been moving a ruleset around and cut 'n' pasted hastily missing the closing brace.

The Div problem was a case in point the most obvious reason was the one an extra div.

I find if I need to check through divs quickly to see if the are all paired then I can start a count of 1 incrementing by 1 for each open div and as I read a closing div I decrease the running count by one at the end of the page or section if the divs are balanced you should have a count of zero.

It's not necessarily that useful, but I remember utilizing it on a page that was not that well commented (on a blog I think and having to read the raw code without the aid of html-tidy )

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

jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 7 years 29 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

&quot;normal&quot; whitespace in layout from layout generato

hugo, oh! i see what you are saying now. it makes total sense. i have never been much of a card player, so i was afriad i was going to be left out of that one. but, if it's just a simple matter of something like, "for every open div, there must be an equal and opposite closing div"... isn't there some rule of physics that sounds like that? makes sense though. thanks. definitely a good "rule of thumb" for error checking!

jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 7 years 29 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

SOLUTION

if i had opened my eyes and read the page at http://www.csscreator.com/ , i would have seen that my problem w/ column lengths (the whitespace i was describing) was already covered there. for anyone else having problems w/ their layout / columns not being long enough, i suggest you go to the root page and read about the Layout Generator's latest revision.

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

&quot;normal&quot; whitespace in layout from layout generato

Quote:
for every open div, there must be an equal and opposite closing div"... isn't there some rule of physics that sounds like that?

Smile Newtons third law of motion I think:
"For every action there is an equal and opposite reaction"

For every open div there must be an equal paired closing div.

This is one of the immutable laws of HTML.

Not only am I a mean poker player I am also a first rate pool/snooker player through applying Newtons laws. Laughing out loud

Right, white space at the bottom, Faux columns was designed to deal with the poor handling of CSS height and is a technique most useful.

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