[SOLVED] fluid div layout

AV1611 · January 9, 2008

I'm trying to make a site that fluid both horizontal and vertical.

Here is what I have so far.

http://windows.blmservices.com/site1

all code in view source.

I can't understand why the "body" section won't display the .png for left and right?

How do I make it expandable vertically? If I specify a height, it works, but then it's not fluid.

Help!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="eng">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<style type="text/css">

body

{

background-color: #cf4c36;

margin: 0px;

padding: 0px;

}

p

{

text-align: justify;

}

div

{border: 0px green solid;}

div, ul, li, p

{

margin: 0px;

padding: 0px;

}

</style>

</head>

<body>

<div style="width: 80%; height: auto; margin-right: auto; margin-left: auto; margin-top; 0px; background-color: #cf4c36; padding: 0px;">

<div style="margin: 0px; background: url(bannermiddle.png); height: 165px; text-align: center;">

<div style="float: left; background: url(bannerleft.png); height: 165px; width: 25px;">

</div>

<div style="float: right; background: url(bannerright.png); height: 165px; width: 25px;">

</div>

<img src="bannermiddlepenguin.png" style="float: left; height: 165px; width: 140px; padding; 0px margin:0px; border: 0px;" />

<p> </p>

<p style="color: #cf4c36; font-size: 36px; font-weight: bold; margin-top: 0px; padding: 10px; text-align: center;">

In a world without Walls...<p/>

<p style="color: #cf4c36; font-size: 24px; font-weight: bold; margin-top: 0px; padding: 0px; text-align: center;">

Who needs Gates and Windows?

</p>

</div>

</div>

<div style="width: 80%; height: auto; margin-right: auto; margin-left: auto; margin-top; 0px; background-color: white; padding: 0px; height: auto;">

<div style="margin: 0px; width: 100%; background-color: white;">

<div style="float: left; background: url(bodyleft.png); width: 25px; height: auto;">

</div>

<div style="float: right; background: url(bodyright.png); width: 25px; height: auto;">

</div>

<p>this is a text<br />this is a text<br />this is a text<br />this is a text<br />this is a text<br /></p>

</div>

</div>

<div style="width: 80%; height: auto; margin-right: auto; margin-left: auto; margin-top; 0px; background-color: white; padding: 0px;">

<div style="margin: 0px; background: url(footmiddle.png); height: 21px; text-align: center; ">

<div style="float: left; background: url(footleft.png); height: 21px; width: 31px;"><p> </p>

</div>

<div style="float: right; background: url(footright.png); height: 21px; width: 31px;"><p> </p>

</div>

<div style="height: 21px; ">

</div>

</div>

</div>

</body>

</html>

AV1611 · January 9, 2008

Surely someone here knows how to make a fluid website...

The issue is I am using a div with a float left and float right in the body for the edge and the text on white background. I can't seem to do that unless I specify a height, but then the site isn't fluid any more. using % for height also doesn't work. If I use height/min-height then it breaks out of the container if you change to a bigger font. Besides, I'm gonna drive the text with PHP so that's no good. I need a fluid div with the float left and float right.

I am trying to not us tables any more.

Thanks.

duclet · January 9, 2008

The way you set you currently set up your site structure will not allow you to achieve your goal. Also, don't use all of that inline styles. In order for the divs to expand to the correct height, you need to put it inside one another. So for example, have a wrapper div that will contain the left image. Inside it, have another div that will contain the right image. And inside that div, you can have your content.

AV1611 · January 9, 2008

Ah... that makes sense.

The inline is only because this is a training exercise for myself. (as in lazy )

*left******************

* *right*************

* * *content*******

* * * *

**********************

duclet · January 9, 2008

The following should work but it is really terribly coded (sorry, just used firebug to fix the problem)

<html lang="eng" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>


<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/><title></title>

