liquid div problem

Darghon · July 22, 2009

Hi,

I'm attempting a liquid layout and am encountering problems I can't seem to find a fix for

I have 2 boxes next to eachother, the first box has a fixed size, and the 2nd should stretch to fully cover the page.

style:

body{ width:100%; height:100%; }

.container{ 
  width:100%; 
  height:100%; 
  display:block;  
  position:absolute; 
  top:0; 
  left:0; 
}

.menu{
  width:300px;
  height:100%;
  margin:5px;
  padding:5px;
  float:left;
}

.content{
  height:100%;
  width:100%;
  float:left;
  padding:5px;
  margin:5px;
}

html:

<html>
<head></head>
<body>
<div class="container">
  <div class="menu">
    <ul>
      <li>option 1</li>
      <li>option 2</li>
    </ul>
  </div>
  <div class="content">
    <p>The site content comes here and needs to fill the screen</p>
  </div>
</div>
</body>
</html>

the html code has been simplified, but should make the intention clear.

the 2nd div is placed under the menu (because of the 100% width)

how can I make sure that the 2nd div (content) is fully stretched, next to the menu, and most importantly, in every webbrowser.

Hybride · July 22, 2009

Why are you absolutely positioning the container? Try relative instead, and if you want to center, do

margin:0 auto; /* you can also do margin: 0; or margin:auto; if am not mistaken*/

And make sure if you're doing cross-browser compatibility, to add:

*{padding:0;margin:0}

That resets any margin/padding discrepancies between browsers to 0.

Darghon · July 23, 2009

Thx for the reply but that doesn't really solve my problem.

I have a reset.css stylesheet attached first, so all paddings and margins and such are all set to 0

I realise that the position absolute wasn't really needed, but I wanted to make sure that the container div stretched over the entire page.

now my question was, how can I make sure that the content div will allways take the remaining space next to the menu, so that the menu always stays the same, but that the content changes with screen resolutions.

but the content always needs to be the max width possible, so setting a min-width, max-width won't help me.

dbrimlow · July 23, 2009

