simple layout? varying height/width

liunx

Guest
Hi

I'm in the process of redesigning my site.........www.round-the-bend.co.uk (<!-- m --><a class="postlink" href="http://www.round-the-bend.co.uk">http://www.round-the-bend.co.uk</a><!-- m -->)
Main Content area - this will be where all the page specific text appears. I'd like it to be centered horizontally and vertically and for it's height to be about 70% of the view port height. I'd also like the widht to vary according to the view port and for height & width to have min/max values
Across the top of the Main Content area will be a nav bar with simple text links
My company logo will sit over the top left corner of the Main Content area
My phone number will sit over the bottom right corner of the Main Content area


As you can tell, the Main Content area is the pivotal portion of the website. My current site (see link above) has a similar idea but it is not very flexible - I designed it to fit my screen only!

If someone could get me started on the sizing and positioning of that portion then I think I can work out the rest accordingly.

Thanks in advance


RichOK, so no takers thus far!? That's cool, maybe my post is confusing or maybe I'm asking too much. I've made some progress on my own but I'm not convinced that I'm going in the right direction.

<!-- m --><a class="postlink" href="http://www.round-the-bend.co.uk/new/">http://www.round-the-bend.co.uk/new/</a><!-- m -->

When I resize the window/tab the yellow box in the center seems to move further up the page slightly until it can't fit at all when it jumps completely out of the way of the two grey boxes. I don't mind it moving completely when it gets this small, but for slight changes in width I'd like it's 'top' position to remain constant.

Also, in IE6 the yellow box is separated from the grey boxes by a small amount of blue (I guess it is the background). But in FireFox they boxes are nudged together. Is that just a typical quirk of IE or FireFox?

ThanksSee if this helps. You may need to change all the 'col' tops to pixels to line them up.

CSS
html {
background-color: #225aa5;
height: 100%
}

body {
background-color: #225aa5;
height: 100%
}

#container {
height: 100%;
width: 100%
}

#topmenu {
height: 5%
}

#leftcol {
position:absolute;
left:0px;
top:11%;
background-color: #aaaaaa;
height: 60%;
width: 8em;
padding: 1em;
}

#midcol {
position:relative;
width:auto;
top:5%;
min-width:8em;
background-color: #fbde00;
height: 60%;
margin-left: 10em;
margin-right: 10em;
padding: 1em;
}

#rightcol {
position:absolute;
right:0px;
top:11%;
background-color: #cccccc;
height: 60%;
width: 8em;
padding: 1em;
}Thanks for your response stymie and sorry for my delayed reply.

I seem to have something working and I think it's a combination of your ideas and some extras from me.Can anyone suggest why the site looks quite neat (and how I want it to) in IE6 but not in FireFox?

The differences are drastic from where i'm sitting!First, you have a typo on overflow:auto (missing ; )
Second, you have percentages for everything and it's not working together smoothly as you like it. You set html and body to 90% but html should always be set to 100%. FF and IE disagree how to handle the html element.
Third, if you set body to 90%, then set some of your divs to 80%, that means the divs become 80% of 90% and on down the line. Then you throw overflow:auto in the mix giving you scroll bars and it all goes to hell.3 very good points......I shall implement them later and report back my findings.

Thanks for your time.

RichOK, I've implemented changes as suggested. This hasn't much changed the appearance of the site but I'm happier because it seems that my code is more correct - even if IE makes a 100% height taller than the view-port ?!?!

My main concern is the horizontal positioning of the main elements.

Simply I would like the larger, central <div> (the one with the yellow border and photo of a car) to be positioned in the centre of the screen.

Then I'd like a navbar on the left and one on the right, these will be symmetrical in position and size and should be about the same height as the central <div>.

Once that's in place, I'd like for my logo to appear in the top left corner with just a slight overlap of the central <div>. I think that will be simple relative positioning so I'll concentrate on the other bits first.

Any help appreciated, especially with getting the central <div> positioned in the centre for IE, FireFox and Opera. I'm not trying NN yet, head hurts as it is!What you are fighting now is the liquid design where your columns vary according to the size of the browser. Your main content is set to 90% width but your right column has a set width while the middle column has a wide margin. So the browser has to keep all this in the 90% width by squeezing the columns together and giving you scroll bars.

Now you see the problems of liquid design and why some go with fixed layout or a combination of the two. It's a real design challenge.

Get this to work in FF first, then worry about the others.I've always used fixed layouts but thought it was the 'wrong' thing to do. How can you combine the two? That seems like a contradiction.


RichSorry to give you all this piece-meal. I'm just a busy, busy guy. :)

There is nothing wrong with fixed layouts. Some feel layouts should expand and contract to fit the browser window as it is resized. This is very difficult to do under some circumstances. In fact, it isn't really easy under most circumstances.

By combining the two methods, you can do this several ways. One is to allow content divs to expand and contract but the div, as a whole, remains fixed in one position. Another allows only certain divs on the screen to float, allowing them to reposition as the browser resizes. iow, a left and middle column remain fixed but a right column will contract and, possibly, float below the other two as the browser shrinks in size.

As a first crack at this, you might do better just using fixed layout just to get that end of the design done. Later you will be free to do it over.You might be looking for CSS Frames (<!-- m --><a class="postlink" href="http://www.stunicholls.myby.co.uk/layouts/frame.html">http://www.stunicholls.myby.co.uk/layouts/frame.html</a><!-- m -->).This seems to be looking much better.....www.round-the-bend.co.uk/new/

I now want to position a <div> to contain my phone number saying "Call Today on 01733 767618"

I'd like it to be positioned in the bottom right corner in a similar fashion to the logo in the top left corner.

Any suggestions?


EDIT: why does IE refuse to let the #container have a 90% height properly. Rather, it lets the container be 90% height but doesn't let the child elements #leftcol, #rightcol, #midcol have bottom: 0px properly
 
Back
Top