Client Side Web Development

Re: DIV layouts with CSS (novice question)

O11Y — Mon, 12 May 2008 11:21:45 GMT

I've had an experiment and my major flaw was neglecting to set html {height:100%} in the CSS. I didn't realise that the html element could have a size, I thought BODY was at the bottom of the tree as it were.

It's now working as expected so thanks for everyone's help

Cheers,

Re: DIV layouts with CSS (novice question)

O11Y — Sat, 10 May 2008 10:24:14 GMT

Thanks for all this, I will go through it on Monday and get back to you with my results.

Cheers,

Re: DIV layouts with CSS (novice question)

KelseyThornton — Sat, 10 May 2008 10:00:21 GMT

DarthSwian:

BMWZ solution is pretty good, but how small are you worried about the design? Anything under 800x600 on a desktop or laptop should be ignored in designing since the % of users running at that resolution will be very small.

This is true ONLY if you've got quite a small amount of markup or text in your "Left section" and "Content section". Just try adding lots of lines of text in either section and you'll see what I mean.
then the rendering is horrible...
This is what I was referrnig to in my previous post. I believe that the only way to get around this is to use an inline frame, which I couldn't get working consistently across browsers, so I eventualy gave up on it and went back to using tables in master pages.

DarthSwian:

You'd need to adjust BMWZ solution like below to get it to work.

html
{
height: 100%;
}
body {
margin: 0px;
padding: 0px;
height: 100%;
}

the height percentages don't work unless they have a reference point from the body and html tags

Agreed. (True for IE8 and Firefox 2.0)

When rendering in IE7, however, or in IE8 with "IE7 compatability" mode enabled, it's not necessary as IE7 assumes this for you...

The way it renders the markup for LONG""content" or "Left" sections, however is inconsistent.

I've not tried these out on Mac browsers because I don't have a Mac, and I haven't treid Opera etc., because I don't think it's worth it for the (relatively) infinitessimal number of people out there using these browsers.

Re: DIV layouts with CSS (novice question)

KelseyThornton — Sat, 10 May 2008 09:22:57 GMT

KelseyThornton:

If your only problem is the blank div before the footer in your example, then you could try this at the end - simply combine the two DIVs into one...
<div style="clear: both;" id="footer">
footer
</div>

of course a better way would be to modify your css style (oops!)

#header
{
background-color:blue;
height:30px;
}

#footer
{
   background-color:blue;
   clear:both;
   height:30px;
}

Re: DIV layouts with CSS (novice question)

krishnav — Sat, 10 May 2008 04:56:55 GMT