<style type="text/css">
body
{
background-color: #cf4c36;
margin: 0px;
padding: 0px;
}
p
{
text-align: justify;
}

div
{border: 0px green solid;}

div, ul, li, p
{
margin: 0px;
padding: 0px;
}

</style><link rel="stylesheet" type="text/css" href="chrome://firebug/content/highlighter.css"/></head><body>

<div style="padding: 0px; width: 80%; height: auto; margin-right: auto; margin-left: auto; background-color: rgb(207, 76, 54);">

<div style="margin: 0px; background: transparent url(bannermiddle.png) repeat scroll 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; height: 165px; text-align: center;">

	<div style="background: transparent url(bannerleft.png) repeat scroll 0%; float: left; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; height: 165px; width: 25px;">
	</div>

	<div style="background: transparent url(bannerright.png) repeat scroll 0%; float: right; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; height: 165px; width: 25px;">
	</div>

	<img style="border: 0px none ; float: left; height: 165px; width: 140px;" src="bannermiddlepenguin.png"/>
	<p> </p>
	<p style="padding: 10px; color: rgb(207, 76, 54); font-size: 36px; font-weight: bold; margin-top: 0px; text-align: center;">
	In a world without Walls...</p><p>
	</p><p style="padding: 0px; color: rgb(207, 76, 54); font-size: 24px; font-weight: bold; margin-top: 0px; text-align: center;">
	Who needs Gates and Windows?
	</p>

</div>
</div>



<div style="padding: 0px; width: 80%; height: auto; margin-right: auto; margin-left: auto; background-color: white;">

<div style="margin: 0px; width: 100%; background-color: white;">

	<div style="background: transparent url(bodyright.png) repeat-y scroll right center; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
<div style="background: transparent url(bodyleft.png) repeat-y scroll left center; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
<p style="padding: 10px;">this is a text<br/>this is a text<br/>this is a text<br/>this is a text<br/>this is a text<br/>
		this is a text<br/>this is a text<br/>this is a text<br/>this is a text<br/>this is a text<br/>
		this is a text<br/>this is a text<br/>this is a text<br/>this is a text<br/>this is a text<br/>
		this is a text<br/>this is a text<br/>this is a text<br/>this is a text<br/>this is a text<br/>
		this is a text<br/>this is a text<br/>this is a text<br/>this is a text<br/>this is a text<br/>
		</p>
	</div>
	</div>





</div>

</div>








<div style="padding: 0px; width: 80%; height: auto; margin-right: auto; margin-left: auto; background-color: white;">

<div style="margin: 0px; background: transparent url(footmiddle.png) repeat scroll 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; height: 21px; text-align: center;">

	<div style="background: transparent url(footleft.png) repeat scroll 0%; float: left; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; height: 21px; width: 31px;"><p> </p>
	</div>

	<div style="background: transparent url(footright.png) repeat scroll 0%; float: right; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; height: 21px; width: 31px;"><p> </p>
	</div>

	<div style="height: 21px;">
	</div>

</div>

</div>





</body></html>

AV1611 · January 9, 2008

A. Your fix did the trick.

http://windows.blmservices.com/site5/

B. I have NO UNDERSTANDING of the fix, which means I've not learned anything. I'm not sure how to google for an explanation...

???

This was a training exorcise. I need to understand so I can repeat it.

Suggestions?

-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;

I can prolly figure out the rest with google, but I've never seen that stuff before.

dbrimlow · January 9, 2008

B. I have NO UNDERSTANDING of the fix, which means I've not learned anything. I'm not sure how to google for an explanation... I can prolly figure out the rest with google, but I've never seen that stuff before.

Good for you. If you don't learn it, what's the point, right?

First off ... LOSE THE XHTML!!!

You are not parsing xml (or serving the page as xml) so why use xhtml? It only gets converted to html anyway (because you are serving it as "text/html"). So stick with html 4.01 strict and you cannot go wrong (once you validate it) AND, you can still use the same strict xhtml code styling rules (except for self closed tags like br, img, etc..) like using all lowercase tags and open and close all tags.

