<html>
<head>
<style type="text/css">
.parent
{
width: auto;
height: auto;
min-width: 600px;
min-height: 600px;
border: 1px dashed #f00;
padding: 5px;
overflow: auto;
position: absolute;
}
.child
{
width : 100px;
height: 500px;
border: 1px solid #0f0;
float: left;
position: relative;
}
.second_child
{
width : 1800px;
height: 100px;
border: 1px solid black;
float: left;
position:relative;
}
</script>
</style>
</head>
<body style="overflow:auto">
<div class="parent">
<div class="child">
</div>
<div class="second_child">
</div>
</div>
</body>
</html>
I’m trying to put two box in a bigger box. I got it next to each other and it works fine now if I expand the second box width to larger then the width of the window.
Example your screen is 1024×720 the width of the second box is 1800px the second box repositions underneath the first box. I’m just curious why it does that and not put a scroll bar and keep the position of the objects.
Am I positioning it wrong, or am I thinking about this in a wrong manner. I’m almost to tempted to try this with a table as a layout but that seems so counter intuitive to me.
That’s the essence of floating DOM elements. They don’t force anything. If you want them to stay side by side, you need to give the container a width to support the contents (> 1904px).