How about a fixed left, liquid right, equal height columns, fully elastic text, compatible in all browsers incl. IE6?

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Fixed left flexible right equal-height 2 columns</title>
<style type="text/css">
body {font-size:76%; font-family: verdana, arial, sans-serif; background: #f0f0f0; word-wrap:break-word;}
#container {overflow:hidden; background:#333;}
.menu {float:left; width:280px; padding:5px; color:#FFFFCC; background: #0099CC;}
.content {margin-left:300px; padding:.5em; background:#CCCCCC}
.menu, .content {padding-bottom:32767px; margin-bottom:-32767px;}
h1 {font-size:150%; margin:0; padding:10px 0; color:#fff;}
h3 {font-size:130%; margin:0; padding:8px 0;}
p {font-size:1em; line-height:1.5em; margin:0; padding:5px 0;}
</style>
<!--[if lte IE 7]>
<style type="text/css">
body {word-wrap:break-word;}
.content {display:inline; float:left; margin-left:0; margin-right:0;}
#container {display:inline-block;}
</style>
<![endif]-->
</head>
<body>
<div id="container">
  <div class="menu">
    <h3>Left 300px</h3>
    <ul>
      <li>option 1</li>
      <li>option 2</li>
    </ul>
  </div>
  <div class="content">
    <h3>Remainder in %</h3>
    <h3>The site content comes here and needs to fill the screen</h3>
    <p>No fauex column image. Background colors give equal height impression. Layout
      concept is originally from a Stu Nicholes idea.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut ultrices
      sapien. Etiam aliquet ligula sed urna lobortis mattis. Aliquam eu nibh
      eget diam hendrerit pellentesque. Proin ac risus metus. Curabitur ipsum
      ligula, bibendum ac rhoncus ut, mollis quis dolor. Proin lorem est, venenatis
      nec pellentesque eget, dignissim vitae nisi. Pellentesque ornare dignissim
      tempor. Sed elit sapien, pellentesque quis accumsan eget, vestibulum a
      sapien. Aliquam at consectetur odio. Proin ut velit nec nunc commodo iaculis
      sit amet eget lacus. Donec condimentum mollis lacus non interdum. Vestibulum
      at lectus lorem.</p>
    <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
      praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias
      excepturi sint occaecati cupiditate non provident, similique sunt in culpa
      qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et
      harum quidem rerum facilis est et expedita distinctio. Nam libero tempore,
      cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod
      maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor
      repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum
      necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae
      non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut
      aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus
      asperiores repellat."</p>
  </div>
</div>
</body>
</html>

Good luck.

Darghon · July 24, 2009

Wow, nice code, but I've been tinkering with it, and unfortunately I have the following problems with it

the body overflow:hidden will cut any content that exceeds the page length, => this one makes the script unusable :-[

so, I removed the overflow, removed the padding and margin of 32k or so

added a height:100% to html, body and container, and the menu and content 99%, so now the page is filled, without a scroll bar

but if the content is larger, the content div stretches, but the menu doesn't (stays the page size without scrollbar). I don't really think it's possible to solve that one, but is it possible to add a header above the menu and content, and let the menu and content stretch to the bottom of the page?

the 99% now creates a scroll bar, because a header was added.

any fixes for this? or fixes for any of the other problems?

Css:

html{
height:100%;
}
body {
font-size:76%; 
font-family: verdana, arial, sans-serif; 
background: #f0f0f0; 
word-wrap:break-word;
height:100%;
padding:0px;
margin:0px;
}
#container {
overflow:auto; 
background:#333;
height:100%;
}
.header {  
width:100%;
padding:10;
margin:0;
text-align:center;
font-size:300%;
}
.menu {
float:left; 
width:280px; 
padding:5px; 
color:#FFFFCC; 
background: #0099CC;
}
.content {
margin-left:300px; 
padding:5px; 
background:#CCCCCC
}
.menu, .content {
height:99%;
}
h1 {
font-size:150%; 
margin:0; 
padding:10px 0; 
color:#fff;
}
h3 {
font-size:130%; 
margin:0; 
padding:8px 0;
}
p {
font-size:1em; 
line-height:1.5em; 
margin:0; 
padding:5px 0;
}

.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

.clearfix {
display: inline-block;
}

html[xmlns] .clearfix {
display: block;
}

* html .clearfix {
height: 1%;
}

Html:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Fixed left flexible right equal-height 2 columns</title>
<LINK REL="StyleSheet" HREF="test.css" TYPE="text/css" MEDIA=screen>
<!--[if lte IE 7]>
<style type="text/css">
body {word-wrap:break-word;}
.content {display:inline; float:left; margin-left:0; margin-right:0;}
#container {display:inline-block;}
</style>
<![endif]-->
</head>
<body>
<div id="container">
  <div class="header">Header is here</div>
  <div class="menu">
    <h3>Left 300px</h3>
    <ul>
      <li>option 1</li>
      <li>option 2</li>
    </ul>
  </div>
  <div class="content">
    <h3>Remainder in %</h3>
    <h3>The site content comes here and needs to fill the screen</h3>
    <p>No fauex column image. Background colors give equal height impression. Layout
      concept is originally from a Stu Nicholes idea.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut ultrices
      sapien. Etiam aliquet ligula sed urna lobortis mattis. Aliquam eu nibh
      eget diam hendrerit pellentesque. Proin ac risus metus. Curabitur ipsum
      ligula, bibendum ac rhoncus ut, mollis quis dolor. Proin lorem est, venenatis
      nec pellentesque eget, dignissim vitae nisi. Pellentesque ornare dignissim
      tempor. Sed elit sapien, pellentesque quis accumsan eget, vestibulum a
      sapien. Aliquam at consectetur odio. Proin ut velit nec nunc commodo iaculis
      sit amet eget lacus. Donec condimentum mollis lacus non interdum. Vestibulum
      at lectus lorem.</p>
    <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
      praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias
      excepturi sint occaecati cupiditate non provident, similique sunt in culpa
      qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et
      harum quidem rerum facilis est et expedita distinctio. Nam libero tempore,
      cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod
      maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor
      repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum
      necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae
      non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut
      aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus
      asperiores repellat."</p>
  </div>
</div>
</body>
</html>

dbrimlow · July 24, 2009

Just a quick comment about the clearfix.

Like you, I prefer using a "clearfix" solution for clearing floats. However, you're using the old way originally intended to work with IE 5/Win, IE 5/Mac and IE6.

Instead of creating a whole new select item called .clearfix (and adding yet another div in your markup), just add the existing class or ID that you want cleared to it, like so:

#header:after, #footer:after {

content: ".";

display: block;

height: 0;

font-size: 0;

line-height: 0;

clear: both;

visibility: hidden;

}

/* target IE6 HasLayout trigger*/

* html #header, * html #footer {

height: 1%;

}

/* target IE7 HasLayout trigger*/

*:first-child + html #header, *:first-child + html #footer {

height: 1px;

}

Darghon · July 27, 2009

well, in my opinion I don't think that doing the clearfix in that way is the best way of doing it, at least not if you work with a lot of floats.

I personally have the reflex of grouping divs together, so allowing me to add a clearfix class is a lot faster then adding extra id's or classes to the clearfix layout.

I will add the IE7 trigger to my code, and thx for your input

about my question, I've spent the entire weekend trying to get it working, but with no luck.

liquid designs are still out of my reach, or at least the vertical liquid is...

cheers all

dbrimlow · July 27, 2009

First, so far as the clearfix, there is no "best way" - and some people don't even like this method at all. Use what's comfortable to you and does the job. To me, simply adding the class or ID of any floated element (that actually needs clearing) to the CSS clearfix select is simple and keeps my markup free of any unnecessary divs.

But about your liquid issue:

Without some kind of "faux column" technique, it is impossible to get two different boxes to be an equal height based upon the content of one of them; they are apples and oranges - completely unrelated to each other.

Once you removed the overflow:hidden on the container, and the large bottom margin and padding on the boxes, you disabled the whole faux column concept and illusion of equal height boxes. Percentage heights do not work for many reasons, one being (in the most basic sense) because they are EACH relative to a parent container and not content or each other. EM layouts have a little more relative control, but not much. And using position:absolute for any wire-frame non-fixed component instead of floats is guaranteed to be unstable in any modern browser.

You need to use some kind of illusion technique, like a graphic showing the two different backgrounds tiled in a parent container, or the Stu Nicolls technique I used of a huge padding-bottom (like 32767px) and an offsetting margin_bottom of equal-sized negative (like -32767px) to emulate equal heights, AND, MOST IMPORTANT, the overflow:hidden on the parent - this is what keeps the boxes appearing equal because the overflow is hidden based on whichever container has the most content. THAT is the key to the trick.

Here is the technique with a header and footer to show you that it works:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Fixed left flexible right equal-height 2 columns</title>
<style type="text/css">
body {font-size:76%; font-family: verdana, arial, sans-serif; background: #FFFFDF; word-wrap:break-word;}
#container {overflow:hidden; background:#333;}
.menu {float:left; width:280px; padding:5px; color:#FFFFCC; background: #800000;}
.content {margin-left:300px; padding:.5em; background:#CCCCCC}
.menu, .content, .buffer {padding-bottom:32767px; margin-bottom:-32767px;}
h1 {font-size:150%; margin:0; padding:10px 0; color:#fff;}
h3 {font-size:130%; margin:0; padding:8px 0;}
li {list-style:none; text-decoration:none; margin:.1em; padding:.25em}
li li {list-style:none; text-decoration:none; margin:.1em 0; padding:.25em 0}
li a:link, li a:visited {display:block; background:#555; padding:.25em; border:1px solid #fff; color:#FFFFCC; text-decoration:none}
li a:hover, li a:active {background:#FFFFCC; padding:.25em; border: 1px solid #000; color:#800000; text-decoration:none}
p {font-size:1em; line-height:1.5em; margin:0; padding:5px 0;}
#header {background:#555; margin-bottom:2px; padding:1.5em; color:#444; font-weight:bold}
.contained {padding:10px;}
#footer {width:100%; border-top:2px solid #333;background:#555; float:left; text-align:center }
#footer p,
#header p {color:#fff;}
#footer a {color:#fff;}
#footer a:hover {text-decoration:none;}
</style>
<!--[if lte IE 7]>
<style type="text/css">
body {word-wrap:break-word;}
li {margin:.1em; padding:.25em}
li li {list-style:none; text-decoration:none; margin:0; padding:.25em 0}
.content {display:inline; float:left; margin-left:0; margin-right:0;}
#container {display:inline-block;}
</style>
<![endif]-->
</head>
<body>
<div id="container">
  <div id="header">
      <h1>Fixed left flexible right equal-height 2 columns with header and footer</h1>
      <p>This is bullet-proof (minimize your browser window and it does not blow-up).
        It contains some fundamental wireframe requirements that should NOT be
        modified. Using percentage height attributes defeat the whole point of
        the faux equal height columns. This is an extremely elegant solution
        that Stu Nicholes created rather than using graphics.</p> 
  </div>
  <div class="menu">
  <div class="contained">
    <h3>Left 300px</h3>
    <ul>
      <li><a href="#">option 1</a></li>
      <li><a href="#">option 2</a></li>
      <li><em><strong>option 3:</strong></em>
        <ul>
        <li><a href="#">sub-option 1</a></li>
        <li><a href="#">sub-option 2</a></li>
      </ul></li>
      <li><a href="#">option 4</a></li>
    </ul>
  </div>
  </div>
  <div class="content">
   <div class="contained">
    <h3>Remainder in %</h3>
    <h3>The site content comes here and needs to fill the screen</h3>
    <p>No faux column image. Background colors give equal height impression.
      Layout concept is originally from a Stu Nicholes idea. This column is not
      floated for modern browsers, IE7 and above, but it IS floated left for
      IE6 (via conditional comment). </p>
    <p>You can add as much content as you like and the menu will still show equal
      height. Aliquam eu nibh eget diam hendrerit pellentesque. Proin ac risus
      metus. Curabitur ipsum ligula, bibendum ac rhoncus ut, mollis quis dolor.
      Proin lorem est, venenatis nec pellentesque eget, dignissim vitae nisi.
      Pellentesque ornare dignissim tempor. Sed elit sapien, pellentesque quis
      accumsan eget, vestibulum a sapien. Aliquam at consectetur odio. Proin
      ut velit nec nunc commodo iaculis sit amet eget lacus. Donec condimentum
      mollis lacus non interdum. Vestibulum at lectus lorem.</p>
    <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
      praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias
      excepturi sint occaecati cupiditate non provident, similique sunt in culpa
      qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et
      harum quidem rerum facilis est et expedita distinctio. Nam libero tempore,
      cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod
      maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor
      repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum
      necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae
      non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut
      aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus
      asperiores repellat."</p>
    <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
      praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias
      excepturi sint occaecati cupiditate non provident, similique sunt in culpa
      qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et
      harum quidem rerum facilis est et expedita distinctio. Nam libero tempore,
      cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod
      maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor
      repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum
      necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae
      non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut
      aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus
      asperiores repellat."</p>
    </div>
  </div>
  <div id="footer"> 
      <p>Footer clears the ".menu" class here by using "set a float
      to clear a float". (In IE6 it clears ".content" class). </p>
      <p>If
      adding a third column, float it right,  remove the footer
      float and set a simple "clear:both" element. </p>
  </div>
</div>
</body>
</html>

This was based on an amazing 3 column technique by Stu Nicholls at cssplay.

various 3 column equal height, liquid/fixed layouts

Good luck,

David

P.S. For what its worth - my liquid project experience:

Creating a professional, practical, nice looking, liquid website for business is extremely hard. I set out @ 2 years ago to make a 100% liquid Real Estate Company website. EXTREMELY challenging and I was told it couldn't really be done. I specialize in Real Estate sites, so I know the challenges - fixed sized photos, search listing results requiring 5 or 6 multi-column boxes side by side IN ADDITION to the wireframe's columns, and other issues ... all generated dynamically.

The thing is, you have to get used to creating a text-only liquid wire-frame, first. And all of the techniques out there are based on text only wire-frames. Then, as soon as you start to add graphics or photos or media .... WHAMMO!! There goes the layout. And that's where you have to start making choices and settling for less than perfect.

I've come close, it scales perfectly on high resolution widescreen monitors (1280 x 1024 or higher) down to medium resolution (1024 x 768) but it does very well at low res (it gets wonky at an 800 x 600 and lower resolution - which of course is what our firm's CEO has his monitor set at). Since IE6 doesn't have a min-width, the layout doesn't hold up well when the browser window falls below 700px wide.

But, for the most part, I achieved what I set out to do. The site is liquid, elastic, holds up in high res, and only has problems in IE6 when the window is minimized below 750px wide. I could continue to tweak it and change things every day if I had the time. And some day soon will come back to it clean up the design.

I used the old "non-graphic rounded-corner technique" to emulate rounded corners, which looked fine in a fixed layout, but don't look as good when liquid.

Another difficulty is that I used a form search on the right column, there is only so much styling you can do with form elements ... by default these are for the most part controlled by the browser AND platform - like scrollbars - and may look different in Safari/Mac, FF/WinXP, IE7/Vista, seamonkey/Linux!

NYCRealbroker

Sign In

liquid div problem

Recommended Posts

Darghon

Link to comment

Share on other sites

Hybride

Link to comment

Share on other sites

Darghon

Link to comment

Share on other sites

dbrimlow

Link to comment

Share on other sites

Darghon

Link to comment

Share on other sites

dbrimlow

Link to comment

Share on other sites

Darghon

Link to comment

Share on other sites

dbrimlow

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information