web-dev-qa-db-fra.com

Comment aligner deux divs côte à côte en utilisant les éléments float, clear et overflow avec une position fixe div /

J'ai donc essayé d'aligner deux divs côte à côte sans se chevaucher. J'ai un div qui sera fixé comme barre latérale et le bon div comme contenu. J'espère que quelqu'un pourra m'aider.

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;
}
<div id="wrapper">
  <div id="leftcolumn">
  </div>
  <div id="rightcolumn">
  </div>
</div>

csshtml
36
Esteban Rodriguez

Cette réponse devra peut-être être modifiée en fonction de l'objectif recherché avec position: fixed;. Si vous ne voulez que deux colonnes côte à côte, procédez comme suit:

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

J'ai flotté les deux colonnes à gauche.

Note: J'ai ajouté min-height à chaque colonne à des fins d'illustration et j'ai simplifié votre 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;
}
<div id="wrapper">
  <div id="leftcolumn">
    Left
  </div>
  <div id="rightcolumn">
    Right
  </div>
</div>

Si vous souhaitez que la colonne de gauche reste en place lorsque vous faites défiler, procédez comme suit:

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

Ici, nous flottons la colonne de droite à droite tout en ajoutant position: relative; à #wrapper et position: fixed; à #leftcolumn.

Remarque: j’ai de nouveau utilisé min-height à des fins d’illustration et peut être supprimé pour vos besoins.

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;
}
<div id="wrapper">
  <div id="leftcolumn">
    Left
  </div>
  <div id="rightcolumn">
    Right
  </div>
</div>

45
hungerstar

Essaye ça:

<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

6
peterchon

J'ai fait ça:

<!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>

Donc, fondamentalement, je viens de faire une autre div pour envelopper le rose et le jaune, et je lui donne un flotteur: laissé dessus La division bleue a un flotteur: à droite dessus.

1
Zeke Young

Votre code est correct. Veuillez marquer petite correction.

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