Allinea div accanto a due altri div raggruppati - css, css3, alignment, html

Come posso ottenere quella scatola gialla allineata come sulimmagine? Ho provato un po 'di cose con le celle del tavolo, ma in qualche modo ha distrutto tutto. Ho anche giocato un po 'con le condizioni di galleggiamento, ma anche i risultati sono stati orribili. Mi potete aiutare?

Ecco il mio codice: HTML

<div class="job_board">

<div class="job_box">

<span class="job_title_working_field"> <!-- Just made that span for grouping but it"s unnecessary. -->
<div class="job_title"><h1>Product Development <span class="light">(m/w)</span></h1></div>
<div class="working_field">Fahrzeugtechnik · Mechatronik · Maschinenbau</div>
</span>

<div class="slide_button"></div>

</div>

</div>

CSS

.light {
font-weight: normal;
}

.job_box {
width: 100%;
padding: 30px 50px;
background-color: #082730;
color: white;
text-align: center;
display: table;
}

.working_field {
font-weight: bold;
margin: 0;
font-size: 0.8em;
}

span.job_title_working_field {
table-cell;
}

.slide_button {
position: absolute;
width: 50px;
height: 100%;
background: yellow;
display: table-cell;
}

JSFiddle

risposte:

1 per risposta № 1

Da .slide_button è all'interno di un elemento, dovresti semplicemente posizionare relativamente l'elemento genitore:

.job_box {
position: relative;
width: 100%;
padding: 30px 50px;
background-color: #082730;
color: white;
text-align: center;
display: table;
font-family: "Helvetica", sans-serif;
}

E quindi posizionare assolutamente il giallo .slide_button elemento in alto / a destra - relativo al genitore.

ESEMPIO AGGIORNATO QUI

.slide_button {
position: absolute;
right: 0;
top: 0;
width: 50px;
height: 100%;
background: yellow;
}

Se si guarda l'esempio sopra, si noterà che è presente una barra di scorrimento orizzontale. Se vuoi rimuovere questo, usa box-sizing:border-box per includere il padding all'interno del .job_box calcoli delle dimensioni dell'elemento.

ESEMPIO AGGIORNATO QUI

.job_box {
box-sizing:border-box;
-moz-box-sizing:border-box;
}

Vale anche la pena notare che ho rimosso il valore predefinito 8px margine sul body elemento.. body{margin:0}

---

1 per risposta № 2

Ho modificato un po 'l'ordine di markup e aggiornato il css

stai combinando troppi stili: table-cell + absolute + float non mescolare bene

http://jsfiddle.net/pixelass/3Qqz4/2/

HTML:

<div class="job_board">
<div class="job_box">
<div class="slide_button"></div>
<div class="job_title_working_field">
<div class="job_title">
<h1>Product Development <span class="light">(m/w)</span></h1>
</div>
<div class="working_field">Fahrzeugtechnik · Mechatronik · Maschinenbau</div>
</div>
</div>
</div>

CSS:

* {
margin: 0;
padding: 0;
}
.light {
font-weight: normal;
}
.job_box {
width: 100%;
background-color: #082730;
color: white;
text-align: center;
display: block;
font-family:"Helvetica", sans-serif;
position: relative;
height: 120px;
vertical-align: top;
}
.job_title h1 {
margin: 0;
}
.working_field {
font-weight: bold;
margin: 0;
font-size: 0.8em;
}
.job_title_working_field {
padding: 30px 50px;
}
.slide_button {
width: 50px;
height: 100%;
background: yellow;
float: right;
}

---