CSS seconds divs padding expands over the first one

Termi2610

New Member

Join Date: Nov 2012
Posts: 6

CSS seconds divs padding expands over the first one

Jun 25 '13, 07:43 AM

Hey,
im new to CSS and just tried to make a small help page with a, well, "special" design.

I developed it and used IE to check. Well everything was working fine but in FF everything was just well flying around on the page.

I edited my code and well, its nearly fixed now for firefox but sth really strange is happening and i cant find the problem myself.

I cant really describe it.. There are 2 divs next to each other. The second one has a border. But the border isnt only around the second div, it expands to the first.

What..? Hehe I attached an image, probably shows my problem better than i can describe it.

Here some parts of the code

HTML

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="style/help.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hilfeseite</title>
</head>
<body>
	<div class="content">


	 	<div class="top">
			 <div class="topMessage"><h1>Hilfeseite der Fehlerseite</h1></div>
		
			<ol class="toc">
	<li><span>Filter</span> <a href="#filter">Hilfe 1</a></li>
	
		<li class="sub"><span>ID-Filter</span> <a href="#idfilter">Hilfe 1.1</a></li>
		<li class="sub"><span>Queue-Filter</span> <a href="#queuefilter">Hilfe 1.2</a></li>
		<li class="sub"><span>Kommando-Filter</span> <a href="#commandfilter">Hilfe 1.3</a></li>
		<li class="sub"><span>Exception-Filter</span> <a href="#exceptionfilter">Hilfe 1.4</a></li>
		<li class="sub"><span>Zeit-Filter</span> <a href="#timefilter">Hilfe 1.5</a></li>
		<li class="sub"><span>Verarbeitet-Filter</span> <a href="#verarbeitetfilter">Hilfe 1.6</a></li>
		<li class="sub"><span>Buttons</span> <a href="#buttons">Hilfe 1.7</a></li>
		<li class="sub"><span>Detailansicht</span> <a href="#detailansicht">Hilfe 1.8</a></li>
	<li><span>Fehleranzeige</span> <a href="#fehleranzeige">Hilfe 2</a></li>
	<li><span>Conclusion</span> <a href="#">Page 4</a></li>
	<li><span>Discussion</span> <a href="#">Page 5</a></li>
</ol>
	
		</div> 
		
		
		
		<div class="helpEntry">
			<div class="outerLabel">
				<a name="filter">Filter</a>
				<p>&#x25ba;</p>
			</div>
			<div class="helpEntryContent">
			<h1>&Uuml;ber die Filter</h1>
				<img src="style/img/filter.PNG" alt="Filter&uuml;bersicht" />
				<p>
					Anhand der Filter kann man die angezeigten Fehler einschränken.<br/>
					Es stehen dazu 7 verschiedene Filter zur Auswahl die in den nachfolgenden Punkten beschrieben werden.<br/>
					Außerdem gibt es einige Buttons mit denen man bestimmte Funktionen aufrufen kann und eine Checkbox für die Anzeige der Fehler in einer Detailansicht
					ist auch verf&uuml;gbar.
				</p>
			</div>
		</div>
		
		<div class="helpEntry">
			<div class="outerLabel">
				<a name="idfilter">ID-Filter</a>
				<p>&#x25ba;</p>
			</div>
			<div class="helpEntryContent">
			<h1>Der ID-Filter</h1>
			<img src="style/img/idfilter.PNG" alt="Bild des ID-Filters" />
				<p>
					Mit dem ID-Filter kann man nach der eindeutigen ID eines Fehler suchen.<br/> Somit ist letztendlich nur ein Eintrag davon betroffen.<br/>
					<b>Die ID eines Fehlers besteht nur aus Zahlen.</b>
				</p>
			</div>
		</div>

.... ( some other helpEntries which work perfectly )

Code:

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

--------------------------

CSS:

Code:

html, body {
	font-family: 'Arial', sans-serif;
	background-color: #DEDCDD;
	padding:5px;
}

ol.toc 
{
	width:50%;
	border:1px solid black;
	margin:auto;
	padding:10px;
}

ol.toc li {
	clear:left;
	border-bottom:dashed 1px #aaa;
	height:1.05em;
	margin-top:10px;
	position:relative;
}
ol.toc a, ol.toc span {
	background:#fff;
	padding:0 3px 0 0;
	float:left;
	position:absolute;
	text-decoration:none;
}
ol.toc a {
	padding:0 0 0 3px;
	right:0;
}

ol.toc li.sub {
	list-style:none;
	margin:0.2em 0 0em 5%;
	padding:0;
	background:#fff;
	width:95%;
}

.top{
	padding:0px 0px 5px 0px;
	width:100%;
	margin:0px;
	float:left;
}

.topMessage
{
	text-align:center;
	margin:0px;
	padding:6px;
}

.content
{
	width:50%;
	min-width:470px;
	background-color: white;
	margin:auto;
	padding:auto;
}



.helpEntry
{
	width:100%;
	position:relative;
	border:2px solid red;
	margin:20px 0px 0px 0px;
	padding-right:219px;
	left: -220px;
}



.outerLabel
{
	z-index:1;
	position:relative;
margin:0px;
padding:0px;
width:220px;
	height:35px;
	background-color:white;
	float:left;
	left:-1px;
	border-left: 1px solid black;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
}

.outerLabel a
{
	position:absolute;
	font-size: 24px;
	left:5px;
	top:5px;
}

.outerLabel p
{
	
	position:absolute;
	font-size:20px;
	top:5px;
	right:0px;
}


.helpEntryContent
{
	position:relative;
	z-index:0;
	border: 1px solid black;
	
	left:219px;
	margin:0px;
	padding:0px;
	width:100%; 
	
}

.helpEntryContent h1
{
	text-decoration:underline; 
}

img {
	max-width:100%;
	display: block ; 
	margin: 0 auto; 
}

Hope somebody can help me, thanks :)

Last edited by Termi2610; Jun 25 '13, 08:56 AM. Reason: Removed Attachment

Tags: None

Termi2610

New Member

Join Date: Nov 2012

Posts: 6
#2

Jun 25 '13, 08:38 AM

Solved: .top had float:left;
Adding a clearing div or adding clear:both to .helpEntry fixed it.

Or just remove that float:left. Because its unnecessary lol.

Thought i did that before.
Comment

CSS seconds divs padding expands over the first one

CSS seconds divs padding expands over the first one

Comment