Einstellung zwei <divs> nebeneinander

Ich versuche mit zwei neben einander. Ich habe versucht, code aus dieser Frage: CSS zwei divs nebeneinander, aber nichts funktioniert.

Dies ist mein code

Profil.css:

#content {

    width: 100%;

}

#profile-image {

    float: left;
    display: inline-block;


}

#profile-details {



    float: right;
    display: inline-block;
    margin-left: 200px;


}

UserProfile.aspx:

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="UserProfile.aspx.vb" Inherits="UserProfile" %>

<asp:Content ID="Content1" runat="server" contentplaceholderid="ContentPlaceHolder1">

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

    <div id="content">
        <div id="profile-image">
            <asp:Image ID="Image1" runat="server" Height="191px" Width="128px" />

            <br />
            <br />
            Upload picture:
            <asp:FileUpload ID="profImageUpload" runat="server" />
            <br />
            <br />
            <br />
            <br />
            <br />
        </div>

        <div id="profile-details">


            <asp:Table ID="Table1" runat="server">
            </asp:Table>
            asdafasf



        </div>

    </div>

    <div></div>
</asp:Content>

Stil.css:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
    margin: 0 297px 0 137px;
    padding: 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
fieldset, img {
    border: 0;
}
address, caption, cite, code, dfn, em, strong, th, var {
    font-style: normal;
    font-weight: 700;
    font-size: medium;
}
ol, ul {
    list-style: none;
}
caption, th {
    text-align: left;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}
q:before, q:after {
    content: '';
}
abbr, acronym {
    border: 0;
}
header, nav, section, article, aside, footer {
    display: block;
}
body {
    font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
    width: 100%;
    background-image: url(../images/Images/background-large.png);
    background-repeat: repeat-x repeat-y;
}
a {
    color: blue;
    outline: none;
    text-decoration: underline;
}
a:hover {
    text-decoration: none;
}
/* Begin of styles for the demonstration (you can remove them) */
a.expand {
    width: 150px;
    display: block;
    margin: 10px 0 0;
}
a.expand:hover {
    height: 500px;
}
/* End of of styles for the demonstration */
p {
    margin: 0 0 18px;
    width: 386px;
    height: 55px;
}
img {
    border: none;
}
input {
    vertical-align: middle;
}
#wrapper {
    width: 1000px;
    margin: 0 auto;
}


/* Header
-----------------------------------------------------------------------------*/
#header {
    margin-top: 25px;
    height: 39px;
    background-color: #D1D1D1;
    width: 899px;
}


.navigation-menu, .menu ul, .menu li, .menu a {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    margin-top: 2px;
    margin-bottom: 50px;


}

.navigation-menu {
    height: 40px;
    width: 550px;

    background: #4c4e5a;
    background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.navigation-menu li {
    position: relative;
    list-style: none;
    float: left;
    display: block;
    height: 40px;
    z-index: 1;



}

.navigation-menu li a {
    display: block;
    padding: 0 14px 0 30px;
    margin: 6px 0;
    line-height: 28px;
    text-decoration: none;

    border-left: 1px solid #393942;
    border-right: 1px solid #4f5058;

    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;

    color: #f3f3f3;
    text-shadow: 1px 1px 1px rgba(0,0,0,.6);

    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
}

.navigation-menu li:first-child a {
border-left: none;
}
.navigation-menu li:last-child a{
border-right: none;
}

.navigation-menu li:hover > a {
color: #8fde62;
}

.navigation-menu ul {
    position: absolute;
    top: 40px;
    left: 0;


    opacity: 0;
    background: #1f2024;

    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;

    -webkit-transition: opacity .25s ease .1s;
    -moz-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;

}

.navigation-menu li:hover > ul { opacity: 1; }

.navigation-menu ul li {
    height: 36px;
    overflow: hidden;
    padding: 0;

    -webkit-transition: height .25s ease .1s;
    -moz-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
}

.navigation-menu li:hover > ul li {
    height: 36px;
    overflow: visible;
    padding: 0;

}

.navigation-menu ul li a {
    width: 100px;
    padding: 4px 0 4px 40px;
    margin: 0;

    border: none;
    border-bottom: 1px solid #353539;
}

.navigation-menu ul li:last-child a {
border: none;
}

.navigation-menu a.documents { background: url(../images/Icons/document.png) no-repeat 6px center; }
.navigation-menu a.messages { background: url(../images/Icons/mail.png) no-repeat 6px center; }
.navigation-menu a.settings { background: url(../images/Icons/settings.png) no-repeat 6px center; }
.navigation-menu a.home { background: url(../images/Icons/home.png) no-repeat 6px center; }
.navigation-menu a.profile { background: url(../images/Icons/profile.png) no-repeat 6px center; }
.navigation-menu a.mainsettings { background: url(../images/Icons/settings.png) no-repeat 6px center; }
.navigation-menu a.docs{ background: url(../images/Icons/document.png) no-repeat 6px center; }
.navigation-menu a.others { background: url(../images/Icons/movie.png) no-repeat 6px center; }
.navigation-menu a.uploads { background: url(../images/Icons/upload.png) no-repeat 6px center; }
.navigation-menu a.profile { background: url(../images/Icons/user.png) no-repeat 6px center; }
.navigation-menu a.projects { background: url(../images/Icons/stamp.png) no-repeat 6px center; }
.navigation-menu a.yprojects { background: url(../images/Icons/stamp.png) no-repeat 6px center; }
.navigation-menu a.otherprojects { background: url(../images/Icons/stamp.png) no-repeat 6px center; }




/* Middle
-----------------------------------------------------------------------------*/
#middle {
    /*border-left: 250px solid #B5E3FF;
    border-right: 250px solid #FFACAA;*/
    height: 1%;
    position: relative;
}
#middle:after {
    content: '';
    clear: both;
    display: table;
}
#container {
    width: 100%;
    float: left;
    overflow: hidden;
    margin-right: -100%;
}
#content {

    padding: 75px 20px;
    background-color: #D1D1D1;
}




