Wie man zwei divs nebeneinander mit den float, clear, und overflow Elementen mit einer festen Position div /

Also ich hab schon versucht das zu richten, zwei divs nebeneinander ohne überschneidung. Ich habe eine div, die behoben werden wie eine sidebar und der Rechte div als Inhalt. Hoffentlich kann mir jemand helfen.

HTML:

<div id="wrapper">
    <div id="leftcolumn">
    </div>
    <div id="rightcolumn">
    </div>
</div>

CSS:

body {
     background-color: #444;
     margin-top: 0;
     margin-bottom: 0;
}

#wrapper {
     width: 1005px;
     margin: 0 auto;
     padding: 0;
     overflow: auto;
}

#leftcolumn {
     width: 250px;
     background-color: #111;
     padding: 0;
     margin: 0;
     display: block;
     border: 1px solid white;
     position: fixed;
}

#rightcolumn {
     width: 750px;
     background-color: #777;
     display: block;
     float: left;
     border: 1px solid white;
}
Kommentar zu dem Problem
Sie entweder Benutzer-position:Fixed oder float - nicht beide. Kommentarautor: peterchon
@peterchon habe ich entfernt, das float-element ist es dort etwas hinzufügen oder ändern? Kommentarautor: Esteban Rodriguez
Wenn Ihr rechten Spalte ist der content, warum ist es dann so viel dünner? Kommentarautor: crush
Sie könnten versuchen, mit flexbox-oder table-layout (je nach Ziel-Browsern). Wenn Sie mit float, denken Sie daran, immer add clear: both nach dem letzten element, wie Sie wahrscheinlich nicht wollen, etwas anderes zu zeigen gibt. Kommentarautor: Marko Grešak
@crush danke, dass Sie mich kennen, ich hatte dies als ein Projekt und beschlossen, ein paar Dinge verändern und einfach bearbeitet werden. Kommentarautor: Esteban Rodriguez

InformationsquelleAutor der Frage Esteban Rodriguez | 2013-08-20

  1. 41

    Diese Antwort möglicherweise geändert werden, je nachdem, was Sie erreichen wollten mit position: fixed;. Wenn alles, was Sie wollen, ist in zwei Spalten nebeneinander, dann tun Sie einfach Folgendes:

    http://jsfiddle.net/8weSA/1/

    Ich schwebte einfach die beiden Spalten auf der linken Seite. Ich fügte min-height jeder Spalte für illustrative Zwecke.

    HTML

    <div id="wrapper">
    <div id="leftcolumn">
        Left
    </div>
    <div id="rightcolumn">
        Right
    </div>
</div>

    CSS - Sie werden bemerken, ich vereinfachte CSS -

    body {
    background-color: #444;
    margin: 0;
}    
#wrapper {
     width: 1005px;
     margin: 0 auto;
}
#leftcolumn, #rightcolumn {
    border: 1px solid white;
    float: left;
    min-height: 450px;
    color: white;
}
#leftcolumn {
     width: 250px;
     background-color: #111;
}
#rightcolumn {
     width: 750px;
     background-color: #777;
}

    Wenn Sie möchten, dass die linke Spalte, um im Platz zu bleiben, wie Sie Blättern Sie Folgendes tun:

    http://jsfiddle.net/8weSA/2/

    Hier schweben wir in der rechten Spalte auf der rechten Seite, während das hinzufügen position: relative; zu #wrapper und position: fixed; zu #leftcolumn. Ich habe wieder min-height für illustrative Zwecke und können entfernt werden, für Ihre Bedürfnisse.

    CSS

    body {
    background-color: #444;
    margin: 0;
}
#wrapper {
    width: 1005px;
    margin: 0 auto;
    position: relative;
}
#leftcolumn, #rightcolumn {
    border: 1px solid white;
    min-height: 750px;
    color: white;
}
#leftcolumn {
    width: 250px;
    background-color: #111;
    min-height: 100px;
    position: fixed;
}
#rightcolumn {
    width: 750px;
    background-color: #777;
    float: right;
}

    InformationsquelleAutor der Antwort hungerstar

  2. 6

    Versuchen Sie dies:

    <div id="wrapper">
    <div class="float left">left</div>
    <div class="float right">right</div>
