Comment mettre deux divs côté par côté

Donc je suis assez nouveau à l'écriture de code (de l'ordre de quelques semaines) et j'ai frappé un mur lors de l'écriture de code pour mon site web. Je veux avoir une mise en page comme ceci:

Comment mettre deux divs côté par côté
Mais je ne peux pas comprendre comment mettre les deux cases côte à côte. Une boîte sera une vidéo expliquant mon site web, tandis que l'autre zone sera un signe formulaire d'inscription.
Je veux que les cases à côté de l'autre, avec environ un pouce de séparation entre eux.

J'ai aussi besoin d'aide avec la largeur de mon site web, en-tête. Pour l'instant il ressemble à l'en-tête ne tient pas sur la page, provoquant un défilement horizontal. Un peu comme ceci:

Comment mettre deux divs côté par côté
Je veux qu'il sorte que l'ensemble du site, c'est comme une grosse boîte, et tout le contenu est à l'intérieur de la boîte. Quelqu'un peut-il m'aider? Très apprécié. Je vous remercie à l'avance.

Pourriez-vous un peu la pâte de votre code css ici?

InformationsquelleAutor Richard Linares | 2013-03-13

css html

C'est très simple:

http://jsfiddle.net/kkobold/qMQL5/

CSS:

#header {
    width: 100%;
    background-color: red;
    height: 30px;
}

#container {
    width: 300px;
    background-color: #ffcc33;
    margin: auto;
}
#first {
    width: 100px;
    float: left;
    height: 300px;
        background-color: blue;
}
#second {
    width: 200px;
    float: left;
    height: 300px;
    background-color: green;
}
#clear {
    clear: both;
}

HTML:

<div id="header"></div>
<div id="container">
    <div id="first"></div>
    <div id="second"></div>
    <div id="clear"></div>
</div>

Merci pour le post!
il convient de noter que vous avez besoin de la clear à la fin pour éviter les divs flottantes pour déconner

InformationsquelleAutor Danilo Kobold

27

cela fonctionne
```
<div style="width:800px;">
  <div style="width:300px; float:left;"></div>
  <div style="width:300px; float:right;"></div>
</div>
```
- L'intérieur divs ne sont pas terminés correctement. Juste une note pour l'avenir de la copie-dérouleurs. 🙂
- J'ai ajouté <div style="clear: both;"></div> juste après pour éviter le prochain éléments de partir à la dérive
InformationsquelleAutor Abdelillah SchyZophrény
2

Avoir un regard sur le CSS et le HTML en profondeur vous permettra de comprendre cela. Il flottant juste les cases à gauche et à droite et les boîtes doivent être à l'intérieur d'une même div. http://www.w3schools.com/html/html_layout.asp pourrait être une bonne ressource.
- w3schools doit être évitée comme une ressource, une grande partie de leur information est inexacte. Le W3C wiki est une bonne alternative. w3.org/wiki/CSS/Training
InformationsquelleAutor
1

Concernant la largeur de votre site web, vous aurez envie d'envisager l'utilisation d'une classe wrapper pour entourer votre contenu (ce qui devrait aider à limiter votre largeurs d'éléments et de les empêcher de s'étendre trop loin au-delà du contenu):
```
<style>
.wrapper {
  width: 980px;
}
</style>

<body>
  <div class="wrapper">
    //everything else
  </div>
</body>
```
Autant que le contenu des boîtes aller, je suggère d'essayer d'utiliser
```
<style>
.boxes {
  display: inline-block;
  width: 360px;
  height: 360px;
}
#leftBox {
  float: left;
}
#rightBox {
  float: right;
}
</style>
```
Je voudrais passer un peu de temps à la recherche de la boîte-modèle d'objet et de tous les "affichage" propriétés. Ils seront toujours utiles. Accorder une attention particulière aux "inline-block", je l'utilise pratiquement tous les jours.

InformationsquelleAutor Jason Sears

C'est juste une simple(non-réactive) HTML/CSS traduction du fil de fer que vous avez fournis.

Comment mettre deux divs côté par côté

HTML

<div class="container">

  <header>
    <div class="logo">Logo</div>
    <div class="menu">Email/Password</div>
  </header>

  <div class="first-box">
    <p>Video Explaning Site</p>
  </div>

  <div class="second-box">
    <p>Sign up Info</p>
  </div>

  <footer>
    <div>Website Info</div>
  </footer>

</div>

CSS

.container {
  width:900px; 
  height: 150px;
}

header {
  width:900px; 
  float:left; 
  background: pink; 
  height: 50px;
}

.logo {
  float: left;
  padding: 15px
}

.menu {
  float: right;
  padding: 15px
}

.first-box {
  width:300px; 
  float:left; 
  background: green; 
  height: 150px;
  margin: 50px
}

.first-box p {
  color: #ffffff;
  padding-left: 80px;
  padding-top: 50px;
}

.second-box {
  width:300px; 
  height: 150px; 
  float:right; 
  background: blue;
  margin: 50px
}

.second-box p {
  color: #ffffff;
  padding-left: 110px;
  padding-top: 50px;
}

footer {
  width:900px; 
  float:left; 
  background: black; 
  height: 50px;
  color: #ffffff;
}

footer div {
  padding: 15px;
}

InformationsquelleAutor Victor ifeanyi

1
```
<div style="display: inline">
    <div style="width:80%; display: inline-block; float:left; margin-right: 10px;"></div>
    <div style="width: 19%; display: inline-block; border: 1px solid red"></div>
</div
```
- Merci de ne pas écrire de code seulement des réponses.
- Alors que ce code peut répondre à la question, de fournir un contexte supplémentaire concernant comment et pourquoi il résout le problème serait d'améliorer la réponse à long terme de valeur.
InformationsquelleAutor Dostonbek Oripjonov

-1

En fonction de la disposition que vous avez donné, vous pouvez utiliser float à gauche de la propriété en css.

HTML

<div id="header"> LOGO</div>
<div id="wrap">
<div id="box1"></div>
<div id="box2"></div>
<div id="clear"></div>
</div>
<div id="footer">Footer</div>

CSS

body{
margin:0px;
height: 100%;
}
#header {

background-color: black;
height: 50px;
color: white;
font-size:25px;

 }

#wrap {

margin-left:200px;
margin-top:300px;


 }
#box1 {
width:200px;
float: left;
height: 300px;
background-color: black;
margin-right: 20px;
}
#box2{
width: 200px;
float: left;
height: 300px;
background-color: blue;
}
#clear {
clear: both;
}
#footer {
width: 100%;
background-color: black;
height: 50px;
margin-top:300px;
color: white;
font-size:25px;
position: absolute;
}

InformationsquelleAutor prashanth

Vous devez vous connecter pour publier un commentaire.