Div behavior

@registeredsanitNov 24.2007

I’m working on perfecting my skills at using div based layouts. I can get fluid full-length column layouts by having a containing div with a valued height, px em % whatever, and thing placing my column divs inside of it with their height attribute set to a 100% height. However, I’ve seen a fluid full length columned layout that does not use the height property but the auther does not elaborate much on how it is done. I’ve looked at the code but can’t quite pin down how it’s being done because I’m not sure of the default behaviours of div elements, and block elemnts work fully. Any insight or links?

to post a comment

HTML

13 Comments(s) _↴

@WebJoelNov 24.2007 — #Any element cannot be 'taller' than a parent, and if the parent has no height stated, this won't work. Any element with "height:100%" will never be 'taller' than the viewscreen, even if there is enough content to exceed a screen-height.

So, in your CSS, you first state:

html, body {height:100%;}

and in your HTML, the 'container' can be stated to have "height:100%;" and it will be 100% the [I]height of the parent elements[/I] (html, body), not just the [I]height of the viewscreen[/I].

@CentauriNov 25.2007 — # and it will be 100% the [I]height of the parent elements[/I] (html, body), not just the [I]height of the viewscreen[/I].[/QUOTE]

But 100% height set in html and body [B][I]IS[/I][/B] the height of the screen....

To allow content to expand the 100% height container, you have to specify minimum height of 100%, but then, due to no [I]explicit[/I] height being set, child elements cannot be height referenced to this.

The usual method is to use the faux columns technique, where a tiled background on the minimum 100% height container produces the vertical columns and makes it [B][I]look[/I][/B] like all columns are full height when in reality they are not.

There are other methods that do not use the image, relying on border colours or margins and negative positioning, such as shown on Paul O'Brien's site, but the faux column method is the easiest.

@WebJoelNov 25.2007 — #I usually do [I]faux columns[/I] method. It's pretty bulletproof.

@registeredsanitauthorNov 25.2007 — #So, you have to explicitly state that height of a child element to the parent in order to force it to be larger, or perhaps smaller, than that of the content in the child element.

i.e.

<div class="parent">

<div class="child">

some content that the div, child int his case, has to expand to

accomodate

</div>

</div>

Is there a way to have the div do this without explicitly stating the height property. In other words, can I position/nest elements in a way that the child element fills the parent elements space so much?

I'm just trying to avoid excess code and hacks as much as possible.

@CentauriNov 25.2007 — #The normal action of a div is to vertically only be as high as the content dictates. In your example above, if no heights are specified, then .child will be as high as the contents (plus any padding / borders) and .parent will be as high as child (again, plus any padding / borders and child margins). If you want .child to always fill .parent if parent is larger, then height:100% on child will work as long as parent has a height specified. If the parent does not have an explicit height, then its height will be "auto" and 100% height on .child will also default to "auto" (the default div action). If the .parent has a height set and .child does not, then content can increase the height of .child to be greater than .parent (so it hangs out the bottom) in all decent browsers - which does not include IE....

@KravvitzNov 25.2007 — #[url=http://www.pmob.co.uk/temp/3colfixedtest_4.htm]Check this out.[/url]

Equal columns is often an illusion created with backgrounds. I doubt you really need the elements to be the same height.

@CentauriNov 25.2007 — #[url=http://www.pmob.co.uk/temp/3colfixedtest_4.htm]Check this out.[/url][/QUOTE]

Which is the same link to Paul's site I gave above .. ?

@KravvitzNov 25.2007 — #Oops. I only noticed the first link in your post. I suppose I missed it because it is right above your sig with my browser window at its current width.

I use both techniques.

I may as well post links to these other two articles on faux columns:

[url=http://www.communitymx.com/content/article.cfm?cid=AFC58]Creating Liquid Faux Columns[/url]

[url=http://www.ilovejackdaniels.com/css/faux-columns-for-liquid-layouts/]Faux Columns for Liquid Layouts[/url]

@registeredsanitauthorNov 25.2007 — #Thanks alot for clearing that up for me.

@drhowarddrfineNov 25.2007 — #One thing that drives me a little crazy is this perception that there is such a thing as "div based layouts". There is no such thing. Layouts are never based on <div> and it is entirely possible to do a complete web page layout without using one single div at all.

And I don't mean some simplistic, goofy layout. I have one site I created where the index page has a header, navigation bar, left image, four navigation links and a footer stuck to the bottom and nary a div in site (and definitely no tables).

So get this "div layout" stuff out of your head.

</rant>

@registeredsanitauthorNov 25.2007 — #Yeah I know. I'm just trying to use what seems to be the new standard. Also, I'm a CS guy so it makes since to use div tags though you could use any tag or even go "old school" and use the table based ones.

@drhowarddrfineNov 25.2007 — #New standard? <div> has been around since 1998.

You might be interested in my "The Web is Ruined" link below. Never use tables for layout.

@WebJoelNov 25.2007 — #Another 'cheat', is a [I]relative-positioned[/I] DIV with inflated border-left and border-right (let's say, 150px width each), add content to the DIV, and two additiona DIVs, [I]absolute-positioned[/I], to be a [I]negative[/I] number to show it 'out of' the relative container, into the 'border'. Adjust the width to create the illusion of margins, it works.

A quick example: This is a DIV with a 150px left & right border.

Caveat: the 'main content' (in the white section) needs to always be MORE than the height of either border-area, else the border-area content will spill-over.

[B]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/B]

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta http-equiv="Content-Style-Type" content="text/css" />

<meta http-equiv="Content-Script-Type" content="text/javascript" />

<title></title>

<style type="text/css">

* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

html, body {min-height:100%; /*for compliant browsers*/

padding-bottom:25px; /* IE does not understand "margin-bottom" on BODY, so padding-bottom instead*/

font:x-small Arial, Verdana, sans-serif;voice-family: ""}"";voice-family:inherit;font-size:small;}/*for IE 5.5 */

