April 9th, 2013, 10:20 PM
-
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>
April 9th, 2013, 11:34 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
Last edited by jack13580; April 9th, 2013 at 11:53 PM.
April 10th, 2013, 12:54 AM
-
Thanks! I am looking for a very predictable method. What would be that?
Last edited by Kravvitz; April 10th, 2013 at 02:42 PM.
Reason: must we quote the whole post? :p
April 10th, 2013, 05:43 PM
-
-
Where is a good place to read about the latest CSS layout practices, like the example we're dealing with in this thread?
-
Originally Posted by Kravvitz
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?
-
-
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?
-
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).