Line type

by matmat

HTML

<div id="Relations">
<div class="Title h40">
    <div class="wrapper1">
        <div class="helper"></div>
        <div class="content">
            <img src="http://www.junkst.com/Images/Icones/logo_junkst.png" alt="Junkst" title="Junkst" />
        </div>
        <div class="content2">Mon actualité</div>
    </div>
    <div class="wrapper2">
        <div class="helper"></div>
        <div class="content3">
            <img src="http://www.junkst.com/Images/Icones/arrowdown.png" alt="Junkst" title="Junkst" />
        </div>
    </div>
</div>

CSS

html, body {
    /* suppression des éventuels styles par défaut */
    margin:0;
    padding:0;
    font-size:100%;
    /* on spécifie un repère pour le calcul des hauteurs */
    height:100%;
    font-family:Georgia;
    padding:10px;
}
#Relations {
    /* hauteur de la fenêtre, par rapport à laquelle les éléments vont être alignés */
    width:354px;
}
.h30 {
  height:30px;
}

.h40 {
  height:40px;
}

.Title {
    /* hauteur de la fenêtre, par rapport à laquelle les éléments vont être alignés */
    
    height:40px;
    background:whitesmoke;
    box-sizing:border-box;
}
.helper, .content, .content2, .content3 {
    /* on permet à ces éléments de s'aligner verticalement */
    display:inline-block;
    vertical-align:middle;
}
.helper {
    /* hauteur de la fenêtre, par rapport à laquelle les éléments vont être alignés */
    height:100%;
}
.content {
    /* des dimensions au hasard */
    height:70%;
    margin-left:2%;
    /* on le rend visible */
    background:red;
}

.content2 {
 
    margin-left:2%;
}
.content3 {
    /* des dimensions au hasard */
    height:50%;
    right:0;
    /* on le rend visible */
}
.content img {
    height:100%;
}
.content3 img {
    height:100%;
}
.wrapper1 {
    width:85%;
    height:100%;
    display:inline-block;
    vertical-align:middle;
    box-sizing:border-box;
}
.wrapper2 {
    width:10%;
    height:100%;
    display:inline-block;
    vertical-align:middle;
    box-sizing:border-box;
}

.publiwrapper {
    position:relative;
    width:90%;
    margin:auto;
    padding:5%;
    background:cyan;
}

.publi1 {
    position:relative;
    line-height:100%;
    border:1px solid grey;
    padding-left:10%;
    border:1px solid gainsboro;
    color:grey;
    padding-top:5%;
    font-size:1rem;
}