4 replies [Last post]
s91066
s91066's picture
Offline
newbie
Last seen: 11 years 3 weeks ago
Timezone: GMT+2
Joined: 2010-07-14
Posts: 8
Points: 13

Hallo,
I have a page that I try to construct from scratch using css2.
So far I have minor issues, that I solved. But this one drives me crazy.
In the main section of the page, I have a container and 3 floated elements. The first 2 are aligned perfectly. The 3rd one has a large text. And there I have the problem. The div that contains the text is expanded with the text, instead of to be shrinked!

In the attached image, I want to text to be moved from its location to the blue area.

What am I doing wrong?
htmlissue.png

HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> 
<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="CONTENT-LANGUAGE" content="el">
	<title>My Title</title>
	<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<div id='pageid'> 
	<div id='header'>
		<div class='Logo' onclick='document.location.href="/";return;'>&nbsp;</div>
		<div class='Logos2'>&nbsp;</div>
	</div>	<!--<div class='clearence'></div>-->
	<div id="horNavigation"> 
		<ul> 
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 1</a></li>
		</ul>
	</div> <!-- horNavigation --> 
	<div id='mainContainer'>
		<div id='leftMainCont'> 
			<div id='divData'>
				<h1>Content Title</h1>
				<div id='divPhotos'>
					<span class='brdImg'><img src='/images/2010.jpg' width=150 height=225 alt='Image Title'><img src='/images/bottom_image_100.jpg' width=150 height=100 alt='Bottom Image alt'>
					</span> 
				</div> <!-- divPhotos -->
				<div id='divStats'>
					<table> 
						<caption>Personal Data</caption>
						<tbody> 
							<tr> 
								<td>Nationality</td>
								<td>GB</td>
							</tr> 
							<tr> 
								<td>Age</td> 
								<td>30</td>
							</tr> 
							<tr> 
								<td>Marital Status</td> 
								<td>Single</td> 
							</tr> 
							<tr> 
								<td>Children</td>
								<td>-</td>
							</tr> 
						</tbody>
					</table> 
					<table> 
						<thead> 
							<tr> 
								<th colspan='3'>Other Personal Data</th> 
							</tr> 
						</thead> 
						<tbody> 
							<tr> 
								<th>&nbsp;</th> 
								<th>2009</th>
								<th>2010</th>
							</tr>
							<tr> 
								<td>Queries</td>
								<td>0</td> 
								<td>180</td> 
							</tr> 
							<tr> 
								<td>Solved Issues</td>
								<td>0</td> 
								<td>468</td> 
							</tr> 
							<tr> 
								<td>Projects</td>
								<td>0</td> 
								<td>8</td> 
							</tr> 
							<tr>
								<td>Contracts</td>
								<td>0</td> 
								<td>8</td> 
							</tr> 
						</tbody>
					</table> 
				</div> 
				<div id='divHst'>
					<h1>CV</h1>
					<p>Nunc turpis orci, accumsan et dapibus non, eleifend eget urna. Fusce convallis euismod urna, eu volutpat purus vehicula a. Nulla ultricies, lectus eget convallis dictum, dui turpis volutpat dolor, sit amet consequat nulla diam non purus. Aliquam imperdiet, eros id tristique accumsan, arcu ipsum ultrices dui, a mollis purus arcu at urna. Vestibulum consequat eros a neque laoreet at rhoncus odio consectetur. Maecenas sed neque ut eros adipiscing ultrices vel quis massa. Praesent eleifend eros vel arcu convallis fringilla porta odio lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In lacus lectus, varius non aliquam pharetra, porta vitae quam. Integer urna eros, lacinia ut ultricies sit amet, ultricies ut libero. Morbi malesuada vestibulum metus mattis pellentesque. Nunc vehicula, ante eget condimentum interdum, lacus erat cursus felis, et viverra nibh odio at libero. In a sapien felis, ut varius augue. Ut nulla tortor, mollis non vestibulum id, volutpat at sapien. Sed consectetur odio quis mi suscipit in sodales lorem ullamcorper. Vestibulum consectetur molestie purus vitae tincidunt. Nam ac massa dolor, nec vehicula enim. Mauris magna elit, vestibulum ac porttitor ac, lacinia vel augue. Proin ante enim, fringilla quis dignissim non, vehicula ac odio.</p>
					<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris gravida orci in diam tempus posuere. Duis ut dolor quis nulla commodo feugiat. In consectetur lacus vel eros molestie cursus. Curabitur gravida faucibus aliquam. Nulla malesuada risus id purus eleifend ultrices. Nulla nunc dui, tristique sed gravida id, scelerisque eu massa. Nunc purus est, consequat feugiat dignissim in, blandit id justo. In nisi eros, consectetur in porta sed, egestas et nunc.</p>
					<p>Duis mattis, dolor eget viverra tempus, enim lorem consectetur lacus, sed placerat libero risus in tellus. Sed pretium neque dolor, eu vehicula mauris. Phasellus quis arcu metus. Quisque scelerisque arcu sit amet neque consectetur rhoncus. Proin ut cursus elit. Sed at sapien ut urna facilisis accumsan. Praesent nunc tellus, pulvinar ut bibendum tincidunt, feugiat ut tortor. Nulla velit lorem, vulputate sed viverra eget, ullamcorper nec urna. Suspendisse a quam eget nisl suscipit condimentum. Sed porta, dolor ac porttitor imperdiet, sapien justo commodo nulla, a feugiat odio est ac mauris. Vivamus gravida ornare posuere. Etiam quis ipsum eget eros pulvinar scelerisque. Nullam molestie imperdiet consequat. Curabitur suscipit porttitor semper. Donec neque sem, pretium eu lobortis eget, dignissim eu dui. Nam dictum feugiat libero sed condimentum. Donec odio mi, hendrerit vestibulum convallis ut, fermentum a sapien. Praesent laoreet tortor vel diam dignissim et lobortis mi bibendum. Vivamus malesuada nibh et mauris facilisis nec sagittis odio molestie.</p>
					<p>Morbi orci velit, sollicitudin ac gravida sed, vehicula et nisl. Phasellus cursus volutpat tellus, egestas fermentum purus ultricies vitae. Praesent in nunc vel felis ornare semper a id quam. In a erat dolor, in pellentesque nulla. Curabitur at elit ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam diam tellus, blandit ac tempor eu, faucibus sit amet augue. Fusce pretium consectetur mauris fermentum commodo. In posuere ornare accumsan. Sed augue nulla, porta eu pellentesque vitae, viverra quis ipsum. Praesent est sapien, consectetur eget commodo non, consequat vitae libero. Quisque tristique leo eu ligula feugiat eu pulvinar nisi fermentum. Sed ultrices odio dapibus massa bibendum vitae pharetra enim eleifend. Etiam at mauris erat, sed venenatis nunc. Duis ac faucibus leo. Nunc gravida risus at enim aliquet nec accumsan libero facilisis. Nulla convallis, justo vel accumsan tempus, neque quam ultricies risus, ut facilisis ligula eros vitae arcu.</p>
					<p>Nullam in facilisis justo. Nunc pulvinar tempus tortor vel tristique. Ut convallis, leo nec tempus facilisis, nisl erat egestas arcu, ac elementum orci ligula id mauris. Etiam quis porttitor neque. Sed sagittis tellus sed ligula viverra bibendum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer consectetur massa eu elit placerat et ullamcorper eros ultricies. In eu mi arcu, ac cursus ante. Sed ligula urna, auctor ac iaculis quis, sagittis ut quam. Morbi et ipsum et neque fermentum eleifend in quis nulla. Fusce vel diam quam.</p>
				</div> 
			</div>
 
		</div> <!-- divData -->
	</div> <!--mainContainer -->
	<div id='footer'> 
		<div id='footerCopy'>Copyright notice</div> 
		<div id='footerLinks'><a href="/terms.html">Terms</a> | <a href="/other/contact.php">Contact</a> | <a href='/sitemap.html'>Sitemap</a> | <a href='/xml/rss.xml'>RSS</a></div>
	</div> <!--footer--> 
