• 27.08.2025, 20:50
  • Register
  • Login

  • You are not logged in.

 

HTML / CSS - Innere Div höher wie äußere Div

Man_In_Blue

Moderator

HTML / CSS - Innere Div höher wie äußere Div

Saturday, September 1st 2012, 10:13pm

Hi,

ich hab hier mal wieder etwas Div-Salat...

und zwar hab ich ein HTML Designe das aus mehreren ineinander verschatelten Divd besteht...

Nun ist es so, das die äußeren Divs auf einmal die Höhe der inneren Div ignorieren, das Designe zerreist daduch.

HTML

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

<%@page import="beans.MenuBean"%>
<%@page import="beans.ContentBean"%>

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

  <link href="../css/template.css" rel="stylesheet" type="text/css"/>



</head>

<body>

<jsp:useBean id="menu" class="beans.MenuBean" scope="session" />
<jsp:useBean id="content"  class="beans.ContentBean" scope="session" />
<div id="body_box">


  <div id="head_box">
  </div>
  
	
 
  <div id="main_box">
  		<img src="../jpg/space.jpg"></img>
  		<div id="menu_box"><br />
  		<jsp:getProperty name="menu" property="htmlMenu" />
  		</div>
  		
  		
		
		<div id="spacer">
		</div>
		<div id="content_box">
		<br /> <br />
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
 		</div>
	</div>
 
   <div id="bottom_box">
   <center><a href="LogoutAppl.jsp">Logout</a></center>
  </div>

</div>


</body>
</html>


Den JSP Kram könnter einfach ignorieren... funktional tut alles was es soll...

die ensprechenden ausschnitte aus der CSS

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

body { font-size: 14px;
	font-family: Helvetica,Arial,sans-serif;
	background-color: #ffffff;
	padding: 0px;
	margin: 0px;
	text-align: center;
	}



  #body_box {
  border: 0px;
  width: 100%;
  text-align: center;
  padding: 0px;
  }


  #main_box {
  border: 0px;
  text-align: center;
  padding: 0px;
  width: 1000px;
  float: center;
  height: 100%;
  margin: auto;
  background-image: url(../jpg/mid.jpg);
  background-repeat:repeat-y;
  }

  #head_box {
  height: 110px;
  border: 0px;
  width: 1000px;
  text-align: center;
  padding: 0px;
  background-image: url(../jpg/top.jpg);
  float: none;
	margin:auto;
  }

spacer
{
	float: right;
	width: 730px:
}


  #content_box {
  width: 700px;
  height: 100%;
  float: left;
  margin-left: 20px;
  font-size:14px;
  }



Änder ich in der Content_Box den Wert "float" so stimmt es zwar nun wieder, das die äußere Div sich um die inneren spannt, aber dann wird diese Div unter dem Menü angeordnet und das ist auch quatsch...

Vielleicht sieht ja jemand den Fehler, ich habe da gerade ein Brett vorm Kopf.

Sören
A sinking ship is still a ship!

Man_In_Blue

Moderator

Sunday, September 2nd 2012, 1:13pm

Problem mit overflow gelöst...
A sinking ship is still a ship!

Similar threads