Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    May 2007
    Posts
    50
    Thanks
    1
    Thanked 0 Times in 0 Posts

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

    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
    Last edited by joeserhal; 11-17-2011 at 08:51 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    May 2007
    Posts
    50
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Last edited by joeserhal; 11-17-2011 at 11:28 PM.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by joeserhal View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •