Bonjour à tous,

J'aimerais que le DIV "Coin du bain" soit en dessous du DIV "Coin Dodo"

Avec l'image c'est mieux

Fichier php

			<ul id="menu">
				<li class="gauche"></li>
				<li class="menu1"><a href="#" class="drop">Nos produits</a>
					<div class="dropdown_4columns"><!-- 4 col -->
						<div class="col_1">
							<h3>Coin Dodo</h3>
							<ul>
								<li><a href="#" class="article">Couverture</a></li>
								<li><a href="#" class="article">Doudou Lapinou</a></li>
								<li><a href="#" class="article">Doudou Rond</a></li>
								<li><a href="#" class="article">Doudou Souvenir</a></li>
							</ul>
						</div>
						<div class="col_1">
							<h3>Coin du Bain</h3>
							<ul>
								<li><a href="#" class="article">Cap de bain brodé</a></li>
								<li><a href="#" class="article">Cap de bain imprimé</a></li>
								<li><a href="#" class="article">Drap de bain</a></li>
							</ul>
						</div>
						<div class="col_1">
							<h3>Coin Accessoires</h3>
							<ul>
								<li><a href="#" class="article">Attache tétine</a></li>
								<li><a href="#" class="article">Attache doudou</a></li>
								<li><a href="#" class="article">Attrape rêve</a></li>
								<li><a href="#" class="article">Bavoir</a></li>
								<li><a href="#" class="article">Body</a></li>
								<li><a href="#" class="article">Echarpe de baptème</a></li>
								<li><a href="#" class="article">Protège carnet brodé</a></li>
								<li><a href="#" class="article">Protège carnet photo</a></li>
								<li><a href="#" class="article">Mug</a></li>
								<li><a href="#" class="article">Coque de téléphone</a></li>
							</ul>
						</div>
					</div>
				</li>
				<li class="menu2"><a href="#" class="drop">Test 2</a>
					<div class="dropdown_4columns"><!-- 4 col -->
						<div class="col_1">
							<h3>11111</h3>
							<ul>
								<li><a href="#" class="article">Lightbox</a></li>
								<li><a href="#">Diaporamas</a></li>
								<li><a href="#">Scripts</a></li>
								<li><a href="#">Liens</a></li>
								<li><a href="#">Contact</a></li>
							</ul>
						</div>
						<div class="col_1">
							<h3>22222</h3>
							<ul>
								<li><a href="#">Lightbox</a></li>
								<li><a href="#">Diaporamas</a></li>
								<li><a href="#">Scripts</a></li>
								<li><a href="#">Liens</a></li>
								<li><a href="#">Contact</a></li>
							</ul>
						</div>
						<div class="col_1">
							<h3>33333</h3>
							<ul>
								<li><a href="#">Lightbox</a></li>
								<li><a href="#">Diaporamas</a></li>
								<li><a href="#">Scripts</a></li>
								<li><a href="#">Liens</a></li>
								<li><a href="#">Contact</a></li>
							</ul>
						</div>
						<div class="col_1">
							<h3>44444</h3>
							<ul>
								<li><a href="#">Lightbox</a></li>
								<li><a href="#">Diaporamas</a></li>
								<li><a href="#">Scripts</a></li>
								<li><a href="#">Liens</a></li>
								<li><a href="#">Contact</a></li>
							</ul>
						</div>	
					</div>
				</li>
				<li class="menu3"><a href="#" class="drop">Test 3</a>
					<div class="dropdown_4columns"><!-- 4 col -->
						<div class="col_1">
							<h3>Liensffff</h3>
							<ul>
								<li><a href="#">Lightbox</a></li>
								<li><a href="#">Diaporamas</a></li>
								<li><a href="#">Scripts</a></li>
								<li><a href="#">Liens</a></li>
								<li><a href="#">Contact</a></li>
							</ul>
						</div>

						<div class="col_1">
							<h3>Liens1vvvv1</h3>
							<ul>
								<li><a href="#">Lightbox</a></li>
								<li><a href="#">Diaporamas</a></li>
								<li><a href="#">Scripts</a></li>
								<li><a href="#">Liens</a></li>
								<li><a href="#">Contact</a></li>
							</ul>
						</div>	
					</div>
				</li>
				<li class="droite"></li>
			</ul>

Fichier CSS