/* Footer
-----------------------------------------------------------------------------*/
#footer {

    margin-top: 50px;
    height: 25px;
    background: #D1D1D1;
}

#login {

    margin-top: 10px;
    width: 899px;
    background-color: #909090;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 1px;

}

#login-form {

    background-color: #909090;
    width: 899px;


}

Wie es derzeit aussieht:
Einstellung zwei <divs> nebeneinander

EDIT: Sie den Code in Der MasterPage geändert hat, meine Seiten sind nun folgendermaßen angezeigt:

Einstellung zwei <divs> nebeneinander

MasterPage.aspx:

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<script runat="server">



    Protected Sub Page_Load(sender As Object, e As EventArgs)

        If Session("userid") = Nothing Then
            txtLoginUser.Visible = True
            txtLoginPass.Visible = True

        Else


            Dim conn As New SqlConnection("Data Source=BRIAN-PC\SQLEXPRESS;Initial Catalog=master_db;Integrated Security=True")
            Dim useridComm As String = "SELECT name, surname FROM users WHERE user_id=@userid"
            Dim sqlUserID As New SqlCommand

            conn.Open()

            Dim userid As String = Session("userid")

            sqlUserID = New SqlCommand(useridComm, conn)
            sqlUserID.Parameters.AddWithValue("@userid", userid)
            Dim datareader As SqlDataReader = sqlUserID.ExecuteReader()
            If datareader.HasRows Then

                FormsAuthentication.RedirectFromLoginPage(datareader("user_id"), True)
                lblLoggedIn.Text = datareader("name").ToString() & " " & datareader("surname").ToString()

            End If
            datareader.Close()
            conn.Close()

        End If
    End Sub

   Protected Sub Button1_Click(sender As Object, e As EventArgs)

        Dim loginSQL As New SqlCommand
        Dim loginComm As String

        Dim CommonFunctions As New CommonFunctions()
        Dim dec_pass As String = CommonFunctions.EncryptPassword(txtLoginPass.Text.Trim)

        Dim conn As New SqlConnection("Data Source=BRIAN-PC\SQLEXPRESS;Initial Catalog=master_db;Integrated Security=True")


        loginComm = "SELECT user_id FROM users WHERE username=@username and password=@password"

        conn.Open()


        loginSQL = New SqlCommand(loginComm, conn)
        loginSQL.Parameters.AddWithValue("@username", txtLoginUser.Text.ToString)
        loginSQL.Parameters.AddWithValue("@password", dec_pass)
        Dim dr As SqlDataReader = loginSQL.ExecuteReader()
        dr.Read()


        If dr.HasRows Then
            Session("userid") = dr("user_id")
        ElseIf dr.HasRows = False Then

            lblRegister.ForeColor = Drawing.Color.Red
            lblRegister.Text = "Incorrect Username/Password."
        End If
        dr.Close()
        conn.Close()

    End Sub





</script>



<head>
    <meta charset="utf-8" />
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <title></title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
</head>

<body>

    <form id="form1" runat="server">

<div id="wrapper">

    <header id="header">
        <strong>Header:</strong> Mobile CMS

        </header>


<section id="login">

    <div id="login-form">

         <p>

                    <asp:Label ID="lblUsername" runat="server" Font-Bold="True" Text="U:"></asp:Label>
