Dev Shed Forums

**ryanjohnsond**

Originally Posted by jack13580

Delete float left on the middle div and move your middle div under the other 2 and it will automatically be in the middle

You also have an extra ; with your padding on your middle div

Didn't work.

Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #fc6;
}
#container {
	min-width: 1000px; 
	margin: 20px;
	border: 2px solid #999;
	background: #0f0;
}
	#left {
		width: 360px;
		padding: 20px;
		float: left; 
		border-right: 2px solid #999;
	}
	#middle {
		padding: 20px;
		width: 5px;
		background: #ccc;
		float:left;

	}
	#right {
		padding: 20px;
		overflow: auto;
		background: #fcc;
	}
	/*#left, #right, #middle {height: 600px;} demo only*/
</style>
</head>
<body>
	<div id="container">
        <div id="left">
            <h2>left column</h2>
		</div>
		<div id="right">
			<h2>right column</h2>
			<p>
				Float your left column left and <em>overflow: auto;</em> fits your right column into 
				what space is left over.
			</p>
		</div>
		<div id="middle"></div>
	</div>  
</body>
</html>

**jack13580** · 11:53 PM

change your CSS to the CSS below

Code:

	body {
		margin: 0;
		font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
		color: #000;
		background: #fc6;
}
	#container {
		width: 95%;
		margin: 20px;
		border: 2px solid #999;
		background: #0f0;
}
	#left {
		width: 36.3%;
		padding: 20px;
		float: left;
		border-right: 2px solid #999;
		height: 200px;
	}
	#middle {
		padding: 20px;
		width: 50px;
		background: #ccc;
		position: absolute;
		height: 200px;
		margin-left : 39.9%;
	}
	#right {
		width: 40%;
		padding: 20px;
		background: #fcc;
		float: right;
		height: 200px;
		border-left: 2px solid #999;
	}
	#clear {
		clear: both;
	}

add <div id="clear"></div> below the middle div

just to tell you the calculations I used are to make it work on my iPad and it my not work on a different screen size so change it accordingly

I do not recommend using this design as it is very unpredictable

**ryanjohnsond** · 02:42 PM

Thanks! I am looking for a very predictable method. What would be that?

**Kravvitz**

Fixed heights and absolute positioning is not a flexible solution.

Here check out this 3 column layout.

**ryanjohnsond**

Where is a good place to read about the latest CSS layout practices, like the example we're dealing with in this thread?

**ryanjohnsond**

Originally Posted by Kravvitz

Fixed heights and absolute positioning is not a flexible solution.

Here check out this 3 column layout.

Do you know a good place to read about the common practice of using margins for layout, and labels and input fields for forms? Where is a good place to read about the latest CSS layout practices, like the example we're dealing with in this thread?

**Kravvitz**

I link to a lot of the best materials in the CSS section of my site.

As to working with forms specifically, these are worth reading:
Use the label element to make your HTML forms accessible
Accessible Forms
Accessible HTML/XHTML Forms
Accessible forms: Guidelines, examples and accessible JavaScript tricks.
Style Web Forms Using CSS
Fancy Form Design Using CSS
Prettier Accessible Forms
Example Form Layout Using Inline-Blocks

**ryanjohnsond**

Originally Posted by Kravvitz

I link to a lot of the best materials in the CSS section of my site.

As to working with forms specifically, these are worth reading:

Thankyou!
I created a 2 column css layout: the left column has the labels, the right column has returned data.
Problem: When data is NOT returned, the left-hand column label wraps up into the right-hand column where the returned data should be.
Question: How do you keep the label from wrapping up into the right column where the data usually is placed?

**Kravvitz**

You're welcome.

That would depend on how you coded it. It sounds like you may need to add elements with a min-width to save the place for items in the right column.

P.S. When posting code, please place it between [code][/code] tags.
If you want to use the button to add the tags, paste the code in the textarea and then select it before clicking the button (so you don't get the problematic JavaScript prompt dialog).

Dev Shed Forums

Thread: Margin moves