Page 2 - Margin moves

Dev Shed Forums Sponsor:

#16

April 9th, 2013, 11:20 PM

ryanjohnsond

Registered User

Join Date: Apr 2013

Posts: 12

Time spent in forums: 2 h 45 m 55 sec
Reputation Power: 0

Quote:

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>

#17

April 10th, 2013, 12:34 AM

jack13580

Contributing User

Join Date: Aug 2012

Posts: 185

Time spent in forums: 1 Week 16 h 22 m 34 sec
Reputation Power: 76

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

Last edited by jack13580 : April 10th, 2013 at 12:53 AM.

#18

April 10th, 2013, 01:54 AM

ryanjohnsond

Registered User

Join Date: Apr 2013

Posts: 12

Time spent in forums: 2 h 45 m 55 sec
Reputation Power: 0

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

Last edited by Kravvitz : April 10th, 2013 at 03:42 PM. Reason: must we quote the whole post? :p

#19

April 10th, 2013, 06:43 PM

Kravvitz

CSS & JS/DOM Adept

Dev Shed God 31st Plane (20000 - 20499 posts)

Join Date: Jul 2004

Location: USA

Posts: 20,099

Time spent in forums: 6 Months 6 Days 18 h 41 m 17 sec
Reputation Power: 4195

Fixed heights and absolute positioning is not a flexible solution.

Here check out this 3 column layout.

__________________
Spreading knowledge, one newbie at a time. I'm available for hire at Dynamic Site Solutions.

Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

Remember people spend most of their time on other people's sites (so don't violate web design conventions).

#20

May 12th, 2013, 01:25 AM

ryanjohnsond

Registered User

Join Date: Apr 2013

Posts: 12

Time spent in forums: 2 h 45 m 55 sec
Reputation Power: 0

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

#21

May 12th, 2013, 01:53 AM

ryanjohnsond

Registered User

Join Date: Apr 2013

Posts: 12

Time spent in forums: 2 h 45 m 55 sec
Reputation Power: 0

Quote:

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?

#22

May 12th, 2013, 11:34 AM

Kravvitz

CSS & JS/DOM Adept

Join Date: Jul 2004

Location: USA

Posts: 20,099

Time spent in forums: 6 Months 6 Days 18 h 41 m 17 sec
Reputation Power: 4195

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

#23

May 28th, 2013, 01:10 PM

ryanjohnsond

Registered User

Join Date: Apr 2013

Posts: 12

Time spent in forums: 2 h 45 m 55 sec
Reputation Power: 0

Quote:

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?

#24

May 28th, 2013, 05:12 PM

Kravvitz

CSS & JS/DOM Adept

Join Date: Jul 2004

Location: USA

Posts: 20,099

Time spent in forums: 6 Months 6 Days 18 h 41 m 17 sec
Reputation Power: 4195

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).

Page 2 - Margin moves

Developer Shed Advertisers and Affiliates