DIV only page layout problem

JavaScript and client side scripting.

Moderator: General Moderators

User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

DIV only page layout problem

Post 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:
Image

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 = &quote;background-color:#509a5e;margin-bottom:2px;padding:2px;border:1px solid #333333;&quote;>
      ::PRIMARY::
</div>
<div style = &quote;background-color:#509a5e;margin-bottom:2px;padding:2px; border:1px solid #333333;&quote;>
      ::SECONDARY::
</div>
<div style = &quote;padding:2px;width:200px;height:300px;border:1px solid #333333&quote;>
      ::CONTEXT-LINKS::
</div>
<div style = &quote;padding:2px;height:300px;width:100%;border:1px solid #333333;margin-left:2px&quote;>
      ::BODY::
</div>
Where ::CONTEXT-LINKS:: is the section on the side, and ::BODY:: is the main (biggest) section. That setup gives me this:
Image
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 = &quote;background-color:#509a5e;margin-bottom:2px;padding:2px;border:1px solid #333333;&quote;>
      ::PRIMARY::
</div>
<div style = &quote;background-color:#509a5e;margin-bottom:2px;padding:2px; border:1px solid #333333;&quote;>
      ::SECONDARY::
</div>
<div style = &quote;padding:2px;width:200px;height:300px;border:1px solid #333333;display:inline;&quote;>
      ::CONTEXT-LINKS::
</div>
<div style = &quote;padding:2px;height:300px;width:100%;border:1px solid #333333;margin-left:2px;display:inline;&quote;>
      ::BODY::
</div>
But that gives me a page looking like this:
Image

Anyone have any ideas on how to go about doing this?
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
delorian
Forum Contributor
Posts: 223
Joined: Sun May 04, 2003 5:20 pm
Location: Olsztyn, Poland

Re: DIV only page layout problem

Post by delorian »

pickle wrote: But that gives me a page looking like this:
Image
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 = &quote;background-color:#509a5e;margin-bottom:2px;padding:2px;border:1px solid #333333;&quote;>
      ::PRIMARY::
</div>
<div style = &quote;background-color:#509a5e;margin-bottom:2px;padding:2px; border:1px solid #333333;&quote;>
      ::SECONDARY::
</div>
<div style=&quote;width: 100%; border: 1px solid #333333;&quote;>
<div style = &quote;padding:2px;width:200px;height:300px;border:1px solid #333333; float: left;&quote;>
      ::CONTEXT-LINKS::
</div>
<div style = &quote;padding:2px;height:300px;margin-left: 200px;&quote;>
      ::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.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
phpScott
DevNet Resident
Posts: 1206
Joined: Wed Oct 09, 2002 6:51 pm
Location: Keele, U.K.

Post 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 ? &quote;760px&quote; : document.body.clientWidth > 900 ? &quote;auto&quote; : &quote;auto&quote;);
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	padding-top: 0;
	padding-bottom: 0;
}
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post by pickle »

That's some funky CSS!

That'll break if Javascript is turned off correct?
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
phpScott
DevNet Resident
Posts: 1206
Joined: Wed Oct 09, 2002 6:51 pm
Location: Keele, U.K.

Post by phpScott »

you bet yeah, I did't write, just copied and pasted when i found it.
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

"tables deprecated?" 8O

since when? where was I? how come no one told me? but the biggest question...WHY?
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
delorian
Forum Contributor
Posts: 223
Joined: Sun May 04, 2003 5:20 pm
Location: Olsztyn, Poland

Post 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=&quote;width: 100%;&quote;>
<div style=&quote;float: left;&quote;>
      ::CONTEXT-LINKS::
</div>
<div style=&quote;left: inherit;&quote;>
      ::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 :)
User avatar
neophyte
DevNet Resident
Posts: 1537
Joined: Tue Jan 20, 2004 4:58 pm
Location: Minnesota

Post 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.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
neophyte
DevNet Resident
Posts: 1537
Joined: Tue Jan 20, 2004 4:58 pm
Location: Minnesota

Post 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.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post by pickle »

Thanks for the heads up on that - I'll keep it close at hand.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
ol4pr0
Forum Regular
Posts: 926
Joined: Thu Jan 08, 2004 11:22 am
Location: ecuador

Post by ol4pr0 »

This works for me tho.

Code: Select all

<!DOCTYPE HTML PUBLIC &quote;-//W3C//DTD HTML 4.01 Transitional//EN&quote;>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv=&quote;Content-Type&quote; content=&quote;text/html; charset=iso-8859-1&quote;>
<script language=&quote;JavaScript&quote; type=&quote;text/JavaScript&quote;>
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName==&quote;Netscape&quote;)&&(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=&quote;position:absolute; left:13px; top:14px; width:100%; height:28px;border: 1px solid;&quote;></div>
<div style=&quote;position:absolute; left:12px; top:48px; width:100%; height:28px;border: 1px solid;&quote;></div>
<div style=&quote;position:absolute; left:11px; top:81px; width:40px; height:240px;border: 1px solid;&quote;></div>
<div style=&quote;position:absolute; left:57px; top:81px; width:100%; height:240px;border: 1px solid;&quote;></div>
</body>
</html>
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Post Reply