Wyrównaj div obok dwóch innych zgrupowanych div - css, css3, alignment, html

Jak mogę dopasować żółte pudełko tak jak naobrazek? Próbowałem kilku rzeczy z komórkami tabeli, ale to wszystko zniszczyło. Grałem też trochę z warunkami float, ale wyniki też były okropne. Możesz mi pomóc?

Oto mój kod: 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

Odpowiedzi:

1 dla odpowiedzi № 1

Od .slide_button jest w elemencie, po prostu względnie umieściłbyś element nadrzędny:

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

A potem całkowicie ustaw kolor żółty .slide_button element u góry / po prawej - względem rodzica.

ZAKTUALIZOWANY PRZYKŁAD TUTAJ

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

Jeśli spojrzysz na powyższy przykład, zauważysz, że obecny jest poziomy pasek przewijania. Jeśli chcesz to usunąć, użyj box-sizing:border-box w celu uwzględnienia dopełnienia w .job_box obliczenia wymiarów elementu.

ZAKTUALIZOWANY PRZYKŁAD TUTAJ

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

Warto również zauważyć, że usunąłem domyślne 8px marża na body element.. body{margin:0}

---

1 dla odpowiedzi nr 2

Zmieniłem trochę kolejność znaczników i zaktualizowałem css

łączysz zbyt wiele stylów: table-cell + absolute + float nie mieszaj dobrze

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;
}

---