</div>

#wrapper {
   width:500px; 
   height:300px; 
   position:relative;
}

.float {
   background-color:black; 
   height:300px; 
   margin:0; 
   padding:0; 
   color:white;
}

.left {
   background-color:blue; 
   position:fixed; 
   width:400px;
}

.right {
   float:right; 
   width:100px;
}

    jsFiddle: http://jsfiddle.net/khA4m

    InformationsquelleAutor der Antwort peterchon

  3. 1

    Habe ich dieses:

    <!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>AutoDealer</title>
        <style>
        .container{
            width: 860px;
            height: 1074px;
            margin-right: auto;
            margin-left: auto;
            border: 1px solid red;

        }
        .nav{

        }
        .wrapper{
            display: block;
            overflow: hidden;
            border: 1px solid green;
        }
       .otherWrapper{
            display: block;
            overflow: hidden;
            border: 1px solid green;
            float:left;
        }
    .left{
        width: 399px;
        float: left;
        background-color: pink;
    }
            .bottom{
        clear: both;
        width: 399px;
        background-color: yellow;



    }
    .right{
        height:350px;
        width: 449px;
        overflow: hidden;
        background-color: blue;
        overflow: hidden;
        float:right;
    }

    </style>
</head>
<body>
    <div class="container">
        <div class="nav"></div>
        <div class="wrapper">
        <div class="otherWrapper">
            <div class="left">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies aliquet tellus sit amet ultrices. Sed faucibus, nunc vitae accumsan laoreet, enim metus varius nulla, ac ultricies felis ante venenatis justo. In hac habitasse platea dictumst. In cursus enim nec urna molestie, id mattis elit mollis. In sed eros eget nibh congue vehicula. Nunc vestibulum enim risus, sit amet suscipit dui auctor et. Morbi orci magna, accumsan at turpis a, scelerisque congue eros. Morbi non mi vel nibh varius blandit sed et urna.</p>
            </div>
             <div class="bottom">
                <p>ucibus eros, sed viverra ex. Vestibulum aliquet accumsan massa, at feugiat ipsum interdum blandit. Morbi et orci hendrerit orci consequat ornare ac et sapien. Nulla vestibulum lectus bibendum, efficitur purus in, venenatis nunc. Nunc tincidunt velit sit amet orci pellentesq</p></div>
             </div>

             <div class="right">
                <p>Quisque vulputate mi id turpis luctus, quis laoreet nisi vestibulum. Morbi facilisis erat vitae augue ornare convallis. Fusce sit amet magna rutrum, hendrerit purus vitae, congue justo. Nam non mi eget purus ultricies lacinia. Fusce ante nisl, efficitur venenatis urna ut, pellentesque egestas nisl. In ut faucibus eros, sed viverra ex. Vestibulum aliquet accumsan massa, at feugiat ipsum interdum blandit. Morbi et orci hendrerit orci consequat ornare ac et sapien. Nulla vestibulum lectus bibendum, efficitur purus in, venenatis nunc. Nunc tincidunt velit sit amet orci pellentesque maximus. Quisque a tempus lectus.</p>
             </div>
        </div>
    </div>
</body>

    Also grundsätzlich habe ich nur ein weiteres div-wrap-rosa und gelb, und ich mache, dass div ein float:left. Das Blaue div ein float:right.

    InformationsquelleAutor der Antwort Zeke Young

  4. 0

    Ihr code korrekt ist. Herzlich markieren kleine Korrektur.

    #rightcolumn {
     width: 750px;
     background-color: #777;
     display: block;
     **float: left;(wrong)**
     **float: right; (corrected)**
     border: 1px solid white;
}

    InformationsquelleAutor der Antwort Pushp Singh

Schreibe einen Kommentar