View Full Version : Need help with layout

12-27-2009, 03:10 AM
I'm trying to create this layout, but I'm not 100% sure how to go about it.


The background image will be fullscreen using the SUPERSIZER 2.0 (http://www.buildinternet.com/project/supersized/) project.

My initial thoughts were to create 2x DIV boxes:

<style type="text/css">
body {
margin: 0px;
#box1 {
height: 100%;
width: 100%;
background-color: #F00;
position: absolute;
#box2 {
height: 120px;
width: 100%;
position: absolute;
bottom: 40px;
background-color: #666;
<div id="box1"></div>
<div id="box2"></div>

BOX1 is to hold DIV BOX's 1 & 2 (being a text box and sideshow), and BOX2 will hold DIV BOX 3 (being the navigation bar).

I've set the position for both box's in the above code to absolute and gave BOX1 a bottom placement value of 40px.

The part I'm struggling with is making BOX1 (RED) span between the top of the nav bar and the top of the browser window.


Any idea in how I can do this?

12-27-2009, 03:27 AM
the part im struggling with, is that doesnt look anything like the picture you want at the top.. :)

to answer the top portion, make your div boxes 1 and 2 a specific width and float box2 to the left and then you can add padding and margins to make it look exactly the way you show it.

to answer the bottom portion, put div box 2 inside of box 1 and then position it where you want.

<div id="box1">
<div id="box2"></div>

>>>ok, i reread it again, and its very confusing because your calling them all the same thing. Box 1 and DIV BOX 1 are techincally the same thing... but i think you want to do what i posted last about putting one div inside the other.

12-27-2009, 05:46 AM
rattlsnak, your absolutely right... let me try and simplify it.

I'd like the final layout design to look like this.


The fullscreen background image will be done by using the supersized 2.0 project. (http://www.buildinternet.com/project/supersized/)

The orange bar at the bottom will act as the navigation bar.

I'd like this to always sit 40px from the bottom of the browser screen.

To do this, I've set the position value to absolute and set a placement value of 40px from the bottom.

If you resize your browser window, you'll notice the bar always remain 40px from the bottom of the browser window.

EXAMPLE HERE (http://blimpmedia.com.au/photodomainv3/)

I'd now like to add the text box and slideshow.

I've created a wrapper div, then placed 2x more div's within it.

<div id="wrapper">
<div id="left"></div>
<div id="right"></div>

and the css

#box1 {
height: 400px;
width: 820px;
margin-top: 20px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
top: 20px;
#left {
float: left;
height: 400px;
width: 200px;
background-color: #F00;
#right {
float: right;
height: 400px;
width: 600px;
background-color: #00F;

What I don't know how to do is make the <div id="wrapper"> allways remain middle between the top of the nab bar and the browser window.



Hope this is easier to understand.

12-28-2009, 04:46 AM
ok, i assume that your "box1" and "box2" are really "left" and "right" as per your code, but to clarify.. Are you trying to make the green spaces above and below the "left" and "right" divs equal? (the GREEN part on your picture?) If so, I dont know of a way to do that since your bottom div is placed using absolute positioning and you defined heights on the box 1 and 2. example: the wrapper div is usually expanded and grows because of the content inside of it, but in your case, you give it and your box divs a specific height, so normally you could simply add margins to the tops/bottoms of those divs to make everything equal, but since your bottom box is absolute and therefore changes position based on browser size and you have no way of knowing what size browser resolution the end user is using, i'm not sure you can accomplish this. In other words, if you set it all up with the correct spacing, and then a user has a smaller window, it will push the bottom nav bar up, but your other divs cant resize because you have defined heights on them.
Maybe someone else can chime in, but i dont think its possible if i understand you correctly.

>> its also HIGHLY possible that I am completely worng and there is a way and hopefully someone smarter will chime in !! :) <<

12-28-2009, 07:43 AM
Rattlsnak is correct. You need to set heights on the two divs but make the footer div (box 3) relative, not absolute. Set a top margin on box 3 to ensure it remains away from the two other boxes. Then you'd better make sure you leave some breathing space in box 1 in case someone wants to increase the text size.

12-28-2009, 11:03 PM
Hi rattlsnak

i assume that your "box1" and "box2" are really "left" and "right" as per your code
This is correct. I've placed Boxes 1 & 2 in a wrapper div so I can position them "vertically align: middle".

your bottom div is placed using absolute positioning and you defined heights on the box 1 and 2
Setting the bottom bar as absolute and giving it a bottom placement value of 40px allows me to always have the nav bar sit 40px from the bottom of the browser screen, regardless of the viewing resolution.

If I set the position of the nav_bar to relative and give it a top margin of let's say 100px (As suggested by corrosive), the live preview looks like this.


If I instead leave the nav_bar position to absolute and set a bottom placement value of 40px, it previews like this.


A poster from another forum suggested the following solution:

To vertically center something, set the top value to 50% and then the top-margin to negative half the height of the block. But in your case you need an extra 160px from the bottom for the nav box position (40px) and height (120px).

#wrapper {
height: 400px;
margin: -360px auto 0 auto; /* -200px half the height + 40px for nav position + 120px for nav height */
position: absolute;
top: 50%;
width: 820px;

LIVE PREVIEW (http://blimpmedia.com.au/photodomainv7/index.html)

As you can see, it's still not equally spaced


I'm starting to think I'm better off changing the layout design

PS: Sorry about the double posting corrosive, I totally forgot I'd already posted in this part of the forum.

12-29-2009, 12:54 AM
Don't give up so quickly. I designed something I think is exactly what you need. I was short on time to comment much of it, but I can help you understand it as we go. My website is in the works, but I uploaded the page here (http://www.sitewidesolutions.com/verAlign.html) to my server. I embedded the CSS so simply view the source of the page. Change the size boxes (divs) to make it work for you.

It is a little complex for CSS, but it works like a charm and I have checked it on chrome, firefox, ie8...all works perfect.

You will also notice the none of the divs overlap as the page condenses...nor do the boxes(divs) slide away under the browser window as the page condenses.

Again...my site will be up in a few weeks and it will tackle issues such as this with css and coldfusion.

Good luck...hope it helps.


12-29-2009, 01:23 AM
Thanks for that.. i figured somebody might know of a way! I copied it to my DW folder. Now, i just have to figure what youve done!!

12-29-2009, 03:55 AM
sitewidecf, your an absolute GUN... how can I repay you :shock:

12-29-2009, 05:07 AM
first let me say I updated a couple of comments. I used (footer) in replace of (nav). As the trick is for a sticky footer, but in your case you wanted a nav. So i just fixed the comments to help clear it up some.

In terms of how you can repay me....consider it on the house. Just pass the word my site will be up in a few weeks.

I know the css is rather complex in your case and I will make a video on the breakdown for you as soon as i can get time. I will keep you informed. Enjoy!