tags:

views:

314

answers:

5
+1  Q: 

Set div's height to occupy the contents layout

I want to achieve the following:

  1. "Main" div and sidebar "div" should have same height, with minimum height (maybe browser's screen height or 700px) maximum height is not limited - according to the contents.
  2. The "content" div should wrap them(same height and width of both of them)

Markup:

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head runat="server">
    <title></title>

    <link href="StyleSheet2.css" rel="stylesheet" type="text/css" />

</head>
<body>
    <div id="wrap">

      <div id="content">         
        <div id="main">
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>        
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>       
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>                 
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
        </div>     
        <div id="sidebar"></div>
      </div>
      <div id="footer">
          <p>Footer</p>
      </div>

    </div>
</body>
</html>

CSS:

body, html
{
    margin: 0;
    padding: 5px;
    color: #000;
    background: #ace187;
    height:100%; 
}
#wrap
{
    width: 752px;
    height:100%; 
    margin: 0 auto; 
}

#content
{
    border: 1px solid #000000;
    height: 100%;
    background-color: #dbeef8;
}
#main
{
    float: left;
    width: 506px;
    padding: 10px;   
    border: thin dashed green;
   height: 100%;
}

#sidebar
{
    border: thin dashed #FF0000;
    float: right;
    width: 200px;
    padding: 10px;
    height: 100%;
}
#footer
{
    clear: both;
    padding: 5px 10px;
    background: #cc9;
}

note: there is a "wrap" div and it's also needed because it wraps a header that i omitted.

A: 

I keep reading about sleazy CSS hacks to achieve this, or fake it.

At the risk of drawing the ire of the CSS purist crowd, whenever this comes up for me, I use tables. "Semantics and presentation" be damned, so long as CSS doesn't offer sensible solutions for commonplace problems like this, I'll stick with what works.

If you could guarantee that your page will always be shown in a JavaScript-enabled browser, you could do the sizing dynamically. But this would be far from my first choice.

Carl Smotricz  2009-12-05 12:50:24
I don't want to use tables... tables are not for layous IMHO
samuel  2009-12-05 12:54:34
Yep, I agree. Use the best tool for the job. Evaluate your requirements and implement what meets them all with the least amount of effort.
Rimian  2009-12-05 13:12:36
Why tables for layout is stupid: http://www.hotdesign.com/seybold/everything.html
samuel  2009-12-05 13:22:33
So did this admittedly very pretty site offer a solution to your problem?
Carl Smotricz  2009-12-05 13:45:14
it offers an approach i need to find the solution
samuel  2009-12-05 13:50:39
I disagree; it presents a glitzy and hyped-up argument why you shouldn't do the one thing that would easily solve your problem.
Carl Smotricz  2009-12-05 13:54:27
anyway, i want a css solution.
samuel  2009-12-05 14:06:24
And I want a date with Heidi Klum! Good luck.
Carl Smotricz  2009-12-05 14:13:55
and good luck with your date :)
samuel  2009-12-05 14:18:47
A: 

Though I am not fond of CSS expressions

height:expression("selector".Height< min-height? min-height : "auto" );
ram  2009-12-05 13:27:33
http://msdn.microsoft.com/en-us/library/ms537634(VS.85).aspx: As of Windows Internet Explorer 8, dynamic properties have been deprecated and are only supported for Web pages displayed in IE5 mode or IE7 mode.
Carl Smotricz  2009-12-05 13:35:00
Still, interesting information. I wasn't aware this existed!
Carl Smotricz  2009-12-05 13:41:00
I wano to use simple CSS
samuel  2009-12-05 13:42:55
and if dynamic properties indeed deprecated, it's useless.
samuel  2009-12-05 13:43:50
+1  A: 

To answer your second question:

#content
{
    border: 1px solid #000000;
    height: 100%;
    background-color: #dbeef8;
    /* new part */
    overflow: hidden;
}

Your first question is a bit harder. In my order of preference (depending on circumstances):

  1. You can fake it using backgrounds for #main, #sitebar and #content.
  2. You can use javascript to get the tallest column and apply that height to the other one as well.
  3. You can use display:table and display:table-cell if IE6 and IE7 (older browsers in general actually...) are not a requirement.

Cross-browswer pure css is not possible I´m afraid.

jeroen  2009-12-05 14:56:16
A: 

Equal height columns with pure CSS. I added a min-height since you asked for it. There is the one IE6 hack purely for the min-height since IE6 doesn't understand min-height, but treats height as min-height. This is a striped down version of this.. http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm

#container2 {
clear:left;
float:left;
width:100%;
overflow:hidden;
background:#ffa7a7;}
#container1 {
float:left;
width:100%;
position:relative;
right:50%;
background:#fff689; /* column 1 background colour */
}
#col1 {
float:left;
width:46%;
position:relative;
left:52%;
overflow:hidden;
_height:700px;
min-height:700px;
}
#col2 {
float:left;
width:46%;
position:relative;
left:56%;
overflow:hidden;
_height:700px;
min-height:700px;
}


<div id="container2">
<div id="container1">
 <div id="col1">
  <p>some text</p>
 </div>
 <div id="col2">
  <p>some text</p>
 </div>
</div>

chrismjones  2009-12-05 15:33:29
Can it be modifed to use width and positions in pixels instead of percentage?
samuel  2009-12-05 16:23:12
Sorry I was away and didn't see your question. It should work just fine with px instead of percentages. If nothing else, dropping a pixel width on one of the containers with the columns should have the desired affect.
chrismjones  2009-12-08 18:44:22
A: 

The following is the answer I got from the author of the "stupid tables" page http://hotdesign.com/seybold/everything.html whom you cited in your comments. I figured that if he was going to go to the effort of giving this advice to people, I might as well ask him for a hint on how to solve this particular problem.

Hi Carl,

You could float all three, the wrap, the content, and the sidebar. That would contain everything. If you put a background image on the wrap, it would appear that the sidebar were the same height as the main content.

Or you could use overflow:auto on the wrap. That would also contain the floats.

However, I do not advocate uncompromising adherence to CSS layouts. 99% of the time, they are the way to go. But the other 1% of the time, tables are the only practical answer.

Table cells are the only elements in HTML that resize according to the content and dimensions of adjacent elements.

I'm glad you think the site was pretty. I hope you found other things of value there.

Cheers,

Bill

I'm happy to see he agrees with me that it's not practical to ALWAYS steer clear of tables.

Carl Smotricz  2009-12-10 10:10:55
thanks for your time and effort.chrismjones answered my question.
samuel  2009-12-11 14:38:31
I can't vote you up, because I am not registered :(
samuel  2009-12-11 14:41:05
Cool, it's the thought that matters. I'm not hurting for reputation :)
Carl Smotricz  2009-12-11 14:47:30

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?