...

View Full Version : 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 (http://imageshack.us/photo/my-images/849/horizontaltoggle.jpg)

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:

<!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 (http://imageshack.us/photo/my-images/69/screenshotbzm.jpg/)

You can find the code I'm playing around with here (http://jsfiddle.net/53Dac/25/)..

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
I opened the html code in a browser and this is what I got:
Screenshot (http://imageshack.us/photo/my-images/69/screenshotbzm.jpg/)


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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum