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 to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts

    four column layout issue

    Hi everyone,

    I am attempting to create a layout with four sections. As you hover over the two top sections, the div expands and hides the div underneath. The first section, About, expands on hover, but then the div underneath - Blog, jumps to the right and covers the Contact section. I want the Blog section to be pushed down and out of view, not over. Any suggestions? Thanks for reading this and for any suggestions/solutions to this.

    Here is the link:http://www.laurelnatale.me/tester14.html

    here is the css:

    Code:
     /* container setting up the responsive columns and rows*/
    #container {width: 100%; height: 100%; margin:0; overflow: hidden; position: absolute; z-index:0; } 
    /* this sets the height of the right columns in pixels and then is hidden so responsive divs can take the stage. */
    #column-hide {position: absolute; z-index:0; float:left;  z-index:0; height: 10000px; top: 0px; left: 0px; visibility:hidden;}
    /* this sets the height of the right columns in pixels and then is hidden so responsive divs can take the stage. */
    #column-2hide {position: absolute; z-index:0; float:right;  z-index:0; height: 10000px; top: 0px; left: 0px; visibility:hidden;}
     
     /* columns and rows based off of hidden column values */
    #pageAbout {width: 50%; height:50%; z-index:0; float: left; margin: 0; overflow:hidden; background: hsl(0, 0%, 85%); color:hsl(0, 0%, 85%);}
    #pageAbout:hover{height:100%; overflow:auto; color:hsl(0, 0%, 25%);}
    
    #pagePort {width: 50%; height:50%; z-index:0; float: right; margin: 0; overflow:hidden; background: hsl(0, 0%, 44%); color: hsl(0, 0%, 44%);}
    #pagePort:hover{height:100%; overflow-y:scroll; overflow-x:hidden; color: hsl(0, 0%, 85%);}
    
    #pageBlog {width: 50%; height:50%; z-index:0; float:left; margin: 0; overflow:hidden;  background: hsl(0, 0%, 71%); color: hsl(0, 0%, 71%);}
    #pageBlog:hover{height:100%; overflow:auto; color:hsl(0, 0%, 25%); overflow:scroll;}

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,666
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Hello LaurelRose,
    Not really a fan of the huge hidden column. I think there are better ways of doing a 2 column layout. As far as using that method in the layout you're building now, I'm not sure I see the need.

    When #pageBlog gets pushed over instead of down, your floats are dropping just like they are supposed to. #pageContact isn't being covered, it's getting pushed off the screen.
    To make the floats push each other down, you'll need to re-arrange your markup and use some clear.
    Look at this stripped down version -
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font-size: 100%;
    	width: 100%;
    	height: 100%;
    	margin: 0;
    	padding: 0;
    }
    #container {
    	width: 100%;
    	height: 100%;
    	margin: 0;
    	overflow: hidden;
    }
    #pageAbout, #pagePort,
    #pageBlog, #pageContact {
    	width: 50%;
    	height: 50%;
    	overflow: hidden;
    }
    #pageAbout, #pageBlog {
    	float: left;
    	clear: left;
    }
    #pagePort, #pageContact {
    	float: right;
    	clear: right;
    }
    	#pageAbout:hover, #pagePort:hover,
    	#pageBlog:hover, #pageContact:hover {
    		height: 100%;
    		overflow-y: scroll;
    		overflow-x: hidden;
    		color: #f00;
    	}
    #pageAbout {
    	background: #ccc;
    	color: #333;
    }	
    #pagePort {
    	background: #fc6;
    	color: #0f0;
    }
    #pageBlog {
    	background: #960;
    	color: #9c0;
    }
    #pageContact {
    	background: #09f;
    	color: #600;
    }
    h2 {text-align: center;}
    </style>
    </head>
    <body>
        <div id="container">
                <div id="pageAbout"><h2 class="aboutText">About</h2>
                <!--end pageAbout--></div>
                <div id="pageContact"><h2 class="contactText"> Contact</h2>
                <!--end pageContact--></div>
                <div id="pageBlog"><h2 class="blogText">Blog</h2>
                <!--end pageBlog--></div>
                <div id="pagePort"><h2 class="portText">Portfolio</h2>
                <!--end pagePort--></div>
        <!--end container--></div>
    </body>
    </html>
    OR, maybe you'll like a little bit simpler version that uses a couple extra containing elements to keep the floats in line -
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font-size: 100%;
    	width: 100%;
    	height: 100%;
    	margin: 0;
    	padding: 0;
    }
    #container {
    	width: 100%;
    	height: 100%;
    	margin: 0;
    	overflow: hidden;
    }
    #left, #right {
    	height: 100%;
    	width: 50%;
    }
    	#left {float: left;}
    	#right {float: right;}
    #pageAbout, #pagePort,
    #pageBlog, #pageContact {
    	width: 100%;
    	height: 50%;
    	overflow: hidden;
    }
    	#pageAbout:hover, #pagePort:hover,
    	#pageBlog:hover, #pageContact:hover {
    		height: 100%;
    		overflow-y: scroll;
    		overflow-x: hidden;
    		color: #f00;
    	}
    #pageAbout {
    	background: #ccc;
    	color: #333;
    }	
    #pagePort {
    	background: #fc6;
    	color: #0f0;
    }
    #pageBlog {
    	background: #960;
    	color: #9c0;
    }
    #pageContact {
    	background: #09f;
    	color: #600;
    }
    h2 {text-align: center;}
    </style>
    </head>
    <body>
        <div id="container">
        	<div id="left">
                <div id="pageAbout"><h2 class="aboutText">About</h2>
                <!--end pageAbout--></div>
                <div id="pageBlog"><h2 class="blogText">Blog</h2>
                <!--end pageBlog--></div>
            <!--end left--></div>
            <div id="right">
                <div id="pagePort"><h2 class="portText">Portfolio</h2>
                <!--end pagePort--></div>
                <div id="pageContact"><h2 class="contactText"> Contact</h2>
                <!--end pageContact--></div>
            <!--end right--></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

  • Users who have thanked Excavator for this post:

    LaurelRose (11-19-2012)

  • #3
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Thank you, but hidden columns needed.

    I need the hidden columns to create the four sections that will always fill the the screen no matter what size or when resized. I have tried using the clear though. The about section no longer pops over, but the Contact section does. Getting close now though. Thank you so much for your suggestion!

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,666
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Quote Originally Posted by LaurelRose View Post
    I have tried using the clear though. The about section no longer pops over, but the Contact section does.


    In that example that uses clear, you'll notice the 4 main elements are presented in a different order. There is more to do than just changing your CSS, in both my examples.
    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
    •