/*//////////////////////////////// MENU  /////////////////////// h d b g*/
#menu {
    position: relative;
    z-index: 10;
}

#menu li.gauche{
	float:left;
	display:block;
	width: 35px;
	height: 58px;
	text-align:center;
	position:relative;
	border: 1px solid black;
	margin: 0px 0px 0 -40px;
}
#menu li.menu1{
	float:left;
	display:block;
	width: 315px;
	height: 43px;
	position:relative;
	text-align:center;
	border: 1px solid black;
	padding: 15px 0 0 0
}
#menu li.menu2{
	float:left;
	display:block;
	width: 300px;
	height: 58px;
	position:relative;
	text-align:center;
	border: 1px solid black;
	
}
#menu li.menu3{
	float:left;
	display:block;
	width: 270px;
	height: 58px;
	position:relative;
	text-align:center;
	border: 1px solid black;
}
#menu li.droite{
	float:left;
	display:block;
	width: 50px;
	height: 58px;
	position:relative;
	border: 1px solid black;
}

#menu li.menu1:hover{
	padding: 0;	
	background-color:White;	
	/* Rounded corners */
	-moz-border-radius: 5px 5px 0px 0px;
	-webkit-border-radius: 5px 5px 0px 0px;
	border-radius: 5px 5px 0px 0px;
}	

#menu li a.drop{
	font-family:Arial, Helvetica, sans-serif;
	font-size:20px; 
	color: red;
	display:block;
	outline:0;
	text-decoration:none;
}

.dropdown_4columns {
	width: 600px;
	height: 350px;	
	margin:4px auto;
	float:left;
	position:absolute;
	left:-999em; /* Hides the drop down */
	text-align:left;
	padding:10px 5px 10px 5px;
	border:1px solid #777777;
	border-top:none;
	/* Gradient background */
	background:red;
	background: -moz-linear-gradient(top, white, white);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(white), to(white));

	/* Rounded Corners */
	-moz-border-radius: 0px 5px 5px 5px;
	-webkit-border-radius: 0px 5px 5px 5px;
	border-radius: 0px 5px 5px 5px;
}

.col_1 {
	display:inline;
	float: left;
	position: relative;
	margin-left: 5px;
	margin-right: 5px;
}

#menu li a.article{
	color:black;
	text-shadow: 1px 1px 1px #ffffff;
	font-size:17px; 
	text-decoration:none;
}
#menu li a.article:hover{
	color:blue;
	text-shadow: 1px 1px 1px #ffffff;
	font-size:15px; 
	text-decoration:none;
}

#menu li .drop {
	padding-right:21px;
}

#menu li:hover .dropdown_4columns {
	left:-1px;
	top:auto;
}	
	
#menu li ul {
	list-style:none;
	padding:0;
	margin:0 0 12px 0;
}
#menu li ul li{
	font-size:15px;	
	line-height:24px;
	position:relative;	
	text-shadow: 1px 1px 1px #ffffff;
	padding:0;
	margin:0;
	float:none;
	text-align:left;
	width:180px;
	background-color:red;
}

Merci pour votre aide

-
Edité par psgman80 21 mai 2019 à 13:42:18

Bonjour,

Manque de précisions

Afin d'obtenir de l'aide et une solution à votre problème, il est fortement recommandé de présenter clairement l'état actuel du problème en nous fournissant :

• Un descriptif clair et précis du problème
• La tentative actuelle de résolution que vous avez effectué
• Le résultat attendu et le résultat actuel
• Toutes pistes de recherches pouvant aider à la résolution

-
Edité par Benzouye 21 mai 2019 à 9:19:54

Bonjour,

Désolé j'ai oublié de mettre la pièce jointe

Avec l'image c'est mieux

Bonjour,

Pour ce faire il faut utiliser le flexbox.

Comme ceci : 

<div class="mere">
  
  <div class="enfant">
    
    <div class="enf">test1</div>
    <div class="enf">test2</div>
    
  </div>
  
  <div class="enfant">
    test3
  </div>
  
</div>

.mere{
  display: flex;
  background-color: red;
  width: 200px;
  height: 200px;
}


.enfant {
  
  width: 100px;
  height: 150px;
  background-color: blue;
  margin:10px;
  
}

.enf{
  width: 50px;
  height: 50px;
  background-color: yellow;
  margin:5px auto;
}

Si vous avez des questions n'hésitez pas.