CSS - Some Basic Positioning Questions And Help With Text Wrap

Hi,

Here is the problem I'm having:
This:
see attached cssprobl.jpg
should become:
http://www.thephotofactory.nl/csstest/cssprobl-goal.jpg

Here's the CSS code I have:
Code:

body{
	background-color:	#FFFFCC;
	margin:		0px;
	padding:		0px;
}

.holder{
	background-color:	red;
	width:			250px;
	height:		400px;
	float:			left;
	margin:		10px 10px;
	}

.img{
	padding:		0px;
	width:			200px;
	height:		200px;	
	margin:		20px 10% 0px 10% ;
	border:		2px white solid;
	}
	
h1{
	font:			35px Arial, Helvetia, sans-serif;
	color:			white;
	text-align:		center;
	margin-top:		10px;
	}

.omschrijving{
	background-color:	grey;
	font:			15px Arial, Helvetia, sans-serif;
	text-align:		left;
	margin-top:		10px;
	padding:		5px;
	}

.prijs{
	font:			25px Arial, Helvetia, sans-serif;
	color:			white;	
	text-align:		center;
	margin-top:		10px;	
	}

.dec{
	vertical-align:	super;
	font:			14px Arial, Helvetia, sans-serif;
	color:			white;	
	}
	
.euro{
	font:			14px Arial, Helvetia, sans-serif;
	color:			white;	
	}	

.omschrijvingholder{
	background-color:	black;
	width:			250px;
	height:		100px;	
	margin-top:		0px;
	}

.prijsholder{
	background-color:	green;
	width:			80px;
	height:		40px;	
	vertical-align:	bottom;
	float:			right;
	}

and this is one of the sections:
Code:

<div class="holder">
	<h1>Theeglas
	</h1>
	<div class="img">
		<img src="theeglas.jpg" alt="theeglas met bedrukking" title="theeglas met bedrukking" width=200 height=200></img>
	</div>
	<div class="omschrijvingholder">
		<div class="omschrijving">
			Een mooi theeglas met een doorzichtige bedrukking.
		</div>
		<div class="prijsholder">
			<div class="prijs">
				<span class="euro">&euro;</span> 9,<span class="dec">95</span>
			</div>
		</div>		
	</div>
</div>

SO: how do I get that green part exactly there (and without going outside the red box), and how do I wrap the text in the grey part around it? After 2 hours of trying all kinds of options I give up and call for help

Here is the full link:
http://www.thephotofactory.nl/csstest/valentijn.htm

Second problem: in IE the white border around the img is too low, leaving a red space. How to avoid that?

Thanks in advance,

Papermouse

PS How do I put an uploaded image in this message?

Hi all,

What does this mean?

H1 A:link { color:#fff }

- or -

.sectionhead H2 { font-size: 12px; }

I'm asking specifically about the space between the name of the selector and the HTML tag reference. What function does that space have? If it were a comma I would know, but I don't know what a space means. Sorry if totally dumb question.

Also, I keep seeing three-character hex values (e.g., #fff, #0cd, #078, etc). How are they used, what do they mean? I would have thought it meant to repeat the three characters to make the six (eg, #ffffff, #0cd0cd, #078078) but that appears not to be the case.

I've been looking around w3schools.org to find answers to questions like these, but no luck. Any suggestions?

Thanks to anybody who takes the time to answer!

Laura S.

I'm one of those people who has relied heavily on using tables to layout my pages in the past, but I've been in the process of redoing everything to use CSS instead...and for the most part I've been able to, but there are a few things that I'm not sure about. I also wonder if in some of these cases I'm trying to re-invent the wheel, or something like that

1. I have a few pages that I used tables to line up elements in what I guess would qualify as the same type of thing as 'tabular data' which is what I believe is what is considered still good practice to use tables for. Example:

Name|Age|Qualifications|

Bob|25|BA in Marketing, the University of Arizona...etc

Sue|30|Masters in English Lit, the University of Michigan...etc

etc, etc, etc....


So in this case, I could use CSS to do this, but after trying, it just doesn't seem to flow correctly. Now initially I was having a problem because apparently, setting the table width to 100% was spanning the entire width of the page even though I only wanted it to be in the middle column, so after some research, I discovered that setting the width to anything less than 100% (I use 99%) solved the problem. Am I right? Or am I just being naive?


2. Although I used style sheets with my pages already, there were many times when say I just wanted one little line to say be 'bold' so I use the <b></b> tags. Is mixing those tags with CSS a bad idea? Am I better off just making a class, say, '.bold' in my css file? Is there a danger of having an inline element have too many classes? ie <span class="bold center class1 class5 class9.....'>?

3. Is there such a thing as having too big of an external css file? I find myself trying to locate the same font style etc, that I've used for something else on another page, but finding the exact color, style, size etc, is becoming difficult and I find myself constantly adding new classes....Is this a bad thing?

4. When it comes to font sizes, should I stick to using just ONE way of measuring? i.e. using ONLY %, or ONLY px, or ONLY em? What are the dangers of mixing them together? Which way do you find is the most consistent for you?

I am trying to create a page to be printed out as a letter but I cannot for the life of me make the footers stick to the bottom when printed.

Here is the code:

Code:

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Header Test</title>
		<style type="text/css">
body {
	font-family:arial;
	font-size:10pt;
}
h1 {
	text-align:center;
	margin:0;
	padding:0;
}
div.letter {
	page-break-after:always;
}
.from {
	text-align:center;
}
.to {
	font-style:normal;
	margin-top:30px;
}
.date {

}
.footer {
	position:absolute;
	bottom:0;
}
		</style>
		<!-- compliance patch for microsoft browsers -->
		<!--[if lt IE 7]>
		<script src="/ie7/ie7-standard-p.js" type="text/javascript"></script>
		<![endif]-->
	</head>
	<body>
		<div class="letter">
			<h1>Stanley Road Baptist Church</h1>
			<address class="from">
				Stanley Road, Morecambe, Lancashire, LA3 1UP
			</address>
			<address class="to">
				Joe Bloggs
			</address>
			<p class="date">
				Friday 27th August 2004
			</p>
			<p>
				Dear Joe,<br />
				Blah blah blah.
			</p>
			<p>
				Yours sincerely,
			</p>
			<p>
				Matt Fletcher
			</p>
			<div class="footer">
				The Footer In Question
			</div>
		</div>
		<div class="letter">
                 ...
		</div>
		<div class="letter">
                 ...
		</div>
	</body>
</html>

I can get it to stick to the bottom of only the first page, but it doesn't appear on any others.

I am trying to figure out the best way to right justify an element in relation to other elements within a div. Here is an example:

<head>
<title>right position</title>
<style type="text/css">
#maindiv {width: 600px; background: #cccccc; padding: 10px; border: solid 1px black;}
.left {font-size: 2em;}
.right {padding-left: 350px}
</style>
</head>
<body>

<div id="maindiv">
<span class="left">hello world</span>
<span class="right">hi there</span>
</div>

</body>

This can't be the best way to right position something, can it? The only alternatives I can think of are absolute positioning or possibly floating, which seems unnecessarily complicated for something so simple. Can anyone suggest a better way of doing this? Ideally, the element would stay pinned to the right even if the left element changes widths.

Thanks in advance,

CSS Newbie!