</div> <!-- PageID -->
</body></html>

CSS:

* {
	margin: 0;
	padding: 0;
	border: 0;
	font-family:Verdana,Arial,sans-serif;
	font-size:8pt;
	color:#4d4d4d;
	background-color:transparent;
}
 
#pageid{
/*	background-color:orange;*/
    width:1010px;
    margin:0px auto 0px auto;
	border:1px dotted gray;
}
 
#header{
	width:1010px;
/*	margin:0px auto 0px auto;*/
}
 
#navigation{
	background-color:gray;
	width:1000px;
	margin:0px auto 0px auto;
}
 
#mainContainer{
	float:left;
	clear:both;
	width:1010px;
	background-color:red;
 
	margin:0px 0px 20px 0px;
}
 
#leftMainCont{
	float:left;
	position:relative;
	width:500px;
	background-color:green;
}
 
#rightMainCont{
	float:right;
	position:relative;
	background-color:blue;
	width:200px;
	margin:0px 10px;
}
 
#footer{
	clear:both;
	float:none;
	background-color:lime;
}
 
/* Helper Classes */
.clearence{
	clear:both;
	height:0px;
}
 
.errorCls{
	font-size:8pt;
	color:#C50000;
	background-color:#FFF5F4;
	border:1px solid #990000;
	padding:5px;
	margin:5px;
}
 
#header{
	background-image:url("/images/skin/wave/bg/ui-bg_header.png");
	background-repeat:repeat-x;
	background-color:white;
    width:1008px;
 	float:left;
	/*border:1px solid #333;*/
}
 
.Logo{
	background-image:url("/images/skin/wave/logos/logo.png");
	background-repeat:no-repeat;
	width:200px;
	height:60px;
	float:left;
	cursor:pointer;
	cursor:hand;
}
 
.Logos2{
	background-image:url("/images/skin/wave/bg/ui-bg_header.png");
	width:540px;
	height:60px;
	float:right;
}
 
