• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

2 Contents nebeneinander!

B

Basti225

Neues Mitglied
Hey,
also ehm:
Ich möchte 2 Textfelder nebeneinander haben.
Und dadrunter einen footer.
Jetzt hab ich die 1 Contentbox (link) mit position absolute versehen und die 2te Contentbox (rechts daneben) mit position relative.
Ich will das die Rechte box immer so lang ist wie die linke.

Problem:
1. Der Footer hängt i.wo rum!
2. Wenn der Inhalt der Rechtenbox LÄNGER als der Inhalt von den Linken box ist, sieht man das ende der linken box (das man nicht sehen soll)

Ich glaub mit den positionen habe ich i.wie was falsch gemacht :/
Kann mir da jmd. eine gute Lösung geben?!
________________________
|L-------------| Der Inhalt
|I-------------| kann länger
|N-------------| sein!
|K-------------|
|E-------------|
|-------------_|
________________________
FOOTER

HTML: 
<div id="content">
 Inhalt ....
</div>
<div id="rechtebox">
....
</div>

Code: 
#content {
	position: absolute;
	background-color: #eee;
	margin-top: 1px;
	padding: 30px;
	width: 850px;
	font-family: Verdana;
	font-size: 14px;
	color: #a09e9e;
	border-right: 1px solid #bfbfbf;
	outline: 1px solid #fff;
	}

#rechterbox {
	position: relative;
	background-color: #e3e3e3;
	margin-left: 912px;
	padding: 25px;
	font-family: Verdana;
	font-size: 14px;
	color: #9f9f9f;
	}

Gruß Basti :D
 
Werbung:
Du willst zwei Content-Boxen nebeneinander, beide sollen gleich groß sein!?

HTML: 
/*CSS*/
#content1 {
     float: left;
     width: 300px;
}
#conten2 {
     float: left;
     width: 300px;
 
 
/*HTML*/
 
<body>
<div id="content1"> Inhalt 1 </div>
<div id="content2"> Inhalt 2 </div>

Oder meinst du was andres?
 
Doch, die Boxen nebeneinander und gleich lang (nach unten)!
Und der Footer soll unter den beiden boxen sein.

Nur es geht nochimmer nicht

____________________
------------| FOOTER
CONTENT1--|
___________ _________
--------------CONTENT 2

soll aber so sein:

____________________
CONTENT 1| CONTENT 2
blaa-------| (gleich lang)
____________________
footer
 
Werbung:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML: 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ohne_Titel_1</title>
<style type="text/css">
#content1 {
float: left;
height: 300px;
background-color: red;
width: 300px;
}
 
#content2 {
float: left;
height: 300px;
background-color: black;
width: 300px;
}
 
#footer {
clear: both;
background-color: gray;
width: 600px;
height: 30px;
}
body {
color:white;
}
</style>
</head>
<body>
<div id="content1">CONTENT1</div> <!--Conten1(LINKS)-->
<div id="content2">CONTENT2</div> <!--Conten2(RECHTS)-->
<div id="footer">Footer</div><!--Footer-->
 
</body>
</html>

<---Das funktioniert
 
Zuletzt bearbeitet:
Werbung:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ohne_Titel_1</title>
<style type="text/css">
#content1 {
float: left;
height: 300px;
background-color: red;
margin: 0px;
width: 300px;
}
 
#content2 {
float: left;
height: 300px;
background-color: black;
margin: 0px;
width: 300px;
}
 
#footer {
     margin: 0px;
    clear: both;
    background-color: gray;
    width: 600px;
    height: 30px;
}
body {
 color:white;
}
</style>
</head>
<body>
<p id="content1">CONTENT1</p> <!--Conten1(LINKS)-->
<p id="content2">CONTENT2</p> <!--Conten2(RECHTS)-->
<p id="footer">Footer</p><!--Footer-->

</body>
</html>

oder so -> Semantisch is das korrekter als das andere
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben