Page 1 of 2
DIV only page layout problem
Posted: Wed Jul 13, 2005 5:39 pm
by pickle
Hi all,
I'm having a problem using DIVs to make my page layout.
I'm trying to do a webpage using just divs. I want the page (ideally) to look like this:
Where both the big sections automatically resize to the size of the window. Pretty darn easy to do with tables.
So, in my inline CSS, I've got the style declaration like so:
Code: Select all
<div style = "e;background-color:#509a5e;margin-bottom:2px;padding:2px;border:1px solid #333333;"e;>
::PRIMARY::
</div>
<div style = "e;background-color:#509a5e;margin-bottom:2px;padding:2px; border:1px solid #333333;"e;>
::SECONDARY::
</div>
<div style = "e;padding:2px;width:200px;height:300px;border:1px solid #333333"e;>
::CONTEXT-LINKS::
</div>
<div style = "e;padding:2px;height:300px;width:100%;border:1px solid #333333;margin-left:2px"e;>
::BODY::
</div>
Where ::CONTEXT-LINKS:: is the section on the side, and ::BODY:: is the main (biggest) section. That setup gives me this:

So I figure it's because <div>'s have their display property set to "block" by default. So, I try to overwrite that by declaring the display property as inline (which I though meant, don't render a newline before and after the element). My code now looks like this:
Code: Select all
<div style = "e;background-color:#509a5e;margin-bottom:2px;padding:2px;border:1px solid #333333;"e;>
::PRIMARY::
</div>
<div style = "e;background-color:#509a5e;margin-bottom:2px;padding:2px; border:1px solid #333333;"e;>
::SECONDARY::
</div>
<div style = "e;padding:2px;width:200px;height:300px;border:1px solid #333333;display:inline;"e;>
::CONTEXT-LINKS::
</div>
<div style = "e;padding:2px;height:300px;width:100%;border:1px solid #333333;margin-left:2px;display:inline;"e;>
::BODY::
</div>
But that gives me a page looking like this:
Anyone have any ideas on how to go about doing this?
Re: DIV only page layout problem
Posted: Thu Jul 14, 2005 2:18 am
by delorian
pickle wrote:
But that gives me a page looking like this:
It looks like this is only in Gecko based browsers, on MSIE it is not ok. Below there is a version that works on Mozilla, Firefox and MSIE:
Code: Select all
<div style = "e;background-color:#509a5e;margin-bottom:2px;padding:2px;border:1px solid #333333;"e;>
::PRIMARY::
</div>
<div style = "e;background-color:#509a5e;margin-bottom:2px;padding:2px; border:1px solid #333333;"e;>
::SECONDARY::
</div>
<div style="e;width: 100%; border: 1px solid #333333;"e;>
<div style = "e;padding:2px;width:200px;height:300px;border:1px solid #333333; float: left;"e;>
::CONTEXT-LINKS::
</div>
<div style = "e;padding:2px;height:300px;margin-left: 200px;"e;>
::BODY::
</div>
</div>
You will have to adjust some styles for your needs but it is good for a start. Write if you find better solution, please.
Posted: Thu Jul 14, 2005 10:15 am
by pickle
I haven't found a better solution, but I did notice you statically set the width and height of the divs. That was a method I'm trying strongly to resist. I'm trying to convince myself that using divs can be as useful as using tables. To do that though, I need to be able to make an interface that spans the whole page.
I'm all for standards adoption, but if a page can't be displayed properly using the standards-accepted method, I'll have to resort to deprecated methods (ie: tables).
Thanks for your help.
Posted: Thu Jul 14, 2005 10:31 am
by phpScott
i usually do one bigger contianer to hold everything thing in and define it like so to get that stretch, auto sixe thing going.
Code: Select all
main-container{
min-width: 760px; max-width: 1268px;
width: expression(document.body.clientWidth < 800 ? "e;760px"e; : document.body.clientWidth > 900 ? "e;auto"e; : "e;auto"e;);
margin-left: auto;
margin-right: auto;
margin-top: 0;
padding-top: 0;
padding-bottom: 0;
}
Posted: Thu Jul 14, 2005 10:36 am
by pickle
That's some funky CSS!
That'll break if Javascript is turned off correct?
Posted: Thu Jul 14, 2005 10:36 am
by phpScott
you bet yeah, I did't write, just copied and pasted when i found it.
Posted: Thu Jul 14, 2005 10:49 am
by Burrito
"tables deprecated?"
since when? where was I? how come no one told me? but the biggest question...WHY?
Posted: Thu Jul 14, 2005 10:53 am
by pickle
1) Since when: tables have fallen out of favor with the standards crowd (when used for page layout) because they confuse the line between content and layout
2) Where was I: Probably at Taco Bell eating a burrito
3) How come no one told me: Have you ever smelled your breath after eating at Taco Bell?
4) Why?: I really don't know. I guess it's because tables are used to determine how things are rendered - which should be the job of CSS. For tabular data they're still fine.
Posted: Thu Jul 14, 2005 12:52 pm
by delorian
I have put height and width statically just for the example, you do not need those. Unfortunately there will be some *problems* on Gecko based browsers, because they do not reserve the whole available space for the div automatically, as you could see with your example above. The so called *problem* does not occur in IE6.0. But you can prepare your layout without any presentation styles. The minimum version that I have tested on Mozilla, Firefox and IE6.0 is presented bellow:
Code: Select all
<div>
::PRIMARY::
</div>
<div>
::SECONDARY::
</div>
<div style="e;width: 100%;"e;>
<div style="e;float: left;"e;>
::CONTEXT-LINKS::
</div>
<div style="e;left: inherit;"e;>
::BODY::
</div>
</div>
The left position of BODY div will be inherited from CONTEXT-LINKS div, so if you decide to set statically width of the CONTENXT-LINKS div the BODY will adjust itself automatically. I did not use any JavaScript and it will for sure validate with W3C standards

Posted: Thu Jul 14, 2005 1:06 pm
by neophyte
Hey pickle,
I feel your pain. I just started trying to learn CSS layout too -- it's a major pain. I think it's worth it though because like
zombocom anything is possible with css layout.
Here's my first effort:
http://ritterfamily.org
I'm no expert but here's some strategies.
1.
http://csscreators.com and
http://glish.com/css and
http://csszengarden.com are a great resources.
2. open every browser imaginable and don't be suprised to find a huge difference in display. Go slow and test test test... *IE STILL SUCKS*
3. There are patterns out there for almost any layout imaginable don't be afraid to use them.
4. Don't expect your css to display in older browsers at all.
Good luck.
Posted: Thu Jul 14, 2005 2:37 pm
by pickle
1) I now love zombo.com - that's cool
2) I tried one of the examples at glish.com and was reminded of one of the issues I have. At least on Gecko browsers, the dynamic width of divs is rendered before any margin properties are considered. So, if I've got a div at 100% width, with a 10px margin, I'm going to have that div off the screen horizontally.
3) I know stuff's going to look different in different browsers. However, using a tabular layout, I can make it look pretty consistent, even in old browsers (I'm not thinking NS 3, more like NS 4.8+, IE5+). If I can't make the page render properly in old browsers using divs, I'm going to have to resort to tables.
I guess a hidden agenda behind this question is to determine if using divs really is as universal, powerful and easy as using tables. Nothing mentioned has proven to me that it's really that easy. No slight intended to everyone who tried to help - it's been a standard, helpful devnet response

.
Thanks again everyone.
Posted: Thu Jul 14, 2005 2:56 pm
by neophyte
Using DIV tags IMHO is not easy but possible. You might find this chart helpful:
http://www.corecss.com/properties/full-chart.php
I shoot for getting it right in the most used browsers IE and Firefox and KHTML (Konqueror, Safari). In that order too.
Posted: Thu Jul 14, 2005 3:05 pm
by pickle
Thanks for the heads up on that - I'll keep it close at hand.
Posted: Thu Jul 14, 2005 3:10 pm
by ol4pr0
This works for me tho.
Code: Select all
<!DOCTYPE HTML PUBLIC "e;-//W3C//DTD HTML 4.01 Transitional//EN"e;>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="e;Content-Type"e; content="e;text/html; charset=iso-8859-1"e;>
<script language="e;JavaScript"e; type="e;text/JavaScript"e;>
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="e;Netscape"e;)&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<div style="e;position:absolute; left:13px; top:14px; width:100%; height:28px;border: 1px solid;"e;></div>
<div style="e;position:absolute; left:12px; top:48px; width:100%; height:28px;border: 1px solid;"e;></div>
<div style="e;position:absolute; left:11px; top:81px; width:40px; height:240px;border: 1px solid;"e;></div>
<div style="e;position:absolute; left:57px; top:81px; width:100%; height:240px;border: 1px solid;"e;></div>
</body>
</html>
Posted: Thu Jul 14, 2005 3:38 pm
by pickle
I'm not going to rely on Javascript to get my layout working properly. It doesn't work well on older browser and it doesn't work at all if Javascript is turned off.