asked on

Position DIVs horizontally

Hi guys,

please have a look at the HTML / CSS code attached.

My goals are:

1. All content divs should be positioned side by side within the wrapper div.
2. Obviously the wrapper div is not wide enough to display all content divs on one line. That's I would like to have a horizontal scrollbar within the wrapper div.
3. The content divs should have vertical scrollbars in case they are needed (e.g. content1).

All this needs to work at least in IE 7.

Could anybody help me out? Hopefully there is a solution at all...

<style type="text/css">
    #wrapper
    {
        height: 50px;
        width: 200px;
        border: 1px solid blue;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .content
    {
        float: left;
        width: 150px;
        border: 1px solid red;
        overflow-x: hidden;
        overflow-y: auto;
    }
</style>
<div id="wrapper">
    <div id="content1" class="content">
        Content 1<br />
        Content 1<br />
        Content 1<br />
        Content 1<br />
        Content 1<br />
        Content 1<br />
    </div>
    <div id="content2" class="content">
        Content 2
    </div>
    <div id="content3" class="content">
        Content 3
    </div>
    <div id="content4" class="content">
        Content 4
    </div>
</div>

Open in new window

qwerty021600

U need to give vertical scrollbar to wrapper div, then only u'll be able to view the content below by giving
#wrapper
{
height: 50px;
width: 200px;
border: 1px solid blue;
overflow-x: auto;
overflow-y: hidden;
}

else increase the height of wrapper div

qwerty021600

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Haughton Exhibitions.</title>
<meta name="keywords" content="Haughtons">
<meta name="description" content="H">
<style type="text/css">
#wrapper
{
height: 100px;
border: 1px solid blue;
overflow-y: hidden;
overflow-x: auto;
}
.content
{
float: left;
width: 150px;
border: 1px solid red;
}
</style>

</head>

<body >
<div id="wrapper">
<div id="content1" class="content">
Content 1<br />
Content 1<br />
Content 1<br />
Content 1<br />
Content 1<br />
Content 1<br />
</div>

<div id="content2" class="content">
Content 2
</div>
<div id="content3" class="content">
Content 3
</div>
<div id="content4" class="content">
Content 4
</div>
<div style="clear: both;"></div>
</div>

</body>

</html>

qwerty021600

If u set the width of the outer div and give Inner Div's den it'll show one on another rather then showing side-by side
But if u want them to be placed side-by-side.. it's better not to specify the width of wrapper div.

also it wont show vertical scrollbar of inner div because it is showing scrollbar in its parent div.

softwarea

ASKER

Hello qwerty,

thanks for all your support. However, I'm not sure if you understood my problem.

I WANT the content divs to be side by side!
I do NOT want them in the regular order, which means: I do not want them under each other.
I WANT each content div to have a vertical scrollbar of its own, if neccessary.

Also, the Width and the Height of the wrapper are fixed. I can't drop these properties...

I also didn't understand your first posting. Here you write that I need to assign a vertical scrollbar to the wrapper div. Why would I do that? That's exactly what I don't want!
I don't want to scroll the wrapper div vertically. However I want to scroll the wrapper horizontally. And no line wrap for the content divs. All content divs should be side-by-side.

Let me try a little picture:

------------------------------------------
[ Content 1 ] [ Content 2 ][ Conte
------------------------------------------
<--------------------------------------->

So, all content divs should be side by side. However, in the beginning not all content divs are visible. That's why I need a horzizontal scrollbar below. This is my goal.

I hope this was better to understand and you have some more ideas?

Thanks again!

vimalraja

Hi,

I hope this is what you were looking for. I have given #wrapper" overflow-x:scroll;" and I have given .content "display:table-cell;" and "min-width: 90px;". Minimum width is given to show the vertical scroll bar. If you don't want vertical scroll bar and wants your content to adjust automatically according to the wrapper width, then replace "min-width: 90px;" with "width:90px;" ...

Apologies if you find my english crappy and confusing. Let my code do the talking. :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>scroll</title>

<style type="text/css">
    body
    {
    	margin:0;
    	padding:0;
    	font:normal 11px/normal arial,verdana, sans-serif;
    }
    #wrapper
    {
        height: 150px;
        width: 400px;
        border: 1px solid #ccc;
        background:#ddd;
        overflow-x:scroll;
    }
    .content
    {
    	display:table-cell;
        min-width: 90px;
        background:#f9f9f9;
        height:90px;
        border:1px solid #ddd;
        
    }
</style>
</head>
<body>
<div id="wrapper">

        <div id="content1" class="content">
            Content 1 <br />
            Content 1<br />
            Content 1<br />
            Content 1<br />
            Content 1<br />
            Content 1<br />
        </div>
        <div id="content2" class="content">
            Content 2
        </div>
        <div id="content3" class="content">
            Content 3
        </div>
        <div id="content4" class="content">
            Content 5
        </div>
        <div id="Div1" class="content">
            Content 6
        </div>
        <div id="Div2" class="content">
            Content 7
        </div>
</div>

</body>
</html>

Open in new window

softwarea

ASKER

Hi vimalraja,

hey, your English is great! :-)

But could you please tell me the rest of your .content definition? It was cut after line 24. And whatever I added myself so far didn't work (see my code snippet below).

I attached a screenshot of the current output. All I need now is content3 and content4 to move up on the same line as content2.
If that works I think I'm finally where I want to be.

Thanks!

    .content
    {
        display:table-cell;
        min-width: 90px;
        float: left;
        width: 150px;
        border: 1px solid red;
    }

Open in new window

Screenshot.gif

softwarea

ASKER

@vimalraja:

Ups, suddenly I had access to your full code.

And we are very close. But: it does not work correctly in IE 7. All divs are still under each other instead of side by side.
Maybe you do have a final clue for IE7?

ASKER CERTIFIED SOLUTION

vimalraja

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

softwarea

ASKER

@ vimalraja

Hey again,

yes, that's great! Works perfectly now. IE7 only is fine for me as my customers only use this browser.
However, I might switch to using tables. But only if I can make the horzontal scrollbar work with a table too.

Thanks so much for your help.
I'm going to study you solution now! :-)