It is very easy to switch from xhtml to html:

1. change the doctype to

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">

2. open your editor and perform a "find and replace" function for closed self tags.

simply replace: " />" with ">"

3. DUCLET is right ... put styles where they belong, either in the head section, or better still, in a separate external file.

The reason is to keep your actual markup clean and free of as much unnecessary elements (and nearly all styling elements) as possible ... the goal, remember, is to use LESS code in the markup.

His solution uses a cross-browser trick. But you shouldn't even THINK of cross-browser tricks until you have the base concepts down in ONE modern browser (and NOT in any IE, that will just make your life miserable in the beginning). Test you beta pages in Firefox first. It is easier to tweak for IE after the page is first working properly.

4. and here is the first place to easily learn the bare minimum stuff that you should know before tackling a liquid layout - maxdesign.com.au.

Max Design is the best place to learn the nuts and bolts basics of css (rules, tricks and layout). The section "floatutorial" also shows how to create a liquid 2 column or 3 column layout.

Listomatics are the must know of any web coder.

And to avoid months of frustration because things just don't seem to be "working right" ... remember that 9 out of 10 times it's because of something YOU did wrong by breaking one of the CSS selector rules LEARN THE RULES BEFORE PLAYING THE GAME by learning "Selectutorial". Evan after years of this stuff, I still find Selectutorial to be the best source online for understanding the rules.

Once you have down the concept of Selectors, Lists and Floats - and use valid simple html markup - you can get into the more complex world of how to make it all behave in cross-browser/platform.

Good luck.

duclet · January 9, 2008

Sorry about that, I just took the code directly from firebug and it adds in extra stuff. I'll try to explain it more clearly. So, to start, assume this is your HTML:

<div class="wrapper">
    <div class="content">
        <p>The content will go here.</p>
    </div>
</div>

So, your CSS would look like the following:

div.wrapper {
    background: #FFFFFF url('url-of-left-side.jpg') repeat-y left;
}

div.wrapper div.content {
    background: url('url-of-right-side.jpg') repeat-y right;
}

That is pretty much it. You set both the background color to white and the left repeating background in the wrapper. We use repeat-y so that the image only repeats vertically and we use left to align the image to the left of the div. Then the content div, we give it a different background image - the right background. Again, use repeat-y but this time use right to position the image to the right of the div.

dbrimlow · January 9, 2008

LOL,

I need to make a correction, as well.

The strict doctype does NOT have "DTC HTML 4.01 Strict". The strict is left out and only points to the strict.dtd later, as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

AV1611 · January 10, 2008

I am very grateful for the help. I have done non-liquid sites for years, and also table based (which we ALL did in the old days...) I just needed to get started on liquid...

I do all my code in Firefox (I work on a linux box... with GIMP ) I use text editors, not NVU or Bluefish or whatever... it's just easier for me...

Once I do something in firefox I do w3c validation.

Then I do IE testing... and either fix it or change my strategy. I don't like to do js hacks to fix code, so I limit myself...

I used XHTML as this is a template... and I do extensive Database/PHP stuff... so I just do it from habit.

It'll take me some time to get my head around all you said...

Thank you again...

AV1611 · January 10, 2008

Oh, here is the final product:

First, the fluid site:

http://windows.blmservices.com/site5

This was the site before I converted it to fluid (static width)

http://windows.blmservices.com/site3

dbrimlow · January 10, 2008

Cool. Fluid is extremely difficult to make cross-browser/platform compatible.

It is easy enough when the page is not very "involved" - simple paragraphs in a two column layout. But becomes a monster once you want to display tabular data or multi floated ids or classes.

And, mostly IE is (of course) the killer because it does not support Min/Max widths and heights.

