Help with div layout..making the inner width of div expand?

joeserhal · 11-17-2011, 08:45 PM

Hi there,
I'm trying to achieve the following:
I have a main Div(A) in the center of my page and 1 div on either side of Div(A) that would horizontally toggle on the click of a button.
What I'm hoping to achieve is that when one of the side Divs is open, the width of Div(A) would decrease but would add a horizontal scrollbar inside of it.

Screenshot of what I'm trying to replicate

What is happening with my code right now, is that when I open Div(B), it pushes Div(A) to the right, outside of my the default page size and the main page gets a horizontal scrollbar..

Any help would be appreciated!
Thanks

Excavator · 11-17-2011, 11:15 PM

Hello joeserhal,
Post your code so we get an idea what you've tried.

I whipped out a very basic demo that at least works in FF9 ... copy/paste this into a new .html document and view it in your browser:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
	margin: 0;
	background: #FC6;
}
.container {
	width: 1000px;
	margin: 30px auto;
	background: #999;
	overflow: auto;
}
.a, .b, .c {height: 400px;}
.b, .c {width: 200px;}
.a {background: #f00;}
.b {
	float: left;
	background: #c60;
}
.c {
	float: right;
	background: #3c9;
}
</style>
</head>
<body>
    <div class="container">
    	<div class="b"></div>
        <div class="c"></div>
        <div class="a"></div>
    <!--end container--></div>
                <div class="container">
                    <div class="c"></div>
                    <div class="a"></div>
                <!--end container--></div>
    <div class="container">
    	<div class="b"></div>
        <div class="a"></div>
    <!--end container--></div>
                <div class="container">
                    <div class="a"></div>
                <!--end container--></div>
</body>
</html>

joeserhal · 11-17-2011, 11:22 PM

Hi Excavator,
first of all, thanks for the reply, I appreciate you taking the time to write code and helping me out with this!

I opened the html code in a browser and this is what I got:
Screenshot

You can find the code I'm playing around with here..

I'm not sure you understood exactly what my original screenshot in the first post was about.. it's basically showing three different scenarios:
1) scenario 1: both side divs are hidden and hence the middle div has a width that fits the page
2) scenario 2: when i toggle/show the side div (that is on the left), the middle div adapts itself and horizontal scrollbar appears inside the middle div
3) scenario 3: when i toggle/show both side divs (the one on the left and the one on the right), again the middle div's adapts and the horizontal scrollbar appears.

Excavator · 11-17-2011, 11:29 PM

Quote:

Originally Posted by joeserhal

I opened the html code in a browser and this is what I got:
Screenshot

Yes, each box is an example of how the layout works:

1st box has a,b and c
2nd box has a and c
3rd box has a and b
4th box has only a

Without having whatever you're using to toggle b and c with, all I could do is demonstrate all 4 states... you should look at the markup and CSS a bit to see what it's doing.