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

Divs nebeneinander und mittig

dannylein

Neues Mitglied
Hallo Community,

derzeit machen mir 3 Div's das Leben schwer.

Mein Problem ist, das ich 3 Div's per float:left nebeneinander positioniert habe, was soweit auch funktioniert.
Allerdings sind diese jetzt links ausgerichtet! Sollen aber in der mitte stehen.

Ich hab jetzt schon alles möglich Probiert, allerdings bekomme ich es nicht hin!

Ich hoffe mein Problem ist verständlich beschrieben und ihr könnt mir helfen.

Hier der Code:

CSS:
Code:
body {
}

.center {
    text-align: center;
}

.links
{
    background-image: url('./img/header_footer_bar_left.jpg');
    background-repeat: no-repeat; 
    height: 51px; 
    width: 13px;    
    float:left;
}

.puffer
{
    background-image: url('./img/header_footer_bar_puffer.jpg'); 
    height: 51px; 
    width: 1013px;
    float:left; 
}

.rechts 
{
    background-image: url('./img/header_footer_bar_right.jpg');
    background-repeat: no-repeat; 
    height: 51px; 
    width: 13px;    
    float:left;
}

.clear {
clear:left;
}

HTML bzw. aspx
Code:
<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="SVD_Masterside.Master.vb"
    Inherits="SVD.Site1" %>

<!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 runat="server">
    <title>Sportverein Dreieichenhain</title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <link href="svd.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="center>
        <div class="links">
        </div>
        <div class="puffer">
        </div>
        <div class="rechts">
        </div>
        <div class="clear">
        </div>
    </div>
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
</body>
</html>

Viele Grüße,
Danny
 
Werbung:
Es gibt doch schon eine Element um die Floats.

Gebe .center eine entsprechende width und zentriere ihn mit margin: 0 auto.
Was spricht denn gegen eine Grafik für .center?
 
Werbung:
Das hat leider nicht Funktioniert.

Evtl. ein Fehler?

Code:
   <div style="width: 1039px; text-align: center;">
        <div class="links">
        </div>
        <div class="puffer">
        </div>
        <div class="rechts">
        </div>
        <div class="clear">
        </div>
    </div>
 
Werbung:
Zurück
Oben