DIVs are NOT DIVine!! (grrr) (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility



Message

Starhugger -> DIVs are NOT DIVine!! (grrr) (1/21/2008 16:38:49)

Can someone please help me get this freaking things to line up properly? I keep running into this problem and I just can't seem to get the hang of these things. I typically finally give up and put in tables instead. (I know, bite my tongue...) Tables may be un-PC, but at least they're predictable! But I would really like to learn to do this in CSS once and for all, so if someone could help me, I would greatly appreciate it.

I want to have 4 boxes -- 2 rows of 2 boxes each, side by side, grouped into one encompassing box area. For my current purposes, they will feature selected books (hence the CSS names below). I can't seem to get them to line up side-by-side, no matter what combination of "position: relative" or "vertical-align: top" or whatever that I put with them. My current attempt puts a "float: right" on the right-hand box that's placed inside a larger GroupBox, hoping that will help matters. But nooooooo.

Here's the CSS code: 

div.bigbookbox {
	width: 450px;
	padding: 15px;
	border: solid firebrick 2px;
	vertical-align: top;
	}
div.bookgroup {
	background-color: pink;
	text-align: left;
	vertical-align: top;
	}
div.bookright {
	position: relative;
	float: right;
	margin-left: 5px;
	width: 155px;
	}
div.bookspacer {
	height: 15px;
	}

div.bookbox {
	width: 150px;
	border: solid indigo 1px;
	padding: 5px;
	margin: 0;
	background-color: linen;
	text-align: center;
	vertical-align: top;
	}
div.bookbox p {
	font-size: .85em;
	font-family: tahoma,arial,sans-serif;
	font-weight: normal;
	font-style: normal;
	}


Above, I've added a pink background to BookGroup only for testing purposes, so I can see where it is and how it's lining up with the right-hand BookBox.

Here's the HTML: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Book Ads</title>
<link rel="stylesheet" type="text/css" href="../bookads.css">
</head>

<body>

<div class="bigbookbox">
	<div class="bookgroup">

	<div class="bookbox">
		<p>BOX 1 (TOP LEFT)</p>
	</div>  <!-- END BookBox -->

	<div class="bookright">
	<div class="bookbox">
		<p>BOX 2 (TOP RIGHT)</p>
	</div>  <!-- END BookBox -->
	</div>  <!-- END BookRight -->

	</div>  <!-- END BookGroup -->

<div class="bookspacer"></div>

	<div class="bookgroup">

	<div class="bookbox">
		<p>BOX 3 (BOTTOM LEFT)</p>
	</div>  <!-- END BookBox -->

	<div class="bookright">
	<div class="bookbox">
		<p>BOX 4 (BOTTOM RIGHT)</p>
	</div>  <!-- END BookBox -->
	</div>  <!-- END BookRight -->

	</div>  <!-- END BookGroup -->
</div>  <!-- END BigBookBox -->

</body></html>


What I get is this: (uploaded JPG should appear somewhere here)

Thanks in advance for the help.

Starhugger



[image]local://upfiles/15141/DC6154E72AC8483AA0BB09BCFDECA930.jpg[/image]



sticks464 -> RE: DIVs are NOT DIVine!! (grrr) (1/22/2008 8:59:58)

This may not be the best way but it works

html 
<div class="bigbookbox">
	<div class="bookgroup">
	<div class="bookbox1 bookbox">
		<p>BOX 1 (TOP LEFT)</p>
	</div>  <!-- END BookBox1 -->
	<div class="bookbox2 bookbox">
		<p>BOX 2 (TOP RIGHT)</p>
	</div>  <!-- END BookBox2 -->
<div class="bookspacer"></div>
	<div class="bookbox3 bookbox">
		<p>BOX 3 (BOTTOM LEFT)</p>
	</div>  <!-- END BookBox3 -->
	<div class="bookbox4 bookbox">
		<p>BOX 4 (BOTTOM RIGHT)</p>
	</div>  <!-- END BookBox4 -->
	</div>  <!-- END BookGroup -->
</div>  <!-- END BigBookBox -->


css 
div.bigbookbox {
	width: 450px;
	height:auto;
	padding: 15px;
	border: solid firebrick 2px;
	text-align:center;
	float:left;
	}
div.bookgroup {
	float:left;
	
	}
div.bookbox1, div.bookbox3 {
	float:left;
	}

div.bookbox2, div.bookbox4 {
	float:right;
	}
div.bookbox {
	width: 150px;
	border: solid indigo 1px;
	padding: 5px;
	margin: 0;
	background-color: linen;
		}
div.bookspacer {
	height:15px;
	clear:both;
}
div.bookbox p {
	font-size: .85em;
	font-family: tahoma,arial,sans-serif;
	margin:0;
	}


You can controll the location of bigbookbox with margins and the float style.



Tailslide -> RE: DIVs are NOT DIVine!! (grrr) (1/22/2008 9:41:54)

Edit: Was THIS what you were looking for?

edited to look more like the jpg example.



Starhugger -> RE: DIVs are NOT DIVine!! (grrr) (1/23/2008 0:02:51)

quote:

ORIGINAL: sticks464 


<div class="bookbox1 bookbox">

Hi Sticks,

Thanks for your reply. I'm curious about one line of code (above). I've never seen two different class styles given in the same class definition before. Is this standard? How does that work?

Thanks.

SH



Starhugger -> RE: DIVs are NOT DIVine!! (grrr) (1/23/2008 0:15:52)

quote:

ORIGINAL: Tailslide

Edit: Was THIS what you were looking for?

Yes! Thank you! I have a couple of questions so that I can understand better what you did (besides greatly simplifying it [:D] ).

  • Why do you have the BookRow overflow as hidden? What does that do? (I know it cuts off any overflow, but I'm not sure how it works in this example since there isn't really an overflow as such, unless I'm missing something) What would happen if it was not "hidden"?

  • Also, why is there an extra line for BookRow to define the height as 1%? What does that do, and why is it necessary to put that in?

  • Is the * html standard? What exactly does the * do? I've seen this before but never found a good explanation of it online.

  • And finally, I noticed you changed the DOCTYPE. I confess that even after all this time, I am still lost about which one to use most of the time. [&o] Why did you choose that particular one? Because of the * html line maybe?


Thanks very much!

SH



Tailslide -> RE: DIVs are NOT DIVine!! (grrr) (1/23/2008 3:02:37)

Hi SH

Ok in order:

1. Floated elements don't take up any space within their parent element (well ok I think actually they take up a single line - like literally a thin line) so you know how with Firefox etc a div will only expand to surround it's contents - well when you've got a float there, the parent div can't "see" it's contents and so won't enclose it. You can "clear" a float by having something after it in the normal flow of the page (e.g. not floated or positioned) and that will force the enclosing (and thus background showing) or, if all you've got is floats or the floats aren't cleared then you can trick the parent div into doing what you want - adding overflow:hidden will do this. It's not a perfect solution and needs to be checked in browsers to ensure that nothing hinky has happened due to using it (sometimes will) but generally it works fine.

2. The 1% height thing is specifically targeted at IE6 and under (thus the * html #divname) as IE has this nasty little thing called Haslayout which I'm not going to try to explain as I don't fully understand it myself. Basically it can be the cause of many weird IE bugs. Adding a specific width will sometimes solve the problem (you could try that in this case actually) or adding position:absolute will do it too. Another way is adding height 1% although you need to be careful that other browsers can't see this - thus the star hack to target IE6. You could also add it in using conditional comments if you prefer.

3. See above regarding the * html thing.

4. I didn't notice that you used the HTML 4 strict doctype - I just used the one that is standard when I create a new document. There's absolutely nothing wrong with using HTML 4 strict so feel free to use that if preferred.

5. All of the stuff I added in is absolutely valid (apart actually from Pink being an acceptable background colour!) although generally I'd have IE bug fixes in an IE stylesheet served by a conditional comment rather than use the star hack (* html).

6. In answer to your question to Sticks - yes it's perfectly valid to have two class names in a single instance separated by a space as he's done. It used to be that IE (oh funny old thing) wouldn't pick up on both class names but to my knowledge that works fine now.



d a v e -> RE: DIVs are NOT DIVine!! (grrr) (1/23/2008 3:23:15)

6. In answer to your question to Sticks - yes it's perfectly valid to have two class names in a single instance separated by a space as he's done. It used to be that IE (oh funny old thing) wouldn't pick up on both class names but to my knowledge that works fine now.

are you sure IE6 can deal with this? or was it only pre IE6 that wouldn't?



Tailslide -> RE: DIVs are NOT DIVine!! (grrr) (1/23/2008 4:04:34)

Yes - in fact, on checking, even IE5 and 5.5 interpret multiple classes like this too with no problem.

IE6 and under won't however support multiple class selectors such as p.black.bold as modern browsers would. Here's a good explanation:

http://www.interfacethis.com/misc/css-test/multiclass.html



Starhugger -> RE: DIVs are NOT DIVine!! (grrr) (1/23/2008 13:48:59)

Thank you Tail! This is wonderfully helpful.

quote:

2. The 1% height thing is specifically targeted at IE6 and under (thus the * html #divname) as IE has this nasty little thing called Haslayout which I'm not going to try to explain as I don't fully understand it myself. Basically it can be the cause of many weird IE bugs. Adding a specific width will sometimes solve the problem (you could try that in this case actually) or adding position:absolute will do it too. Another way is adding height 1% although you need to be careful that other browsers can't see this - thus the star hack to target IE6. You could also add it in using conditional comments if you prefer.

3. See above regarding the * html thing.

Okay, so the star thing is a hack. That's what I was wondering, since it's not strictly standard. I've wanted to avoid hacks if possible because it seems that every time a new browser version came out it would treat hacks differently. (read: IE) But if they're used to get past browser refusal to comply with standards, maybe two hacks make a right...

So the star is only read by IE6? Nice of M$ to leave us a back door into (some semblance of) workability that they didn't see fit to put there themselves... Can anyone recommend a good site that explains the star thing and how to use it? I've never found a good one one since it's almost impossible to do a search for an asterisk!

quote:

4. I didn't notice that you used the HTML 4 strict doctype - I just used the one that is standard when I create a new document. There's absolutely nothing wrong with using HTML 4 strict so feel free to use that if preferred.

Sigh... I wish someone would write an application that would analyze code and just tell you what to use.

quote:

5. All of the stuff I added in is absolutely valid (apart actually from Pink being an acceptable background colour!) although generally I'd have IE bug fixes in an IE stylesheet served by a conditional comment rather than use the star hack (* html).

Hey--what's wrong with pink??? [;)]

Is there a site that lists the IE bug fixes that can be applied to this extra stylesheet you are talking about?

Thanks again for the help!

SH



Starhugger -> RE: DIVs are NOT DIVine!! (grrr) (1/23/2008 13:57:17)

quote:

ORIGINAL: Tailslide

Yes - in fact, on checking, even IE5 and 5.5 interpret multiple classes like this too with no problem.

IE6 and under won't however support multiple class selectors such as p.black.bold as modern browsers would. Here's a good explanation:

http://www.interfacethis.com/misc/css-test/multiclass.html

This is fascinating! I've never seen this before or even heard of it. How many multiple classes can you list together? Just two, or more? This opens up a lot of possibilities. I get so frustrated because I usually wind up with a pile of classes that differ from each other only by one or two styles, with permutations and combinations of various colours, font sizes, etc. Being able to use multiple classes could make style choices a lot easier.

Again, is there a site somewhere that gives detailed information about this? Thanks for the link, although that example uses the p.black.bold kind of thing, and I'd like my code to be as compatible as possible with all browsers.

Thanks!

SH



Tailslide -> RE: DIVs are NOT DIVine!! (grrr) (1/23/2008 14:05:53)

The star hack targets IE6, 5.5 and 5 - all other browsers ignore it.

Personally I tend to use conditional comments to include an IE#-only stylesheet if necessary to add any extra specific IE rules to fix bugs. I'd only add it if absolutely necessary and I'd only add in the absolutely necessary rules into that stylesheet - if that makes any sense. Don't add it just for the sake of it. There are no real set chunks of anti-IE code that you can use - different occasions need different solutions.

Oh and I've just checked - in the example given above - adding width:100% to the bookrow div will sort the issue so you can remove the *html {height:1%} thing altogether!

More about Conditional Comments here: http://www.quirksmode.org/css/condcom.html

Star hack works fine for IE6 and under now.... but we can't be sure that IE13 (ha we'll be dead by then!) won't pick it up and do something stupid with it which is why I tend to do the conditional comment instead - it's more targetted. But there are arguments for and against each method - *shrug* - do whatever suits you!

For more about IE and other browser bugs: http://www.positioniseverything.net/ This is an excellent place to check out any weirdness!

Regarding DOCTYPES - well it's sort of the other way around. You decide what sort of markup you want to use and then add in the appropriate DOCTYPE.

Now something you might want to consider adding to a stylesheet every time you do one is a CSS Reset. All browsers have default settings for stuff like padding or margins on a paragraph (for example) and of course, these are all different. So to make life bearable what we do is add a CSS reset at the beginning of each stylesheet which removes all those defaults and sets everything to zero - gives us a level playing field. It used to be that we'd just add in 

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


Which is fine BUT it's quite extreme - soooo instead I add in this little chunk: 
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,p,pre,blockquote,ol,dl,address {margin:1em 0;}
li, dd, blockquote {margin-left:1em;}
html, body, fieldset {font:100.1%/120% Verdana, Arial, Helvetica, sans-serif;}
input, select, textarea {font-size:100.1%;}
h1, h2, h3, h4, h5, h6 {font-size:100%;}
form label{cursor:pointer;}
fieldset, img{border:none;}
table{border-collapse:collapse; border-spacing:0;}


At the start of every stylesheet - it sets up nice neat defaults for the stylesheet - getting rid of unwanted margins on most but not all elements. Makes life a lot easier.




Starhugger -> RE: DIVs are NOT DIVine!! (grrr) (1/23/2008 14:53:32)

Tail, thank you so much!

quote:

Oh and I've just checked - in the example given above - adding width:100% to the bookrow div will sort the issue so you can remove the *html {height:1%} thing altogether!

Thanks for checking back about this.

quote:

More about Conditional Comments here: http://www.quirksmode.org/css/condcom.html

Thanks! That's very helpful.

quote:

Regarding DOCTYPES - well it's sort of the other way around. You decide what sort of markup you want to use and then add in the appropriate DOCTYPE.

But that's just the thing -- I've never found a completely clear explanation or formula to figure out which is the appropriate DOCTYPE. I've seen some good sites/pages about it but it always leaves me with more questions. It would be so nice if someone came up with a program that would scan your code and figure out which is the appropriate DOCTYPE. (I know: whine, whine whine...) [:(] 

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,p,pre,blockquote,ol,dl,address {margin:1em 0;}
li, dd, blockquote {margin-left:1em;}
html, body, fieldset {font:100.1%/120% Verdana, Arial, Helvetica, sans-serif;}
input, select, textarea {font-size:100.1%;}
h1, h2, h3, h4, h5, h6 {font-size:100%;}
form label{cursor:pointer;}
fieldset, img{border:none;}
table{border-collapse:collapse; border-spacing:0;}

Hmmm... That might explain why I always seem to get a space at the top of the window in IE7 (and possibly other versions). Great idea. Why do you use 100.1% for some of them though? And what is meant by html, body, fieldset being set to 100.1%/120%?

Thanks again!

SH



Tailslide -> RE: DIVs are NOT DIVine!! (grrr) (1/23/2008 15:12:35)

Ok so here's the simple way to decide what doctype you should use.

There is no practical advantage in using XHTML strict over HTML stict - I use XHMTL strict because, frankly I thought I was being clever back when I started out and I stick with it out of habit even though I know there's no advantage. I quite like the syntax.

So... whichever you fancy really. I quite like the syntax of having closing tags on absolutely everything. If you've got better things to think about then don't bother with the XHTML - stick with HTML.

BUT I feel that the important thing is to use Strict rather than Transitional in whichever flavour of markup you choose. The difference is that using Transitional you can get away with using stuff like inline fonts and other old-school styling. I don't like that sort of added rubbish as I always use CSS anyway so I might as well use Strict. I feel that forward compatibility is likely to be better using Strict too (can't prove that though).

If you feel like you're starting to get to like the whole valid code, semantic markup, css thing then you might as well go for Strict generally as that'll be the type of code you'll be using anyway. If frankly you just don't care then use Trans.

The 100.1% thing was to combat an Opera bug - it's probably not necessary anymore as Opera users tend to update their browsers fairly quickly so you could replace it with 100%.

The font:100.1%/120% is just an efficient way of writing the font-size (first figure) and the required line-height (second figure).



Starhugger -> RE: DIVs are NOT DIVine!! (grrr) (1/23/2008 16:15:40)

quote:

So... whichever you fancy really. I quite like the syntax of having closing tags on absolutely everything. If you've got better things to think about then don't bother with the XHTML - stick with HTML.

Thanks for the guidelines about choosing a DOCTYPE! That's helpful.

I do try to use the XHTML closed tags as much as I can. However, I started the site using Frontpage before I really knew how to do better quality coding. I have so many pages on my site now and most of them (especially the old ones) are such a dog's breakfast under the hood that I'm embarrassed for anyone to look there. Unfortunately I don't have time to go through and recode everything properly. I've been gradually working on building a CSS-driven site, but it's very slow going and I can only find time to work on it once in a blue moon, and by then I start thinking maybe I should play around with a new layout or look, and then I get sidetracked, and then I wonder why it takes me so long to recode the blasted thing... [&:]

At any rate, because of the wildly inconsistent coding that's there now, Transitional is probably the better way for me to go (which is what I'm using now). I still use FP as an editor (just because it's familiar and I can work quickly with it), but other than the FP theme and includes, I don't really use the features anymore (hoping to minimize the dirty code). I do try to code more carefully on new pages, but FP often does weird things to it by the time it generates the actual pages. (I was never able to completely validate FP code, no matter how strict I was with the code I created.) And sometimes it's just faster and easier to let FP do dirty coding when I'm in a hurry. (baaaad webmaster)

Many thanks again for explaining all this and helping me figure this out! [:)

Starhugger



Tailslide -> RE: DIVs are NOT DIVine!! (grrr) (1/24/2008 2:36:02)

No problem - and don't think that XHTML is any better than HTML - 'cos it ain't! So if by any chance FP is happier using HTML then feel free to use that! I have a feeling that FP will do it's best to mess up anything though - so all you can do is the best you can.

Validating is a useful tool (bit like spell-checking) but it's not an end in itself. It's perfectly possible to have a valid site that looks like hell in various browsers so I think that a combination of trying to use valid code (just to give a good base-line and make life easier) and checking in various browsers as you go along (at least IE7, IE6, FF and Opera) will give you the results that you want in the long-term.



caz -> RE: DIVs are NOT DIVine!! (grrr) (1/24/2008 8:39:27)

If you use FP themes then your code will be altered. FP Includes on the other hand will validate OK so long as you catch any stray <p>'s in code view. Otherwise if you just use code view to write your code then FP will not interfere.



Starhugger -> RE: DIVs are NOT DIVine!! (grrr) (1/29/2008 13:35:31)

Hey Caz. Yes, the Includes just seem to insert your code into the place where you've put the Include statement. And yes, the FP themes do seem to be the culprit of altered and adulterated code. Any year now, I'm going to figure out how to find 30 more hours in the day and I'll be able to completely recode my site without FP themes. Sigh... [&:]

SH



caz -> RE: DIVs are NOT DIVine!! (grrr) (1/29/2008 15:23:40)

Go on, SH bite the bullet and ditch the themes - I'm sure you could code your own templates to replace them and then you won't need to take so long in revamping your site. [:D]



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.109375