#horNavigation{
	clear:both;
	position:relative;
	display:block;
	height:39px;
	font-family:Verdana,Arial,sans-serif;
	font-size:8pt;
	background: url(/images/skin/wave/bg/ui-bg_navigation_gray_off.gif) repeat-x top left;
	border-top:4px solid #B30000;
	margin-bottom:5px;
}
 
#horNavigation ul {
	list-style-type:none;
	width:auto;
}
 
#horNavigation ul li{
	display:block;
	float:left;
	background: transparent;
}
 
#horNavigation ul li a{
	display:block;
	float:left;
	color:#666;
	text-decoration:none;
	padding:11px 10px 0 10px;
	height:23px;
	background:transparent url(/images/skin/wave/bg/ui-bg_navigation_gray_dev.gif) no-repeat top right;
	text-shadow: #666 1px 1px 2px;
	filter: Shadow(Color=#cdcdcd, Direction=290, Strength=2);
}
 
#horNavigation ul li a:hover, #horNavigation ul li a.current{
	color:#B30000;
	background:#fff url(/images/skin/wave/bg/ui-bg_navigation_gray_on.gif) no-repeat top right;
	text-shadow: #797979 2px 1px 4px;
}
 
#divDataCont{
	width:795px;
	float:left;
 
}
 
#divData{
	position:relative;
	width:765px;
	background-color:white;
	float:left;
	margin:0px 5px 0px 0px;
	padding:5px;
}
 
#divPhotos{
	float:left;
	display: block;
	width:165px;
	min-height:250px;
	margin-right:5px;
}
 
#divStats{
 	float:left;
	border:1px solid #F5FAFA;
	padding:5px;
	text-align:justify;
}
 
#divHst{
 	float:left;
	border:1px solid #F5FAFA;
	padding:5px;
	text-align:justify;
}
 
#divData sup{
	font-size: 6pt;
	line-height: 0em;
	color:inherit;
}
 
#divData h1{
	background: url('/images/skin/wave/bg/ui-bg_white_3d1_1-16.png') repeat-x bottom left;
	border-top: 1px solid #fafafa;
	border-bottom: 1px solid #E7E7E7;
	border-right: 1px solid #E7E7E7;
	padding: 2px 5px;
	color:#c50000;
	font-size:12pt;
	text-decoration:none;
	font-weight:bold;
	font-style:normal;
}
 
#divData img{
	border: 1px solid #404040;
	padding: 0px; /*Inner border size*/
	background-color:white;
	float:left;
	margin:0px 0px 5px 0px;
}
 
#divData .brdImg{
	border: 1px solid #EBEBEB;
	padding: 5px; 
	float:left;
	margin:1px 5px 0px 0px;
}
 
#divData table{
	border-collapse: collapse;
	vertical-align: middle;
	margin: 1px 5px 5px 0px;
	line-height: 1.4em;
}
 
#divData table tr th{
	text-align:center;
	color:#c50000;
}
 
#divData table caption{
	text-align:center;
	font-size:10pt;
	font-weight:bold;
	background: url(/images/skin/wave/bg/ui-bg_gloss-wave_55_c50000_20x100.png) repeat-x bottom left;
	color:white;
	padding:4px;
}
 
#divData table thead tr th{
	line-height:2em;
	text-align:center;
	color:#c50000;
	background: url(/images/skin/wave/bg/ui-bg_gloss-wave_55_c50000_20x100.png) repeat-x top left;
	color:white;
}
 
#divData table tr td{
	padding:2px 5px;
	text-align:center;
	/*border:1px solid #F5FAFA;*/
	border:1px solid #FFF4F4;
}
 
#divData table td:first-child{
	text-align:right;
	font-weight:bold;
	color:#c50000;
}
 
#divData tr:nth-child(odd){
	background: #FFF9F9 url(images/skin/wave/bg/ui-bg_gloss_white_40-40.png) repeat-x top left;
}
 
#divData tr:nth-child(even){
	background-color:white;
}

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

It's normally a good idea to

It's normally a good idea to set the width of floats.
If you do that to #divHst it should move into place.

s91066
s91066's picture
Offline
newbie
Last seen: 11 years 3 weeks ago
Timezone: GMT+2
Joined: 2010-07-14
Posts: 8
Points: 13

Hallo Tony, Yes, I know that.

Hallo Tony,
Yes, I know that. The problem is that the divStats, must be variable width. So, I cannot set a fixed width to divHst. The question of course, is why the width of divHst is not adjusted to fit into place. I believe that I miss something in one of the 3 divs, but I do not know what.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Using width would be the best

Using width would be the best solution.
Since you can't do that have you tried putting the divHst before the others and floating it right. Not sure if this would really help but may be worth a try.

s91066
s91066's picture
Offline
newbie
Last seen: 11 years 3 weeks ago
Timezone: GMT+2
Joined: 2010-07-14
Posts: 8
Points: 13

Yes, I did that. In that

Yes, I did that. In that case, I have the opposite effect! The stats are pushed down...