[RESOLVED] fluid css columns

Jo6891 · #1 11-04-2009, 11:56 AM

Hi there I would like to know how to create one column which would stretch horizontally to fill the space around it...

Example: There are 3 columns. If column 1 disappears, I would like column 2 to take up the width of columns 1 and 2. If 1 and 3 disappear, I'd like column 2 to stretch the entire width.

All 3 columns would be contained within a wrapper and should not stretch the wrapper.

Does anyone know how this can be implemented without the need for any other script and just pure css?

Thanks in advance.

kaafmim · #2 11-04-2009, 12:39 PM

You may use tables, but a table-less solution is so much better. To achieve this without any tables, you should put the removable columns inside the filling column. This is a simple html that does exactly as you want:

Code:

<html>
<head>
	<style type="text/css">
	
	#column1 {
		float: left;
		width:  30%;
		background: #def;		
	}
	#column2 {
		background: #fff;		
	}
	#column3 {
		float: right;
	
		background: #fed;		
		width:  30%;
	}
	
	</style>
</head>

<body>

	<div id="column2">

		<div id="column1">This is the first column!</div>
		<div id="column3">This is the third column!</div>

		This is the second column!

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

Jo6891 · #3 11-04-2009, 02:52 PM

Thank you for your reply once again!

I will give your suggestion a whirl tomorrow and see if it achieves what I need it to. I have to use a table-less solution - I would in no way dream of using tables!

Jo6891 · #4 11-05-2009, 05:08 AM

Hi again,

I have tried this, and it *just about* gives me the technique that I need. However, what if I need to have margins and padding between each column?

I tried wrapping 'this is the second column!' in a div and then applying margin-right onto the first column however this didn't work. Any further suggestions?

Thanks again

kaafmim · #5 11-05-2009, 10:27 AM

Code:

<html>
<head>
	<style type="text/css">
	
	#column1 {
		float: left;
		width:  30%;
		background: #def;		
	}
	#column2 {
		background: #fff;		
	}
	#column3 {
		float: right;
	
		background: #fed;		
		width:  30%;
	}
	#column2_contents {
		padding: 10px;
		display: inline;
	}
	</style>
</head>

<body>

	<div id="column2">

		<div id="column1">This is the first column!</div>
		<div id="column3">This is the third column!</div>

		<div id="column2_contents">This is the second column!</div>

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

This works. The content div should be displayed inline.

Jo6891 · #6 11-05-2009, 12:19 PM

Thank you once again for your reply.

I have tried your work around, however it does not work correctly.

I entered 3 paragraphs of lorem ipsum into the column2_contents and strange things happened - the text is not contained within that contents div and in ie not displaying correctly (looks like it's overlapping).

Thanks for trying for me though

ssystems · #7 11-05-2009, 12:40 PM

Check out Matthew Taylor's 3 Column. Provided you have no extra requirements that would work perfectly.

The 'Holy Grail' 3 column Liquid Layout

Jo6891 · #8 11-09-2009, 10:36 AM

Thank you for your reply,

I will give that a look and let you know how I get on!

Jo6891 · #9 11-11-2009, 11:28 AM

I have found a great tutorial which describes perfectly how to do what I'm after! If anyone else has stumbled across this thread and wants the solution:

http://www.projectseven.com/tutorial...-flex-display/

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)