Align images/divs next to each other horizontally without setting the width of the container div

Question

Here is my code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
#image_container
{
    position:absolute;
    top:100px;
    left:0px;
    height:420px;
}
.folder_image
{
    background:url(folder.png) top no-repeat;
    width:679px;
    height:420px;
    top:0px;
    left:0px;
    position:relative;
    float:left;
    margin-right:50px;  
}
</style>
</head>

<body>
<div id="overflow_container">
    <div id="image_container">
        <div class="folder_image"></div>
        <div class="folder_image"></div>
    </div>
</div>
</body>
</html>

This is what I am trying to achieve : As and when I add new divs with the class folder_image , the divs should sit one next to each other horizontally. I know that this can be done by setting the width of the parent container , #image_container in my case , but how do I do it without setting the width of #image_container

Thanks in advance.

@AugustinRiedinger : you got me! I will try with the scrolling but I am not able to figure out the alignment — Harsha Venkataramu, Jun 13 '13 at 06:59

score 1 · Answer 1 · answered Jun 13 '13 at 06:57

1

try this

.folder_image
{
    background:url(folder.png) top no-repeat #030;
/*    width:679px;*/
    height:420px;
/*  top:0px;
    left:0px;
    position:relative;
    float:left;*/
    margin-right:50px;  
    display:inline-block;
}

jsFiddle File

answered Jun 13 '13 at 06:57

Roy Sonasish

4,571
20
31

score 1 · Answer 2 · answered Jun 13 '13 at 06:59

1

Use float:left; to .folder_image

DEMO http://jsfiddle.net/yeyene/YnUGb/1/

.folder_image
{
    background:url(folder.png) top no-repeat;
    width:200px;
    height:200px;
    float:left;
    margin:20px;  
}

answered Jun 13 '13 at 06:59

yeyene

7,297
1
21
29

The divs are coming one below the other in the fiddle example(2 divs in each row),I want them to come next to each other. – Harsha Venkataramu Jun 13 '13 at 07:02
resize the result frame and see. – yeyene Jun 13 '13 at 07:03

score 1 · Accepted Answer · edited May 23 '17 at 11:57

1

My solution :

#image_container
{
    position:absolute;
    top:100px;
    left:0px;
    height:420px;
    overflow-x: scroll;
    overflow-y: none;
    white-space:nowrap;
}
.folder_image
{
    background:red;
    width:679px;
    height:420px;
    display: inline-block;
    margin-right:50px;  
}

Fiddle: http://jsfiddle.net/eKW46/

This post helped me : CSS horizontal scroll

edited May 23 '17 at 11:57

Community

1
1

answered Jun 13 '13 at 07:03

Augustin Riedinger

20,909
29
133
206

Align images/divs next to each other horizontally without setting the width of the container div

3 Answers3