Solved

Position DIVs horizontally

Posted on 2010-09-01
9
363 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
ID: 33574839
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
ID: 33575268
<!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
ID: 33575278
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
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 

Author Comment

by:softwarea
ID: 33576360
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
 
LVL 3

Expert Comment

by:vimalraja
ID: 33577105
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
ID: 33577659
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
ID: 33585304
@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
ID: 33586269
@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
ID: 33586324
@ 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

820 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