&nbsp;<asp:TextBox ID="txtLoginUser" runat="server" BorderStyle="None" BorderWidth="0px" Wrap="False"></asp:TextBox>
&nbsp;
                    <asp:Label ID="lblUsername0" runat="server" Font-Bold="True" Text="P:"></asp:Label>
                    <asp:TextBox ID="txtLoginPass" runat="server" BorderStyle="None" BorderWidth="0px" TextMode="Password" Wrap="False"></asp:TextBox>
&nbsp;
                    <asp:Button ID="btnLogin" runat="server" BorderStyle="None" OnClick="Button1_Click" Text="Login" />

                </p>

                <p>

                    <asp:Label ID="lblRegister" runat="server" Font-Bold="True" Font-Underline="True" ForeColor="#0000CC" Text="Register"></asp:Label>

                    <asp:Label ID="lblLoggedIn" runat="server"></asp:Label>

                </p>
         <p>

                    &nbsp;</p>



    </div>

</section>

<div class="navigation-bar">
       <ul class="navigation-menu">

            <li><a href="#" class="home">Home</a></li>
            <li><a href="#" class="mainsettings">Settings</a></li>
            <li><a href="#" class="profile">Profile</a>

                <ul>
                    <li><a href="#" class="messages">Messages</a></li>
                    <li><a href="#" class="settings">Profile Settings</a></li>
                </ul>

            </li>
            <li><a href="#" class="uploads">Uploads</a></li>
            <li><a href="#" class="documents">Media</a>


                <ul>
                    <li><a href="#" class="docs">Documents</a></li>
                    <li><a href="#" class="others">Others</a></li>

                </ul>

            </li>

            <li><a href="#" class="projects">Projects</a>


                <ul>
                    <li><a href="#" class="yprojects">Your Projects</a></li>
                    <li><a href="#" class="otherprojects">Other Projects</a></li>
                </ul>

            </li>

        </ul>

    </div>


    <section id="middle">

        <div id="container">

            <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">                       

            </asp:ContentPlaceHolder>

        </div>

    </section>

    <footer id="footer">
        <strong>Footer:</strong> adsfdsgfds
    </footer>

</div>

    </form>

</body>
</html>

InformationsquelleAutor Brian | 2013-04-08

0

Ihrem fehlen ein paar Konzepte hier:
```
#content {
    width: 100%;
    overflow:hidden; /* we can use a clearfix or overflow:hidden, I prefer overflow:hidden for most cases*/
}

#profile-image {
    width:200px; /* Give the div a width */
    float: left;
    /* display: inline-block; no - we want to keep the divs block */
}

#profile-details {
    width:200px; /* Give the div a width */
    float: right;
    /* display: inline-block; no - we want to keep the divs block */
    /* margin-left: 200px; You don't need this if you set the widths up properly */
}
```
- Noper, immer noch das gleiche problem!
- Löschen Sie den cache, und drücken Sie aktualisieren. Wenn es weiterhin besteht, dann versuchen Sie es zum reproduzieren des Fehlers in jsfiddle.
- Wurde es noch schlimmer, lassen Sie mich versuchen, jsfiddle
- jsfiddle.net/75T2Y
- Ich vereinfachte dein jsfiddle und machte einige kleine änderungen. Es soll Ihnen helfen, die Grundlagen des Schwebens die divs:jsfiddle.net/75T2Y/1.
- Ich habe das Gefühl, dass Sie Ihre container Breite, Polsterung und Margen werden können, dass nachteilige Auswirkungen auf den output. Nehmen jsfiddle ich gepostet, und arbeiten Sie sich zurück bis Ihr problem Raum.
- Ich weiß nicht warum, aber das gesamte layout meiner masterpage geändert!
- Ich update die Frage mit der MasterPage.aspx-code und ein screenshot
- lassen Sie uns weiter, diese Diskussion im chat
- behoben.. vielen Dank 🙂
InformationsquelleAutor Lowkase
0

Wenn Sie jemals wollen, um div-Elemente werden neben einander, einen gemeinsamen Weg zu machen, die geschehen, um sicherzustellen, dass Sie beide float:left, oder beide float:right. Don ' T vergessen, deaktivieren Sie die schwimmt einmal fertig.

InformationsquelleAutor klewis
0

Hinzufügen "overflow: hidden" des übergeordneten Elements, z.B.
```
#content {
    overflow: hidden;
}
```
Den oben ermöglichen, dem übergeordneten element, zu erweitern, zu decken, die Höhe der untergeordneten Elemente.

Dann schweben die Kind-Elemente.

Einstellung der Kinder als inline-block-Elemente werden in Ordnung sein, solange Sie auch tatsächlich passen in der Breite des übergeordneten Elements.

Ansonsten würde ich empfehlen, indem Sie Ihnen jeweils eine Breite.
- Immer noch das gleiche !
InformationsquelleAutor Billy Moat

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.