FRIHOST • FORUMS • SEARCH • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

div problems

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


zjosie729
I'm designing a webpage with a header, two side navigations, a footer and a main content area with CSS and divs. (Click here to see).

Here are my problems:

  • Making sure that the right navigation div will always expand to the full browser length and be at least 120 pixels.
  • Making sure that the footer div stays on the bottom of the page or just below everything
  • Making sure that the left and right navigation and the content area expand to 100% of the browser window.


Here is what I have:

Code:
<html>
<head>
     <title>Webpage</title>
<style type="text/css">
body{
font-family: verdana, arial, sans-serif;
font-size:0.9em;
}
#header{
width:611px;
height:90px;
position:absolute;
top:0;
left:0;
border:1px;
background: #444;
color:#fff;
padding:20px;
}
#leftnav{
width:130px;
height:100%;
position:absolute;
top:131px;
left:0;
padding:10px;
background: #666;
}
#content{
width:480px;
height:100%;
position:absolute;
top:131px;
left:151px;
padding:10px;
background: #888;
}
#rightnav{
position:absolute;
top:0;
left:652px;
background:#aaa;
padding:30px;
}

</style>
</head>
<body margin="0">


<div id="header">Blah</div>
<div id="leftnav">Blah</div>
<div id="content">Blah</div>
<div id="rightnav">Blahdiv>
<div id="footer">blah</div>


</body>
</html>


I don't even know what to do with the footer CSS so I left it out.


Check in both Firefox and IE please

Somebody please help me. I'm not very familiar with designing with divs.

Also, is it possible to add border to divs? if possible, how?
Tex_Arcana
I believe I have the answer to your problem. The way your code is now it should be fine in some browsers but not in all browsers. I happen to have been playing around with a layout that solves all those problems. There is a slight problem with it in that it is very sensitve to being played around with. Adding things like background images and borders tend to make it not so pixel perfect, but it's still good. You can find the layout here:
http://www.tjkdesign.com/articles/3cols.asp

This site has a lot of good tips and tutorials.
zjosie729
Thanks, but I kinda want my layout to be a little different than that. First of all, the right navigation should extend Over the header, and the content area shouldn't be extendable. Is it possible to do?
Tex_Arcana
I suppose anything is possible. Making it work is the trick. Laughing While you were there at that site did you look at any of the other tuts there? Like this one maybe? http://www.tjkdesign.com/articles/liquid.asp That one may be of help to you especially if you have a look at all the links attached to it. It doesn't have everything you are looking for but should be a great help in showing you how to do it.
riv
Quote:
Making sure that the right navigation div will always expand to the full browser length and be at least 120 pixels.
Making sure that the footer div stays on the bottom of the page or just below everything
Making sure that the left and right navigation and the content area expand to 100% of the browser window.

I'm going to work down your list.

"• Making sure that the right navigation div will always expand to the full browser length and be at least 120 pixels"
I think you mean that you want your navigation div to expand with the page. That can be done easily enough in the CSS by using em's or %'s instead of px. An em is the line height, and the % is the percentage of the window width. For example:
[code]#nav {width: 10%;}[code]

"• Making sure that the footer div stays on the bottom of the page or just below everything"
That can be done with "clear: both;", but only if you're using floats for your layout, and not absolute positioning. If you use absolute positioning, you're pretty much out of luck, as absolute positioning does not care about document flow. For example:
[code]#footer {clear: both;}[/code]

"• Making sure that the left and right navigation and the content area expand to 100% of the browser window."
What that's called in web lingo is "a liquid layout." You can accomplish this by using %'s and em's instead of px's, as I have mentioned in problem #1. I'm pretty sure I don't need an example for this one.

Well, I hope that helped, or at least solved or confirmed one of your problems!
Related topics

HTML help needed
layout spaces.
CSS Browser Specific Problems
positioning div top right
help with IE/FF (i dont care which),but I need some pointers
Problems with a Guess a Number Code.
Header problems
W3C buttons without images
Facing Many Problems
New forum area (computer problems)
Problems With Index Page
How To : Improve Your PHP Programming
FTP problems --> Use Filezilla and/or active mode
problems
Linux or Windows on your computer?!
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.