views:

3273

answers:

9

I'm trying to use this layout with two 50% column width instead. But it seems that when the right columns reaches its 'min-width', it goes under the left column. Is there any way to use the 'shim' technique to set a min-width to the wrapper so both columns stop resizing. Thus, eliminating the problem of the right column finding itself under the left column.

My page is as follows.

<style type="text/css">

#left {
    float: left;
    width: 50%;
}

.minwidth {
    width: 500px;
    height: 0;
    line-height: 0;
}

</style>

<div id="wrapper">
    <div id="left">
     left
    </div>
    <div id="right">
     right
    </div>
    <div class="minwidth">&nbsp;</div>
</div>

The issue with that is the left column will stop resizing, but the right column will go below the left column and keep resizing. Basically, the effect that I want is once the wrappers width goes bellow, that both left, and right columns also stop resizing. Putting the shim in both left and right columns did not work either.

Is there possibly another way of going abouts getting two 50% width columns and using a shim to properly set a min width?

Thank you.

Edit: The whitespace in the minwidth class is actually &nbsp but it got converted. ;)

A: 

Use a 2 column table. It will do exactly what you want. Div's are supposed to be used to simply divide up logically distinct blocks, and tables are there to lay out columned data. If you want two columns, use a table, rather than trying to force Div's to behave like a table.

David Arno
Are left and right columns not distinctive blocks? My purpose is to use it as a layout and not to display tabular data. Post back if I'm completely wrong. ;) Thank you.
Mike
Your want a two column layout, so your layout is tabular. Unsurprisingly, a table is therefore your best bet for getting the layout you want.
David Arno
Don't worry David I get you. Too much CSS-only-layout love out there nowadays.
Paolo Bergantino
@Paolo, given the true evils some people committed with tables in the past in order to create pretty backgrounds and the like, it isn't really surprising that there was a complete "never use tables" backlash. That backlash is getting boring now though and we need to reach a good balance.
David Arno
agree ... anti-tablism is just a cult.
interstar
I agree with David. Use tables.
Jeremy Sullivan
People are lashing out because tables are supposed to be used for tabular data. They are never to be used for design or presentation purposes. Tables have their uses but only for tabular data. The correct way to create any layout is to use divs to create the structure.
EnderMB
+1 for enderMB, using tables for layout purposes is a bad idea
marcgg
+1  A: 

Try this for the style:

.left, .right { width:50%; float: left; }
.right { float: right; }
.minwidth { min-width: 500px; display: block; height: 0; clear: both; }
The Wicked Flea
Excellent, appears to work fine unlike some of the other suggestions. Well in Firefox at least. Doesn't quite work on IE.
Mat
+1  A: 

Just set a min width for the wrapper and just change the left and right columns to percentages. This will prevent your two columns from being pushed into/over/under each other.

Dr. Bob
+1  A: 

This is a quick attempt but it works (only tested in Firefox):

<head>
<style type="text/css">

#left {
    float: left;
    width: 50%;
}

.minwidth {
    min-width: 500px;
    background:#eee;
    height: 0;
    overflow:visible;
}
.col{
    min-width:250px;
    background:#eaa;
}

</style>
</head>
<body>
<div id="wrapper" class="minwidth">
    <div id="left" class="col">
        left
    </div>
    <div id="right" class="col">
        right
    </div>
    <div><!-- Not needed --></div>
