Solved

Position DIVs horizontally

Posted on 2010-09-01
9
359 Views
Last Modified: 2012-05-10
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

0
Comment
Question by:softwarea
  • 4
  • 3
  • 2
9 Comments
 
LVL 13

Expert Comment

by:qwerty021600
Comment Utility
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
0
 
LVL 13

Expert Comment

by:qwerty021600
Comment Utility
<!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>
0
 
LVL 13

Expert Comment

by:qwerty021600
Comment Utility
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.
0
 

Author Comment

by:softwarea
Comment Utility
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!

0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 3

Expert Comment

by:vimalraja
Comment Utility
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

0
 

Author Comment

by:softwarea
Comment Utility
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
0
 

Author Comment

by:softwarea
Comment Utility
@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?
0
 
LVL 3

Accepted Solution

by:
vimalraja earned 500 total points
Comment Utility
@softwarea

I am afraid ie7 and ie6 does not support the property display:table-cell;, but you can replicate the effect by ie7 specific style(conditional comment) to "#wrapper and each" .content" div. I am attaching the full code below. Please not that this is "not recommended" as you have to manually type the "left" value for each div that you add.  I think the best way to make it work in ie7 is by using tables and I don't think it will work in ie6 :(
<!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>
<!--[if IE 7]>
<style type="text/css">
#wrapper{
position:relative;
}
.content{
        position:absolute;
        width:90px;
    }
    .content+div
    {
    	left:90px;
    }
    .content+div+div
    {
    	left:180px;
    }
    .content+div+div+div
    {
    	left:270px;
    }
    .content+div+div+div+div
    {
    	left:360px;
    }
</style>
<![endif]-->
</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

0
 

Author Comment

by:softwarea
Comment Utility
@ 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! :-)
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now