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

zwei DIVs nebeneinander in einem umschließenden DIV vertikal bündig unten ausrichten

E

ekiem

Neues Mitglied
Hallo,
ich habe ein umschließendes div (header)(100% Breite), in dem ein div (header-left) und (header-right) sind. Im header-left steht die Adresse, Name, Telefon in einer Zeile (75% der Breite). Im header-right (25% der Breite) ist das Logo.

Das Logo ist natürlich höher als der Text. Ich möchte, daß beide DIVs vertikal unten bündig ausgerichtet sind.
Im Moment sind sie vertikal oben bündig ausgerichtet. Ichhabe schon alles möglich probiert und keinen Plan.
Was kann ich machen?


#container {
width: 70%;
max-width: 935px;
min-width: 400px;
margin: auto;
height: auto !important;
overflow: hidden !important;
margin-top: 3%;
}

#header {
height:auto;
}



#header-left {
float:left;
width: 75%;
heigt: auto;
text-align:left;
}


#header-right {
float:right;
width:25%;
}

#header-right img{
width: 100%;
}


#content {
clear: both;
background: #fff;

}
 
So?
Code: 
<!doctype html>
<html>
<head>
<title>Beispielseite</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
#container {
width: 70%;
max-width: 935px;
min-width: 400px;
margin: auto;
height: auto !important;
overflow: hidden !important;
margin-top: 3%;
}

#header {
border:1px solid #aaa;
}



#header-left {
display:inline-block;
width: 75%;
height: auto;
text-align:left;
margin-right:-5px;
}


#header-right {
display:inline-block;
vertical-align:bottom;
width:25%;
}

#header-right img {
width: 100%;
display:block;
}
</style>
</head>
<body>
<div id="container">
<header id="header">
<div id="header-left"><b>header left</b></div>
<div id="header-right"><img src="bild1.jpg" alt="logo" ></div>
</header>
</div>
</body>
</html>
 
Keine Ahnung. Du kannst es aber auch optimieren.
Code: 
<header id="header">
<address>Adresse | Name | Straße </address><img src="bild1.jpg" alt="logo">
</header>
Musst nur dein css anpassen. Nur weil du lernen möchtest.
 
Ich habe noch mal eine Frage zu Deiner Lösung.
Wieso muss mann bei #header-left ein margin-right: -5px angeben?
Wenn ich 0 einsetze funktioniert es nicht mehr. Wieso?
 
Weil display:inline-block undewollte Abstände verursacht. Mit margin-right:-5px wirsd es korrigiert. Eine von mehreren Möglichkeiten.
Hir nochmal die zweite Lösung.
Code: 
<!doctype html>
<html>
<head>
<title>Beispielseite</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
#container {
width: 70%;
max-width: 935px;
min-width: 400px;
margin:3% auto;
overflow: hidden;
}

#header {
 padding:0;
 border:1px solid #aaa;
}



#header address{
display:inline-block;
width: 75%;
height: auto;
text-align:left;
}


#header img {
display:inline-block;
vertical-align:bottom;
width:25%;
}


</style>
</head>
<body>
<div id="container">
<header id="header">
 <address>Adresse | Name | Straße</address><img src="bild1.jpg" alt="logo">
</header>

</div>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben