2 div inline too big to fit - html

Question

I got 2 main div that i'm trying to make appear on the same line. I'm struggling with the CSS to get what I want.
First div is a kind of menu, displaying categories. I can have more or less of them (should be dynamic). Second div is displaying main buttons/shortcuts and is static.
Goal:
both div on same line
second div (button-container) taking 25% of the page on the right
first div (category-container) taking whatever is left, on the left of the page. Overflow hidden, size of each indivual cells will be adjusted with javascript so everything can fit.
section.home {
white-space: nowrap;
}
section.home > div.category-container {
width: 75%;
overflow: hidden;
display: inline;
}
section.home > div.buttons-container {
width: 25%;
height: 300px;
display: inline-block;
background-color: #EEEEEE;
}
section.home > div.category-container > ul > li {
padding-right: 15px;
padding-left: 15px;
padding-bottom: 15px;
display: inline-block;
}
div.category {
width: 200px;
height: 300px;
text-align: center;
box-shadow: 0 3px 5px #aaa;
background: White none repeat scroll 0 0;
border: 1px solid #ccc;
overflow: hidden;
}
div.category > div.category-title {
padding: 5px;
background-color: #EEEEEE;
color: rgb(254, 107, 3);
font-weight: bold;
}
div.category > a > img {
width: 200px;
}
div.category_content {
padding-top: 10px;
padding-bottom: 10px;
}
<section class="home">
<div class="category-container">
<ul>
<li>
<div class="category">
<div class="category-title">
<span class="font_16">Title 1</span>
</div>
<a href="#">
<img src="#" />
</a>
<div class="category-content">
sutcategory1
<br/>subcategory2
<br/>subcategory 3
</div>
</div>
</li>
<li>
<div class="category">
<div class="category-title">
<span class="font_16">Title 2</span>
</div>
<a href="#">
<img src="#" />
</a>
<div class="category-content">
sutcategory1
<br/>subcategory2
<br/>subcategory 3
</div>
</div>
</li>
<li>
<div class="category">
<div class="category-title">
<span class="font_16">Title 3</span>
</div>
<a href="#">
<img src="#" />
</a>
<div class="category-content">
sutcategory1
<br/>subcategory2
<br/>subcategory 3
</div>
</div>
</li>
</ul>
</div>
<div class="buttons-container">
Buttons container
</div>
</section>

Answer 1

By adding float: left; to the .category-container you are able to format the div's side-by-side.
section.home>div.category-container {
width: 75%;
overflow: hidden;
display: inline;
float: left; /* Float left is what you need */
}
I've updated your HTML & CSS with this edit:
section.home {
white-space: nowrap;
}
section.home > div.category-container {
width: 75%;
overflow: hidden;
display: inline;
float: left;
}
section.home > div.buttons-container {
width: 25%;
height: 300px;
display: inline-block;
background-color: #EEEEEE;
}
section.home > div.category-container > ul > li {
padding-right: 15px;
padding-left: 15px;
padding-bottom: 15px;
display: inline-block;
}
div.category {
width: 200px;
height: 300px;
text-align: center;
box-shadow: 0 3px 5px #aaa;
background: White none repeat scroll 0 0;
border: 1px solid #ccc;
overflow: hidden;
}
div.category > div.category-title {
padding: 5px;
background-color: #EEEEEE;
color: rgb(254, 107, 3);
font-weight: bold;
}
div.category > a > img {
width: 200px;
}
div.category_content {
padding-top: 10px;
padding-bottom: 10px;
}
<section class="home">
<div class="category-container">
<ul>
<li>
<div class="category">
<div class="category-title">
<span class="font_16">Title 1</span>
</div>
<a href="#">
<img src="#" />
</a>
<div class="category-content">
sutcategory1
<br/>subcategory2
<br/>subcategory 3
</div>
</div>
</li>
<li>
<div class="category">
<div class="category-title">
<span class="font_16">Title 2</span>
</div>
<a href="#">
<img src="#" />
</a>
<div class="category-content">
sutcategory1
<br/>subcategory2
<br/>subcategory 3
</div>
</div>
</li>
<li>
<div class="category">
<div class="category-title">
<span class="font_16">Title 3</span>
</div>
<a href="#">
<img src="#" />
</a>
<div class="category-content">
sutcategory1
<br/>subcategory2
<br/>subcategory 3
</div>
</div>
</li>
</ul>
</div>
<div class="buttons-container">
Buttons container
</div>
</section>

Answer 2

The problem is your ul, setting it to inline-block does the trick.
It crashed for small windows, because .category has a fixed width.
section.home > div.category-container UL {
display: inline-block;
}
section.home {
white-space:nowrap;
}
section.home > div.category-container {
width:70%;
overflow:hidden;
display:inline;
}
section.home > div.category-container UL {
display: inline-block;
}
section.home > div.buttons-container {
width:25%;
height:300px;
display:inline;
background-color:#EEEEEE;
}
section.home > div.category-container > ul > li {
padding-right:15px;
padding-left:15px;
padding-bottom:15px;
display:inline-block;
}
div.category {
width:200px;
height:300px;
text-align:center;
box-shadow:0 3px 5px #aaa;
background:White none repeat scroll 0 0;
border:1px solid #ccc;
overflow:hidden;
}
div.category > div.category-title {
padding:5px;
background-color:#EEEEEE;
color:rgb(254,107,3);
font-weight:bold;
}
div.category > a > img {
width:200px;
}
div.category_content {
padding-top:10px;
padding-bottom:10px;
}
<section class="home">
<div class="category-container">
<ul>
<li>
<div class="category">
<div class="category-title">
<span class="font_16">Title 1</span>
</div>
<a href="#">
<img src="#" />
</a>
<div class="category-content">
sutcategory1<br/>
subcategory2<br/>
subcategory 3
</div>
</div>
</li>
<li>
<div class="category">
<div class="category-title">
<span class="font_16">Title 2</span>
</div>
<a href="#">
<img src="#" />
</a>
<div class="category-content">
sutcategory1<br/>
subcategory2<br/>
subcategory 3
</div>
</div>
</li>
<li>
<div class="category">
<div class="category-title">
<span class="font_16">Title 3</span>
</div>
<a href="#">
<img src="#" />
</a>
<div class="category-content">
sutcategory1<br/>
subcategory2<br/>
subcategory 3
</div>
</div>
</li>
</ul>
</div>
<div class="buttons-container">
Buttons container
</div>
</section>