overflow scroll not working

[MDanz]

i want box 1 and box 2 horizontally next to each other. I want the parent div if the content overflows to scroll and box1 and box2 horizontally next to each other.

i tried below but box2 keeps going underneath box1. the scroll is necessary.

<div id='parent'>
<div id='box1'></div>
<div id='box2'></div>
</div>

#parent {
overflow:scroll;
width:100%;
}

#box1 {
float:left;
width:100px;
height:100px;
}

#box2 {
float:left;
}

[scottloway]

You could change your css to something like the below:

#parent {
overflow-y: scroll;
width: 100%;
}

#box1 {
width: 15%;
float: left;
}

#box2 {
width: 80%;
float: right;
}

I think this achieves what you're asking.

[MDanz]

how do i make the overflow:scroll horizontal rather than vertical in the example below

http://www.w3schools.com/css/tryit.asp?filename=trycss_overflow

[cssrichinfo]

element.style {
float: left;
height: 405px;
overflow-x: hidden;
overflow-y: scroll;
padding-right: 15px;
width: 470px;
}

fix the height of the box then it wil work

[MDanz]

i don't understand .. in my code do i apply this to the parent div?

[MDanz]

i tried this but it didn't work. the box go beneath one another.

<style type="text/css">
  #parent {
overflow:scroll;
width:100px;
}


.box1 {

border:1px solid black;
float: left;
height: 101px;
overflow-x: hidden;
overflow-y: scroll;
padding-right: 15px;
width: 101px;
}
</style>


<div id='parent'>
<div class='box1'></div>
<div class='box1'></div>
</div>

[MDanz]

what i'm trying to accomplish is two boxes next to each other inside a div, which i can scroll horizontally to see the two boxes. if you copy the code below it works correctly, only because the width of the parent div is set.

<style type="text/css">


#container {
overflow:scroll;
width:100px;
}

  #parent {
overflow:hidden;
width:400px;
}

.box1 {

border:1px solid black;
float: left;
height: 101px;
width: 101px;
}

</style>

<div id='container'>
<div id='parent'>
<div class='box1'></div>
<div class='box1'></div>
</div>
</div>

if i change width:900px in the parent div to width:auto then the boxes go underneath one another. That's the problem, the parent div should auto adjust to the width of both boxes.

i'd really appreciate someone solving this. i can't have a fixed width on the parent div it should auto adjust and both boxes should be next to each other.

[scottloway]

Try the below in it's entirety; I'm reasonably sure this is what you're asking, though I'm not clear if you want to make it fluid (therefore, the width: auto on #parent) or not. With fixed widths, the below should work fine.

<style type="text/css">
#container {
	overflow-x: scroll;
	width:100px;
}

#parent {
	overflow:hidden;
	width:200px;
}

#parent div {
	float: left;
	border:1px solid black;
	height: 98px;
	width: 98px;
}

.box1 {
	background: yellow;
}

.box2 {
	background: lightgreen;
}

</style>
<div id='container'>
    <div id='parent'>
        <div class='box1'></div>
        <div class='box2'></div>
    </div>
</div>