*{ margin:0px; padding:0px; } .header { width:100%; height:100px; padding:5px; background-color:#ffddff; } .menu { flot:rihgt; font-family:verdana; font-size:1em; } .menu ul { list-style-type:none; } .menu ul li { display:inline; padding-right:5px; } .menu li a { text-decoration:none; } .menu li a:hover { text-decoration:underline; } .content { some style; } .footer { clear:both; width:100%; height:80px; }

I think the fallowing sample will help you much. if u want i will send a smaple page next time...

<html>
<head>
<style>
*{
margin:0px;
padding:0px;
}
.header
{
width:100%;
height:100px;
padding:5px;
background-color:#ffddff;
}
.menu
{
flot:rihgt;
font-family:verdana;
font-size:1em;
}
.menu ul
{
list-style-type:none;
}
.menu ul li
{
display:inline;
padding-right:5px;
}
.menu li a
{
text-decoration:none;
}
.menu li a:hover
{
text-decoration:underline;
}
.content
{
some style;
}
.footer
{
clear:both;
width:100%;
height:80px;
}
</style>
</head>
<body>
<div>

<div class="menu">
<ul>
<li><a href="http://forums.asp.net/AddPost.aspx?ReplyToPostID=2348646&Quote=False#" mce_href="http://forums.asp.net/AddPost.aspx?ReplyToPostID=2348646&Quote=False#">Nav Link</a></li> // here u can add span also to look other colors on mouse over n click etc..
<li><a href="http://forums.asp.net/AddPost.aspx?ReplyToPostID=2348646&Quote=False#" mce_href="http://forums.asp.net/AddPost.aspx?ReplyToPostID=2348646&Quote=False#">Nav Link</a></li>
        <li><a href="http://forums.asp.net/AddPost.aspx?ReplyToPostID=2348646&Quote=False#" mce_href="http://forums.asp.net/AddPost.aspx?ReplyToPostID=2348646&Quote=False#">Nav Link</a></li>
        <li><a href="http://forums.asp.net/AddPost.aspx?ReplyToPostID=2348646&Quote=False#" mce_href="http://forums.asp.net/AddPost.aspx?ReplyToPostID=2348646&Quote=False#">Nav Link</a></li>
        <li><a href="http://forums.asp.net/AddPost.aspx?ReplyToPostID=2348646&Quote=False#" mce_href="http://forums.asp.net/AddPost.aspx?ReplyToPostID=2348646&Quote=False#">Nav Link</a></li>
</ul>
</div>

</div>

</div>

</div>

</div>
</body>
</html>

Re: DIV layouts with CSS (novice question)

DarthSwian — Fri, 09 May 2008 19:38:37 GMT

BMWZ solution is pretty good, but how small are you worried about the design? Anything under 800x600 on a desktop or laptop should be ignored in designing since the % of users running at that resolution will be very small.

Re: DIV layouts with CSS (novice question)

DarthSwian — Fri, 09 May 2008 19:36:39 GMT

You'd need to adjust BMWZ solution like below to get it to work.

html
{
height: 100%;
}
body {
margin: 0px;
padding: 0px;
height: 100%;
}

the height percentages don't work unless they have a reference point from the body and html tags

Re: DIV layouts with CSS (novice question)

KelseyThornton — Fri, 09 May 2008 19:33:10 GMT

If your only problem is the blank div before the footer in your example, then you could try this at the end - simply combine the two DIVs into one...

<div style="clear: both;" id="footer">
footer
</div>

Re: DIV layouts with CSS (novice question)

KelseyThornton — Fri, 09 May 2008 19:27:27 GMT

I've done quite a bit of research into this, and if you simply want a layout where you've got a header, and a footer, and then some content in between, then there's no real problem - the previous post satisfies that request.

(you could also try googling for holy grail markup - http://www.alistapart.com/articles/holygrail is one of the best sites I found - lots of really great information)

What I was looking for was a header, and a footer and then some content in between where the footer was always at the bottom of the page, no matter what your screen resolution etc., with the content in between having scrollbars (like you might get with a table quite easily).

I eventually gave up on trying to find this, as all the solutions I came across set the footer DIV at "so many pixels/points/picas from the top".

I have gone back to using tables, but within Master Pages...

Re: DIV layouts with CSS (novice question)

bmwz9 — Fri, 09 May 2008 18:49:42 GMT

u can do it like this

<html>
<head>
<title>Div Layout</title>
<style type="text/css">

body {
  margin: 0px;
  padding: 0px;
}

#header {
  background: #0f0;
  width: 100%;
  height:5%;
}
#leftcol {
  background: #f00;
  float: left;
  width: 20%;
  height: 90%;
}
#content {
  background: #fff;
  float: right;
  width: 80%;
  height: 90%;
}
#footer {
  background: #0f0;
  clear: both;
  width: 100%;
  height:5%;
}

</style>
</head>
<body>
<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="footer">Footer Section</div>
</body>
</html>

DIV layouts with CSS (novice question)

O11Y — Fri, 09 May 2008 16:34:20 GMT

Hello,

For the past few years I've been more than happy to use HTML Tables for layouts - they're simple, easy to work with, and predictable in their resizing behaviour. I've read some articles on using DIV elements / CSS instead to completely seperate your style from your content. This seems like a great idea to me so I've been playing around with DIVs...and I've got stuck!

I've been trying to create a simple layout with a full width header / footer, and two columns sandwitched between for navigatation and content. I also want to achieve the following conditions:

1. I want to use a fully liquid layout with floated DIVs and percentage widths / heights where possible. There are a couple of elements that should maintain a fixed size (see below)

2. The page should resize in a predictable manner with no quirks i.e. Header / footer height should remain fixed, content should be hidden once there's no longer room to display it. The nav bar should hold it's width (this is the minimum size the page can reach) whilst the content shrinks down to nothing.

3. There should be no white space between any of the four areas.

4. The navigation bar should extend all the way down to the footer no matter what size of content is used.

5. Ideally I'd also like to centre all this in the middle of the browser window with excess space left blank (or as the body's background style). I'd like resizing to use up the blank space first and then start shrinking down the page content. I'm not exactly sure how to do this using tables so it's very much a "Stage 2" aim once I master the basics!

My first attempt has gone okay but I'm struggling to get the naviation bar to extend to the full height. I'm also having problem keeping everything together when the page gets really small - my content has a habit of zipping underneathe my navigation. My code is as follows:

<head runat="server">
<style type="text/css" media="screen">
body { 
margin:0; 
padding:0; 
height:100%;
} 

#Nav { 
width:200px;
height:100%;
background:#eaeaea; 
float:left;
} 

#Content { 
width:auto;
background:#ffc; 
float:left;
} 

#header, #footer
{
background-color:blue;
height:30px;
} 
</style>
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div id="header">Test Header</div>        
    <div id="Nav">    
        <a href="#">Nav Link</a><br />
        <a href="#">Nav Link</a><br />
        <a href="#">Nav Link</a><br />
        <a href="#">Nav Link</a><br />
        <a href="#">Nav Link</a><br />     
    </div>
    <div Id="Content">
        <p>
            (content here - deleted for this post)
           </p>
    </div>
    <div style="clear:both;"></div>        
    <div id="footer">
        footer
    </div>
    </form>
</body>