</div>
</body>
slashnick
In Firefox, a longer right column bleeds over to the left to fill the whole width. :(
Mat
+1  A: 

Try this:

<html>
<head>
<title>Testing some CSS</title>
<style type="text/css">

.floatme {
    float: left;
    width: 50%;
}

.minwidth {
    width: 500px;
    height: 0;
    line-height: 0;
    clear: both;
}

</style>


<body>
<div id="wrapper">
    <div class="floatme">
        left
    </div>
    <div id="floatme">
        right
    </div>
    <div class="minwidth"> </div>
</div>
</body>
</html>
Abyss Knight
In Firefox, a longer right column bleeds over to the left to fill the whole width. :(
Mat
+1  A: 

Thank you for everyone's replies.

Unfortunately, this needs to be IE compatible and none of the suggestions worked. :(

Only thing I don't understand is why the two columns still shrink when they're inside a wrapper. When the window is below 500px, I do see the horizontal scroll bar though. Which is where the issue is currently standing.

Any other suggestions?

Thank you. :)

Mike
Even my suggestion that you use a table? LOL.
David Arno
+4  A: 

I was able to come up with a "no HTML tables required" solution based off of a technique by Stu Nicholls at CSS Play and I personally like it because not only does it work in IE6+ and FF2+, it is also valid CSS that does not require any hacks. For my argument on why a CSS-based layout is preferable over HTML tables, see below.

First, I recommend that when designing new pages with CSS you do it with standards compliant browser mode. For an explanation of quirksmode and standards compliant mode, check out this article from one of my favorite CSS resource sites. All you have to do is add a specific DOCTYPE element at the top of your pages. The CSS will then be forced to render in standards compliant mode, resulting in fewer bugs and browser idiosyncrasies. In the case that you can't switch to standards compliant mode there is a min-width solution for browsers in quirksmode, also available at CSS Play.

Second, you must add an additional wrapper around your existing markup. This wrapper is used to set the min-width for browsers that understand min-width (not IE). You can then use the * html trick to specifically target IE 6 and apply Stu Nicholl's technique to the inner wrappers. The technique is detailed here and the specific example used is "#2 For standards compliant mode IE":

http://www.cssplay.co.uk/boxes/minwidth.html

The end result is rather simple. It creates 2 50% columns using the 2-column ALA style technique mentioned in the original question, that have an overall minimum width (of 500px in this example) where the columns stop resizing and the right column does not fall below the left column. I hope this helps!

Edit: This same technique can be used to apply cross-browser compatible min-width to anything. For instance, the columns do not need to be 50% each and any number of columns can be used. http://www.glish.com/css/ is a great resource for CSS-based page layouts and when combined with this min-width technique there are many nice layouts that can be created with minimal, valid CSS.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html>
<head>
    <style type="text/css">

        /* For browsers that understand min-width */
        .width {
            width: 100%;
            min-width: 500px;
        }

        /* IE6 Only */
        * html .minwidth {
            border-left: 500px solid white;
            position: relative;
            float: left;
        }

        /* IE6 Only */
        * html .wrapper {
            margin-left: -500px;
            position: relative;
            float: left;
        }

        .left {
            float: left;
            width: 50%;
        }

        .right {
            float: left;
        }

    </style>
</head>
<body>

<div class="width">
    <div class="minwidth">
        <div class="wrapper">
            <div class="left">
                Left
            </div>
            <div class="right">
                Right
            </div>
        </div>
    </div>
</div>

</body>
</html>

Now, my incentive for setting up a Stack Overflow account was being able to respond to the suggestion below that "If you want two columns, use a table, rather than trying to force Div's to behave like a table". Since I'm too new to either comment or vote down, I am augmenting this discussion.

Really?

Somebody asks a question about CSS-based layouts and you respond by telling them to use HTML tables?

Let me start by saying that I don't believe that HTML tables are completely unnecessary. In fact, any time I need to display tabular data, i.e. relational data, I use an HTML table. CSS table display properties aren't fully supported yet (coming soon in IE8!) and using a single-level HTML table is an effective solution. Look at the markup for any of Google's web pages and you'll see that they would agree.

As someone who has spent a great deal of time writing CSS-based layouts that are cross-browser compatible when they could have done it in 10 minutes using a table, I agree that there is an easier solution to this problem. However just because you can use dynamite to renovate your kitchen, doesn't mean you should. The following article provides a detailed explanation for why CSS-based layouts are more desirable.

http://www.chromaticsites.com/web-design-blog/2008-04-03/13-reasons-why-css-is-superior-to-tables-in-website-design/

zwerd328
This works fine, but only while the right column contains a small amount of data. Once you have more than a little content in the right column, it wraps.
Mat
A: 

Well, I don't want to get into a political argument, but the reasoning in the cited article by Agoudzward about "why CSS is better than tables" has little to do with tables. What it demonstrates is that CSS is better than using individual font tags and color settings and the like over and over again when many page elements call for the same style. Yes, I absolutely agree that if you have a hundred elements on a page that all should be in green, 14pt, Arial text, then it makes excellent sense to create a CSS style for this rather than copying and pasting a font tag over and over, for all the reasons they give. That goes double if you want this same style across multiple pages.

But what does that have to do with tables?

The reasoning seems to be "CSS is good because it allows you to specify font and color once rather than repeatedly, therefore anything that can be done with CSS is better than any possible alternative". Well that doesn't follow at all! Just because a tool is good for one type of problem doesn't mean it's good for all possible problems. Hammers are great for putting in nails. That doesn't mean that I use them to put in screws. If I can do a layout more simply and logically with tables than with div's and CSS tags, then to insist that I should nevertheless use CSS because "CSS is good" leaves me saying, So what?

Jay
A: 

Here is a good example of what you desire I think.

http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm

In short here is the CSS:

/* Start of Column CSS */
#container2 {
 clear:left;
 float:left;
 width:100%;
 overflow:hidden;
 background:#ffa7a7; /* column 2 background colour */
}
#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;
}
#col2 {
 float:left;
 width:46%;
 position:relative;
 left:56%;
 overflow:hidden;
}

Here is the html:

<div id="container2">
 <div id="container1">
  <div id="col1">
   <!-- Column one start -->
   <h2>Equal height columns</h2>
   <p>It does not matter how much content is in each column, the background colours will always stretch down to the height of the tallest column.</p>

   <h2>Valid XHTML strict markup</h2>
   <p>The HTML in this layout validates as XHTML 1.0 strict.</p>
   <!-- Column one end -->
  </div>
  <div id="col2">
   <!-- Column two start -->
   <h3>Windows</h3>
   <ul>
    <li>Firefox 1.5, 2 &amp; 3</li>
    <li>Safari</li>
    <li>Opera 8 &amp; 9</li>

    <li>Explorer 5.5, 6 &amp; 7</li>
    <li>Google Chrome</li>
    <li>Netscape 8</li>
   </ul>


   <!-- Column two end -->
  </div>
 </div>
</div>
Daok