There are a few AWESOME liquid sites/templates out there, though. The absolute KING of which was Boris Chesney's free template "A bit liquid". I reverse engineered this a while ago just to see how it worked and am still in awe. They technique is extremely advanced and totally outside-the-box. But this layout is even stable in IE 5 Mac!

By the way, the link is to a free template site that also has some pretty good resources for designers, coders and web masters. ex-designz.net

AV1611 · January 12, 2008

WOW

That is an incredible bit of coding.

Anyone know the real story on tables for layout? everyone says not to use them, but everyone does.

Should I never use them, or should I only use them lightly?

Thanks.

dbrimlow · January 13, 2008

The story with tables has a lot to do with their initial intent.

A table was never meant to be used for layout; it was meant to display "tabular" data only - such as in a database or spreadsheet - where each row strictly contains data related to each column and nothing else.

In the early days of the web pre-css, getting anything to line up (like in a word processor) was impossible. All styling was done inline and for each instance a style was needed. The only concern was "How it looked" in a browser. It was frustrating. Then we discovered that by using tables and nested tables we could literally make a web page look like a graphic artists' mock up.

What this did was two things:

1. it removed the linear nature of any text information in the code itself,

2. it encouraged the elimination of using any text at all in favor of graphics.

Unlike TV or Radio, there was no narration or audio, so in essence this made the internet a "visual-only" medium. And furthermore, it made collating information about websites by search engines nearly impossible - forcing them to rely upon the honest inclusion of meta tags by the creator - description and keywords.

Well, give a human being the choice of doing the honest thing or taking advantage by NOT doing the honest thing and ....

So, the whole intent of the web (to provide information) was corrupted ... all because of tables.

Then in 1997 css came out (History of css. And believe it or not, within the 10 years it has been out, we still don't have one damn web browser that supoports the full initial w3c css level 2 recommendations!

BUT! Thanks to Firefox and IE's security problems, at least now people are beginning to take it seriously. And with most web coders not even bothering to include hacks for IE 5 or Netscape 4 anymore, people are forced to upgrade their old web browser versions.

OK, so what does this have to do with tables?

Code.

The actual presentation of the code itself is now as important as the browser view. Why?

1. "Natural" search engine ranking is desired by anyone with a website. And unless you have dozens of "high level" links TO your web site, you can forget any hope of doing well in Google and now, Yahoo, without clean, easy to read and low "code vs text percentage ratios".

Search engine bots don't have patience for poorly coded, tag soup, hard to follow (understand) text patterns. If the code shows a lack of coherent topic focus, and it has to guess what the page/site is all about, the bot will index the page WAAYYY down the list.

2. Disabilities, visually impaired visitors. Consider the millions of people around the world who are either blind or visually impaired. In today's world it is very difficult to function without the web (imagine five or ten years from now?!). Visually impaired visitors use either a "screen reader", "transcoding proxy server", or a "dedicated web browser" like IBM's Home Page Reader, BrookesTalk, Asakawa, Asakawa or WebbIE.

It is actually far easier and far SUPERIOR to first code a web page without ANY design concept at all. Simply code it as if it were a Word document. Use TEXT!!!

Consider this:

h1 - site title

lists - links (for navbar)

h2 - page title

lists - for section nav

paragraphs

h3 - topic headers

paragraphs

lists

paragraphs

h4, h5, h6 - sub topics

paragraphs

lists - links for footer

paragraphs for footer.

It follows a linear, easily understood flow. Search engines LOVE when YOU tell IT what is important by using headers, lists paragraphs, bold text.

Now, any web crafter who knows css, can take any web page that uses the above format and create an unlimited, diverse and richly beautiful web page without touching the initial markup.

That was the whole concept behind the site that most of us cut our teeth on creatively csszengarden.com

Tables may seem easier, but they are a fool's game and prove only one thing ... the web coder is not a true professional and has no concept of the overall detriments of using tables.

Sign In

[SOLVED] fluid div layout

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information