CSS težava

Pozdravljeni,

pri izdelavi spletne strani sem prišel do težave pri css pozicioniranju, kjer trenutno ne najdem enostavne rešitve, zato se obračam k vam za pomoč, če bi kdo poznal rešitev za mojo težavo.

Situacijo je v resnici bolj komleksne narave, vendar jo bom zelo poenostavil, da bo čimpreprostejše in hitro razumljiva.

Torej imam 3 DIV-e. Parent DIV kateri mora imeti točno določeno velikost (višina, širina) ter dva child DIV-a, prav tako s fikno velikostjo.

Želel bi imeti tako kot je prikazano na prvem primeru.

Primer1:

---------------
|   <DIV1> <DI|V2>
---------------

Tukaj vidimo, da je del drugega child DIV-a izven fiksnih mer parent DIV-a, ker je ta malo premajhen po širini.

V druhem primeru pa je prikazano kaj se v resnici zgodi. Ker je okvirček (parent DIV) premajhen po širini, se le ta razširi po fišini, child DIV2 pa se wrap-a v spodnjo vrstico, kar je tudi logično in v 99% uporabno, vendar jaz želim imeti stanje iz prvega primera.

Primer2:

---------------
|    <DIV1>   |
|    <DIV2>   |
---------------

Dodal bom še kodo:

<div id="parent_div">
        <div id="div1">div1</div>
        <div id="div2">div2</div>
</div>

#parent_div {
	position: relative;
	height: 25px;
	width: 150px;
	overflow: hidden;
        white-space: nowrap;
	display: inline-block;
}
#div1, #div2 {
	float: left;
        position: relative;
        width: 95px;
        height: 25px;
	display: inline-block;
}

Za kakeršen koli namig se vam že v naprej zahvaljujem.

Lep dan, Tadej

Kaj takšnega? https://jsfiddle.net/he9of1rv/3/

#parent_div {
    position: relative;
    height: 25px;
    width: 150px;
        white-space: nowrap;
    display: inline-block;
}
#div1, #div2 {
        position: relative;
        width: 95px;
        height: 25px;
    display: inline-block;
}