Bonjour,
J'ai un souci depuis plusieurs minutes concernant un float right et left. Dans une div content, je souhaites créer une sidebar à droite et le reste de mon contenu sur la gauche. J'utilise pour cela bien sur, un float left et un float right.
Il y a 2 problèmes que je n'arrives pas à résoudre :
- En créant mes 2 div ( liste-items et sidebar ) à l'intérieur de ma div content, elles s'affichent en dessous du block
- Lorsque je créer du texte dans la partie gauche, le texte de la partie droite saute autant de ligne qu'il y a de contenu dans la partie gauche
Je vous donne mes sources pour plus de compréhension :
Code html :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Homerent</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- BEGIN HEADER -->
<header>
<div class="wrap">
<a href="#" class="logo"></a>
<span>Travel the world, live like a local <br> Rent your home, just like a hotel</span>
</div>
</header>
<!-- END HEADER -->
<div class="cb"></div>
<div class="wrap">
<!-- BEGIN GLOBAL CONTAINER -->
<div class="container">
<!-- BEGIN LANGUAGE -->
<ul class="lang">
<li>Language selection : </li>
<li id="ja" class="japanese">japanese</li>
<li id="us" class="english">english</li>
</ul>
<!-- END LANGUAGE -->
<div class="cb"></div>
<!-- BEGIN CONTENT BOX -->
<div class="box">
<!-- BEGIN SEARCH BAR -->
<div class="search-bar">
<form action="#" method="post">
<input type="text" id="search" name="search" class="search-text" placeholder="??????" />
<div class="input">
<label for="from">??????</label><br>
<input type="text" id="from" name="from" placeholder="?????" />
</div>
<div class="input">
<label for="to">???????</label><br>
<input type="text" id="to" name="to" placeholder="?????" />
</div>
<div class="input">
<label for="choice">??</label><br>
<select id="choice">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
<button type="submit" class="btn-gray">??</button>
</form>
</div>
<!-- END SEARCH BAR -->
<!-- BEGIN CONTENT -->
<div class="content">
<!-- BEGIN SUB MENU BAR -->
<div class="sub-menu">
<label for="">???</label>
<select id="choice">
<option value="1">??????</option>
<option value="2">??????</option>
<option value="3">??????</option>
<option value="4">??????</option>
<option value="5">??????</option>
<option value="6">??????</option>
</select>
</div>
<!-- END SUB MENU BAR -->
<div class="liste-items">
liste <br>dsfdsf kghkjhkjh <br>hjklhkl
</div>
<div class="sidebar">
jhkjhkjhkjh <br>sdfdsfdsfsd <br>jhkjhkjh <br>kjhqskjdhqkjsdhkjqdh <br>
</div>
</div>
<!-- END CONTENT -->
</div>
<!-- END CONTENT BOX -->
</div>
<!-- END GLOBAL CONTAINER -->
</div>
</body>
</html>Code css :
/**
* Reset browser merge
*/
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;
padding:0;
}
table{
border-collapse:collapse;
border-spacing:0;
}
fieldset,img{
border:0;
}
address,caption,cite,code,dfn,var{
font-style:normal;
font-weight:normal;
}
ol,ul{
list-style:none;
}
q:before,q:after{
content:'';
}
abbr,acronym{
border:0;
}
h1{
color:#8A975B;
line-height:
71px;
float: left;
}
h2{
color:red;
}
h3{
color:blue;
}
h4{
color:orange;
}
body{
background-color : rgb(204,236,249);
}
a{
color:#0072bc;
cursor:pointer;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
button,input,select,textarea{
font-family:Arial,Verdana,sans-serif;
font-size:12px;
border-radius: .4em;
-moz-border-radius: .4em;
-webkit-border-radius: .4em;
outline:none;
border : 2px solid #e1e3e8;
}
input:focus,textarea:focus{
text-decoration : none;
border : 2px solid #b1b3b5;
}
/* Reset merge from a float left or right */
.cb{
clear:both;
}
/* Custom button */
.btn-gray{
font-size: 20px;
font-weight:bold;
color: #FFF;
cursor: pointer;
border : 1px solid #97999c;
text-shadow: 2px 2px 4px #999;
background: -moz-linear-gradient(top, rgba(205,202,198,1) 0%, rgba(225,223,221,1) 50%, rgba(201,198,194,1) 51%, rgba(201,198,194,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(205,202,198,1)), color-stop(50%,rgba(225,223,221,1)), color-stop(51%,rgba(201,198,194,1)), color-stop(100%,rgba(201,198,194,1)));
background: -webkit-linear-gradient(top, rgba(205,202,198,1) 0%,rgba(225,223,221,1) 50%,rgba(201,198,194,1) 51%,rgba(201,198,194,1) 100%);
background: -o-linear-gradient(top, rgba(205,202,198,1) 0%,rgba(225,223,221,1) 50%,rgba(201,198,194,1) 51%,rgba(201,198,194,1) 100%);
background: -ms-linear-gradient(top, rgba(205,202,198,1) 0%,rgba(225,223,221,1) 50%,rgba(201,198,194,1) 51%,rgba(201,198,194,1) 100%);
background: linear-gradient(top, rgba(205,202,198,1) 0%,rgba(225,223,221,1) 50%,rgba(201,198,194,1) 51%,rgba(201,198,194,1) 100%);
}
.btn-gray:hover{
background: -moz-linear-gradient(top, rgba(191,189,185,1) 0%, rgba(209,208,207,1) 50%, rgba(191,188,185,1) 51%, rgba(181,178,175,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(191,189,185,1)), color-stop(50%,rgba(209,208,207,1)), color-stop(51%,rgba(191,188,185,1)), color-stop(100%,rgba(181,178,175,1)));
background: -webkit-linear-gradient(top, rgba(191,189,185,1) 0%,rgba(209,208,207,1) 50%,rgba(191,188,185,1) 51%,rgba(181,178,175,1) 100%);
background: -o-linear-gradient(top, rgba(191,189,185,1) 0%,rgba(209,208,207,1) 50%,rgba(191,188,185,1) 51%,rgba(181,178,175,1) 100%);
background: -ms-linear-gradient(top, rgba(191,189,185,1) 0%,rgba(209,208,207,1) 50%,rgba(191,188,185,1) 51%,rgba(181,178,175,1) 100%);
background: linear-gradient(top, rgba(191,189,185,1) 0%,rgba(209,208,207,1) 50%,rgba(191,188,185,1) 51%,rgba(181,178,175,1) 100%);
}
/* Font face Tangerine */
@font-face {
font-family: 'TangerineRegular';
src: url('fonts/tangerine/tangerine_regular-webfont.eot');
src: url('fonts/tangerine/tangerine_regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/tangerine/tangerine_regular-webfont.woff') format('woff'),
url('fonts/tangerine/tangerine_regular-webfont.ttf') format('truetype'),
url('fonts/tangerine/tangerine_regular-webfont.svg#TangerineRegular') format('svg');
font-weight: normal;
font-style: normal;
}
/* Wrap */
.wrap{
width: 980px;
margin: 0 auto;
position: relative;
}
/* Header */
.logo{
background: url(../images/logo.png) no-repeat;
display: block;
float: left;
width: 130px;
height: 118px;
margin: 20px 0 0 10px;
position : relative;
z-index: 1;
}
.logo + span {
font-family: sans-serif;
padding-top: 50px;
display: block;
font-size: 18px;
font-weight: bold;
}
/* Main content body */
.container{
border-radius: .7em;
-moz-border-radius: .7em;
-webkit-border-radius: .7em;
box-shadow: 0 0 8px #888;
-moz-box-shadow: 0 0 8px #888;
-webkit-box-shadow: 0 0 8px #888;
margin: -30px auto auto auto;
padding: 20px 0 131px 0;
position: relative;
background-image: linear-gradient(bottom, rgb(250,250,250) 35%, rgb(240,239,238) 100%);
background-image: -o-linear-gradient(bottom, rgb(250,250,250) 35%, rgb(240,239,238) 100%);
background-image: -moz-linear-gradient(bottom, rgb(250,250,250) 35%, rgb(240,239,238) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(250,250,250) 35%, rgb(240,239,238) 100%);
background-image: -ms-linear-gradient(bottom, rgb(250,250,250) 35%, rgb(240,239,238) 100%);
}
/* Language selection */
.lang{
float: right;
margin-right: 20px;
}
.lang li{
display: inline-block;
}
.lang li[class]{
margin-left: 15px;
cursor: pointer;
}
.lang li.japanese{
background: url(../images/japanese.png) no-repeat;
height: 18px;
text-indent: -9999px;
width: 25px;
}
.lang li.english{
background: url(../images/english.png) no-repeat;
height: 18px;
text-indent: -9999px;
width: 25px;
}
/* Content */
.box{
background-color: #c9c6c2;
border-radius: .7em;
-moz-border-radius: .7em;
-webkit-border-radius: .7em;
width : 900px;
margin : 87px auto auto auto;
padding: 0px 0 18px 0;
}
/* Search bar*/
.search-bar .input{
display: inline-block;
}
.search-bar input{
display: inline-block;
width : 95px;
height : 30px;
margin-left : 20px;
line-height : 30px;
padding-left : 12px;
}
.search-bar label{
display: inline-block;
margin : 10px 0 9px 20px;
font-size: 10px;
}
.search-bar .search-text{
height : 40px;
width : 338px;
margin : 20px 0 0 20px;
padding-left : 20px;
line-height : 40px;
font-size: 18px;
float: left;
}
.search-bar select{
width:36px;
height:31px;
margin-left : 20px;
}
.search-bar .btn-gray{
width : 148px;
height : 40px;
margin-left: 20px;
margin-right: 20px;
}
/* Content */
.content{
width:860px;
margin: 9px auto auto auto;
background-color: white;
border-radius: 0px 0px .4em .4em;
-moz-border-radius: 0px 0px .4em .4em;
-webkit-border-radius: 0px 0px .4em .4em;
}
/* Sub menu bar */
.sub-menu{
width:100%;
height: 50px;
background-color:#efefef;
line-height: 50px;
font-size:15px;
}
.sub-menu label{
padding-left: 50px;
}
.sub-menu select{
height:26px;
width: 228px;
}
/* Liste items */
.liste-items{
float: left;
width:650px;
border-right: 1px solid #c9c6c2;
}
.sidebar{
float: right;
width:209px;
border-left: 1px solid #c9c6c2;
}Désolé pour le "long" post, et merci d'avance pour votre aide
2 réponses
C'est bon j'ai trouver une solution entre temps en faite.
Pa rapport au grille, je les utilises maintenant, mais je n'arrive toujours pas à mis faire lorsqu'il faut que je créer des "box" dans d'autres "box" car les tailles changes après, et la grille ne marche plus.
Je m'explique, j'ai un conteneur principal dans lequel je créer un autre conteneur qui à une marge de 20px à gauche et à droite du 1er conteneur. Ensuite, je ne peux plus utilisé le système de grille car les tailles ne correspondent plus à cause de mon margin.
Voici le lien de la demo que sur laquelle je travail : Aperçu