four column layout issue

LaurelRose

11-19-2012, 02:54 PM

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:

/* 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;}

Excavator

11-19-2012, 08:34 PM

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 - <!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>
</div>
<div id="pageContact"><h2 class="contactText"> Contact</h2>
</div>
<div id="pageBlog"><h2 class="blogText">Blog</h2>
</div>
<div id="pagePort"><h2 class="portText">Portfolio</h2>
</div>
</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 - <!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>
</div>
<div id="pageBlog"><h2 class="blogText">Blog</h2>
</div>
</div>
<div id="right">
<div id="pagePort"><h2 class="portText">Portfolio</h2>
</div>
<div id="pageContact"><h2 class="contactText"> Contact</h2>
</div>
</div>
</div>
</body>
</html>

LaurelRose

11-19-2012, 09:07 PM

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!

Excavator

11-19-2012, 11:47 PM

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.