Completely Flexible Columns

Geoff Myers · #1 Sep 30th, 2006, 02:51

I've got two columns set up using CSS floats (2 divs - left + right). I don't want either to have a fixed pixel width or a fixed percentage width. Sometimes the left column will be wider, sometimes the right. I haven't figured out what to do so that the left column doesn't expand to the full width of the container div and push the right float beneath it. Do you know what I mean and do you have any suggestions about how to do this? Thanks a lot!

Example: I have an 800 pixel container with a left-floated div and a right-floated div. One or both columns include images of various widths (but less than 800 px). What if I want the column that the image is in to automatically adjust to fit the image (no more, no less wide)?

Ryan Fait · #2 Sep 30th, 2006, 03:17

I believe that display: table; isn't supported in a lot of browsers, but some testing should let you know. This is the only way to do what you want unless you want to resort to tables:

Code: Select all

.container {
	width: 100%;
	display: table;
}
.left {
	background-color: #ccc;
	display: table-cell;
}
.right {
	display: table-cell;
	background-color: #999;
}

Code: Select all

<html>
	<div class="container">
		<div class="left">
			<p>Some content.</p>
		</div>
		<div class="right">
			<p>Some more content.</p>
		</div>
	</div>
</html>

ukgeoff · #3 Sep 30th, 2006, 13:48

I believe a cross browser solution should be to change the <div>'s from their default block element to inline elements.

Add this to your div styling:

Code: Select all

display: inline;

Ryan Fait · #4 Oct 2nd, 2006, 17:40

He's asking for columns to behave like table columns. All that display: inline will do is make them sit next to each other if the content isn't wide enough. The moment that the content of both <div>'s exceeds the browser width, the right <div> will move underneath the other one.

ukgeoff · #5 Oct 3rd, 2006, 09:17

Yes I agree but as you said in another post, there are always options to explore.

Have a look at this basic code, run it in your browser and read the text content of the divs.

Code: Select all

<!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="en">
<!-- This file was created/last amended: 03-Oct-2006 09:54 AM -->

<head>
<!-- Don't forget to add title and change date above. -->
<title>Change this title</title>

<style type='text/css'>

#mainframe {
    margin: 0 auto;
   width: 700px;
   position: relative;
   border: 1px dashed red;
}

#container {
    width: 100%;
   border: 1px dashed green;
}

#left {
   display: inline;
   float: left;
   height: 300px;
   border: 1px dashed blue;
}

#right {
    display: inline;
   float: right;
   height: 300px;
   border: 1px dashed yellow;
}
</style>

<!--[if IE]>
<link rel="StyleSheet" type="text/css" href="ieonly.css" />
<![endif]-->

</head>
<body>
<div id="mainframe">
   <div id='container'>            
       <div id='left'>
          The width of this div is now<br />
         governed by the width of its<br />
         content and not full width if<br />
         left with its default display<br />
         attribute or by any specified<br />
         width.
      </div>
      <div id='right'>
          This is the same. There is of course a point where they will come together and then this one as the second specified will drop below the left-hand one. There is an interesting difference between IE and Firefox &amp; Opera. IE is actually doing something to stop the second div expanding to the point where it drops below. Must be something to do with using 'inline'. Anyone got any ideas on that one.
      </div>
   </div>
</div>  <!-- End of mainframe. -->
</body>
</html>

Ryan Fait · #6 Oct 3rd, 2006, 09:36

I agree, but CSS doesn't work like tables. There is no way to get one <div>'s width to respond to another's with just valid CSS (aside from the mentioned display: table; properties which aren't supported in IE). Each side has it's pros and cons, this is just one more mark against CSS.

I did find a way to do what you're asking using CSS hacks, but I would never use it because I think hacks are the devil

http://snook.ca/technical/div_tables/fluid3col.html

It's not exactly what you want, but it's got everything you need to make it so.

moojoo · #7 Oct 3rd, 2006, 13:49

display:table; =P

Ryan Fait · #8 Oct 3rd, 2006, 14:28

The table properties don't work in IE. Even in IE6.

moojoo · #9 Oct 3rd, 2006, 14:34

http://www.newbeginningsdesign.com/s...mn_layout.html

change the pixel values to percentages and it should be fine.

Ryan Fait · #10 Oct 3rd, 2006, 14:36

Oh, he's looking for something that changes width depending on the content. No set widths, in either pixels or percentages.

moojoo · #11 Oct 3rd, 2006, 14:42

It changes with content. Of course, it could be modified to change even more i.e. width instead of just height. Just providing a building base to form a complete solution.

Ryan Fait · #12 Oct 3rd, 2006, 14:47

I'm confused. How can that layout turn into a table-column-like layout?

moojoo · #13 Oct 3rd, 2006, 14:50

Well, it could be adjusted to use the CSS 3 multi column module for one if you are concerned with content wrapping. Use a snippet of JS to make it work in IE and it does. other than that, just use a damn table. =)

Ryan Fait · #14 Oct 3rd, 2006, 14:54

This one works fine, though.

http://snook.ca/technical/div_tables/fluid3col.html

You don't really notice anything spectacular until you shrink your browser width so the right and left columns change sizes as well as the middle one.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Column count not matching, completely confuzzled	CloudedVision	Databases	4	Mar 21st, 2008 17:32
CSS Completely Validated, BLANK page in IE	Sulman	Web Page Design	7	May 16th, 2007 06:30
Rollovers don't work until Quicktime completely downloads!?!	Alcivar	Web Page Design	5	Apr 26th, 2007 22:37
Completely baffled by footer in Firefox	Jellytot	Web Page Design	7	Mar 29th, 2007 15:23

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Completely Flexible Columns