[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Position DIVs horizontally

Posted on 2010-09-01
9
Medium Priority
?
371 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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 2000 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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

656 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