html>body {font-size:small; height:auto;/* Assist IE6 and earlier, 100% height */

font-size: small; voice-family: ""}"";voice-family: inherit; font-size: medium}

/* Assist IE rendering height, keyword-font sizes, etc. */

#menu ul li {float: left; /* cure IE5.x "whitespace in lists" problem */width: 100%;}

#menu ul li a {height: 1%; /* make links honour display: block; properly */}

#wrapper {min-height:100%; overflow:hidden;} /* 100% height for compliants, enwraps content*/

* html #wrapper {height:100%;}/* and feed IE what it needs */

h1, h2, h3, h4, h5, h6 {font-size:0; font-family: 'times new roman', arial, verdana, helvetica,

sans-serif; background-color:none;font-style:normal; font-variant:normal;

font-weight:normal; margin:14px 0 4px 10px;}

h1 {font-size: 1.60em;}

h2 {font-size: 1.50em;}

h3 {font-size: 1.40em;}

h4 {font-size: 1.30em;}

h5 {font-size: 1.26em;}

h6 {font-size: 1.20em;}/* Defined default Header sizes*/

p {font-size:100%; font-size:1.0em; line-height:1.1em; margin:16px 0 12px 0;}

</style>

<style>

</style>

<script type="text/javascript">

</script>

<link rel="shortcut icon" href="favicon.ico" />

</head>

<body>

[B]<div style="position:relative; width:400px; margin:20px auto; padding:20px; background-color:white; border:1px solid red; border-left:150px solid red; border-right:150px solid red; ">

<h3>The RED Columns are <br />BORDER-LEFT and BORDER-RIGHT</h3>

<p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,

totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae

dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit,

sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt,

neque porro quisquam est, qui do<strong>lorem ipsum</strong>, quia <strong>dolor sit, amet, consectetur,

adipisci</strong> v<strong>elit, sed</strong> quia non numquam <strong>eius mod</strong>i <strong>tempor</strong>a <strong>incidunt, ut labore et dolore magna</strong>m <strong>aliqua</strong>m quaerat voluptatem.

</p>

<p><strong>Ut enim ad minim</strong>a <strong>veniam, quis nostru</strong>m <strong>exercitation</strong>em <strong>ullam co</strong>rporis suscipit <strong>laborios</strong>am, <strong>nisi ut aliquid ex ea commodi consequat</strong>ur? <strong>Quis aute</strong>mvel eum <strong>iure reprehenderit,</strong> qui <strong>in</strong> ea <strong>voluptate velit esse</strong>, quam nihil molestiae <strong>c</strong>onsequatur, vel <strong>illum</strong>, qui <strong>dolore</strong>m <strong>eu</strong>m <strong>fugiat</strong>, quo voluptas <strong>nulla pariatur</strong>

</p>

<p>At vero eos et accusamus et iusto odio dignissimos ducimus,

qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias

<strong>exceptur</strong>i <strong>sint, obcaecat</strong>i <strong>cupiditat</strong>e <strong>non pro</strong>v<strong>ident</strong>, similique <strong>sunt in culpa</strong>, <strong>qui officia deserunt mollit</strong>ia <strong>anim</strong>i, <strong>id est laborum</strong>et dolorum fuga.

</p>

<div style="position:absolute; left:-140px; top:25px; color:white; width:130px;">

<h1>LEFT Col</h1>

<p>Left left left, left left left. Left left: left.. left left left.</p>

<p>Left left left, left left left. Left left</p>

</div>

<div style="position:absolute; right:-140px; top:25px; color:white; width:130px;">

<h1>RIGHT Col</h1>

<p>Right right right right. Right? Right right right right, right.</p>

<p>Right right right right. Right? Right right right right, right.</p>

</div>

</div>[/B]

</body>

</html>[/QUOTE]

Also in #HTML _↴

html / javascript Div´s or p´s?About auto size in browser??

Success!

Help @registeredsanit spread the word by sharing this article on Twitter...

Tweet This

Div behavior

13 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Div behavior

13 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

13 Comments(s) _↴

Also in #HTML _↴