Hi,
As a complete newbie on CSS layouts, I was following BonRouge's example page <!-- m --><a class="postlink" href="http://bonrouge.com/3c-hf-fluid.php">http://bonrouge.com/3c-hf-fluid.php</a><!-- m -->, but for some reason my center and right columns won't start in line with the left.
CSS:
#container {
min-height: 100%;
}
#header {
background: lightblue;
color: red;
height: 70px;
}
#left {
background: lightgreen;
float: left;
width: 200px;
}
#mainpage {
position: relative;
margin-left: 200px;
}
#right {
background: yellow;
float: right;
width: 200px;
}
#content {
margin-right: 200px;
background: white;
}
HTML:
<head>
<title>Testing css layouts</title>
<link href=http://www.webdeveloper.com/forum/archive/index.php/"fluid.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<h2>DIV=header</h2>
</div>
<div id="left">
<p>DIV=left
<br><br><br><br><br><br></p>
</div>
<div id="mainpage">
<div id="content">
<p>DIV=content
<br><br><br></p>
</div>
<div id="right">
<p>DIV=right
<br><br><br></p>
</div>
</div>
</div>
</body>
</html>
Like I said, I've only been looking into CSS since yesterday, so if someone could point me in the right direction...?
Cheers,Add float:left; to #contentThanks Fang, that puts everything on the right line, but it restricts the #content area to the size of the text.
I could put a width in there too, but wouldn't that negate the fluidity of that column? Presumably, in BonRouge's example, the whole point is to allow the center column to expand to fill the entire gap between the left & right columns...?
(I think...)
Hey,
I'm really glad to see you making use of my page - makes me feel kind of useful.
How about this one (<!-- m --><a class="postlink" href="http://bonrouge.com/test/3columnsfluid.htm">http://bonrouge.com/test/3columnsfluid.htm</a><!-- m -->) ?
Remember that the backgrounds (which are actually images (you'll need to make them in Photoshop or whatever) - not just background colours) don't go in the left and right divs - they go in the body and the wrap div.
I hope this helps.Originally posted by BonRouge
Hey,
I'm really glad to see you making use of my page - makes me feel kind of useful.
It is very useful that you have made some examples for the non-guru's like me, so thank-you!
Originally posted by BonRouge
How about this one (<!-- m --><a class="postlink" href="http://bonrouge.com/test/3columnsfluid.htm">http://bonrouge.com/test/3columnsfluid.htm</a><!-- m -->) ?
Remember that the backgrounds (which are actually images (you'll need to make them in Photoshop or whatever) - not just background colours) don't go in the left and right divs - they go in the body and the wrap div.
I hope this helps.
Yeah, that's more like it! But looking at your code, I still can't see which bit of it makes the left, content & right DIVs actually start on the same line... It can't just be because of the background colour gif, surely??I don't know why you were having problems before...
They are (or should be) aligned because there's no top margin or padding...Originally posted by BonRouge
I don't know why you were having problems before...
They are (or should be) aligned because there's no top margin or padding...
LOL! That doesn't bode well then...
Does it work properly for you, if you copy & paste my code above??This it one way to do it:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>3 colum center fluid</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
div {border:1px solid red;}
h1, h2, h3 {text-align:center;margin:0;padding:0;}
#container {position:relative;}
#left {float:left; width:5em;}
#center {margin:0 6em;}
#right {float:right; width:5em;}
-->
</style>
</head>
<body>
<div id="header">
<h1>header</h1>
</div>
<div id="container">
<div id="left">
<h3>left</h3>
</div>
<div id="right">
<h3>right</h3>
</div>
<div id="center">
<h2>center</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Duis quis est eu tortor pulvinar facilisis. Vestibulum imperdiet.
Sed iaculis elementum nunc. Curabitur arcu nunc, porta eu, semper pretium, pellentesque quis, elit.
Mauris posuere consequat justo. In id magna.
Mauris neque felis, iaculis sed, pellentesque blandit, cursus in, metus.</p>
</div>
</div>
<div id="footer">
<h3>footer</h3>
</div>
</body>
</html>This is beginning to freak me out...
Fang, your code works perfectly, but when I try and re-write it, using your example, it still does it wrong. The column on the right starts lower than the center!!
It doesn't make any sense - there's so little code there, I fail to see where I'm going wrong....................
Show the full document you are using.Originally posted by Fang
Show the full document you are using.
Sure.
<html>
<head>
<style type="text/css">
div {border: 1px solid black;}
#wrap {position: relative; }
#left {float: left; width: 100px;}
#center {margin: 0 7em;}
#right {{float: right; width: 100px;}
h1 {position: relative;}
p {text-align: center;}
</style>
</head>
<body>
<div id="header">
<h1>The Header</h1>
</div>
<div id="wrap">
<div id="left">
<p>The left!</p>
</div>
<div id="center">
<p>The center!
<br><br><br><br><br><br><br><br><br><br><br><br><br></P>
</div>
<div id="right">
<p>The right!</p>
</div>
</div>
</body></html>
Thanks!!You have moved div #right. In must go between #left and #center.
Don't mix units; margin in em, width in px (preference is for em which makes all columns fluid if the user changes font-size)
Use a basic document that validats:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Basic HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="copyright" content="Basic HTML">
<meta name="keywords" content="Basic HTML">
<meta name="description" content="HTML template">
<script type="text/javascript">
<!--
// all JavaScript here
//-->
</script>
<style type="text/css">
<!--
/* cascading style sheet */
-->
</style>
</head>
<body>
<!-- html here -->
</body>
</html>Okay, I've moved the #right DIV, changed the width's on #left & #right to me in em's, and added the stuff at the top, but it's still not displaying correctly...There was an extra opening bracket in #right
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>3 colum center fluid</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<style type="text/css">
<!--
div {border: 1px solid black;}
#wrap {position: relative; }
#left {float: left; width: 100px;}
#center {margin: 0 7em;}
#right {float: right; width: 100px;}
h1 {position: relative;}
p {text-align: center;}
-->
</style>
</head>
<body>
<div id="header">
<h1>The Header</h1>
</div>
<div id="wrap">
<div id="left">
<p>The left!</p>
</div>
<div id="right">
<p>The right!</p>
</div>
<div id="center">
<p>The center!
<br><br><br><br><br><br><br><br><br><br><br><br><br></P>
</div>
</div>
</body></html>Originally posted by Fang
There was an extra opening bracket in #right
Oops - good spot. However it hasn't changed anything. The code I last gave works! If not which browser and OS are you using?Originally posted by Fang
The code I last gave works! If not which browser and OS are you using?
I'm running IE6 on XP.Is it working? I have no problems with XP IE6.Your code works fine, but when I tried to re-write it (so I can try to understand how it all works), it fails...As with (nearly) all css layout solutions, you can not change parameters without breaking the layout.
CSS is about 'design and implementation'; you design the layout, then implement it with css.
If you change the design, you will usually have to re-write the css.
As a complete newbie on CSS layouts, I was following BonRouge's example page <!-- m --><a class="postlink" href="http://bonrouge.com/3c-hf-fluid.php">http://bonrouge.com/3c-hf-fluid.php</a><!-- m -->, but for some reason my center and right columns won't start in line with the left.
CSS:
#container {
min-height: 100%;
}
#header {
background: lightblue;
color: red;
height: 70px;
}
#left {
background: lightgreen;
float: left;
width: 200px;
}
#mainpage {
position: relative;
margin-left: 200px;
}
#right {
background: yellow;
float: right;
width: 200px;
}
#content {
margin-right: 200px;
background: white;
}
HTML:
<head>
<title>Testing css layouts</title>
<link href=http://www.webdeveloper.com/forum/archive/index.php/"fluid.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<h2>DIV=header</h2>
</div>
<div id="left">
<p>DIV=left
<br><br><br><br><br><br></p>
</div>
<div id="mainpage">
<div id="content">
<p>DIV=content
<br><br><br></p>
</div>
<div id="right">
<p>DIV=right
<br><br><br></p>
</div>
</div>
</div>
</body>
</html>
Like I said, I've only been looking into CSS since yesterday, so if someone could point me in the right direction...?
Cheers,Add float:left; to #contentThanks Fang, that puts everything on the right line, but it restricts the #content area to the size of the text.
I could put a width in there too, but wouldn't that negate the fluidity of that column? Presumably, in BonRouge's example, the whole point is to allow the center column to expand to fill the entire gap between the left & right columns...?
(I think...)
Hey,I'm really glad to see you making use of my page - makes me feel kind of useful.
How about this one (<!-- m --><a class="postlink" href="http://bonrouge.com/test/3columnsfluid.htm">http://bonrouge.com/test/3columnsfluid.htm</a><!-- m -->) ?
Remember that the backgrounds (which are actually images (you'll need to make them in Photoshop or whatever) - not just background colours) don't go in the left and right divs - they go in the body and the wrap div.
I hope this helps.Originally posted by BonRouge
Hey,
I'm really glad to see you making use of my page - makes me feel kind of useful.
It is very useful that you have made some examples for the non-guru's like me, so thank-you!
Originally posted by BonRouge
How about this one (<!-- m --><a class="postlink" href="http://bonrouge.com/test/3columnsfluid.htm">http://bonrouge.com/test/3columnsfluid.htm</a><!-- m -->) ?
Remember that the backgrounds (which are actually images (you'll need to make them in Photoshop or whatever) - not just background colours) don't go in the left and right divs - they go in the body and the wrap div.
I hope this helps.
Yeah, that's more like it! But looking at your code, I still can't see which bit of it makes the left, content & right DIVs actually start on the same line... It can't just be because of the background colour gif, surely??I don't know why you were having problems before...
They are (or should be) aligned because there's no top margin or padding...Originally posted by BonRouge
I don't know why you were having problems before...
They are (or should be) aligned because there's no top margin or padding...
LOL! That doesn't bode well then...
Does it work properly for you, if you copy & paste my code above??This it one way to do it:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>3 colum center fluid</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
div {border:1px solid red;}
h1, h2, h3 {text-align:center;margin:0;padding:0;}
#container {position:relative;}
#left {float:left; width:5em;}
#center {margin:0 6em;}
#right {float:right; width:5em;}
-->
</style>
</head>
<body>
<div id="header">
<h1>header</h1>
</div>
<div id="container">
<div id="left">
<h3>left</h3>
</div>
<div id="right">
<h3>right</h3>
</div>
<div id="center">
<h2>center</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Duis quis est eu tortor pulvinar facilisis. Vestibulum imperdiet.
Sed iaculis elementum nunc. Curabitur arcu nunc, porta eu, semper pretium, pellentesque quis, elit.
Mauris posuere consequat justo. In id magna.
Mauris neque felis, iaculis sed, pellentesque blandit, cursus in, metus.</p>
</div>
</div>
<div id="footer">
<h3>footer</h3>
</div>
</body>
</html>This is beginning to freak me out...
Fang, your code works perfectly, but when I try and re-write it, using your example, it still does it wrong. The column on the right starts lower than the center!!
It doesn't make any sense - there's so little code there, I fail to see where I'm going wrong....................
Show the full document you are using.Originally posted by Fang Show the full document you are using.
Sure.
<html>
<head>
<style type="text/css">
div {border: 1px solid black;}
#wrap {position: relative; }
#left {float: left; width: 100px;}
#center {margin: 0 7em;}
#right {{float: right; width: 100px;}
h1 {position: relative;}
p {text-align: center;}
</style>
</head>
<body>
<div id="header">
<h1>The Header</h1>
</div>
<div id="wrap">
<div id="left">
<p>The left!</p>
</div>
<div id="center">
<p>The center!
<br><br><br><br><br><br><br><br><br><br><br><br><br></P>
</div>
<div id="right">
<p>The right!</p>
</div>
</div>
</body></html>
Thanks!!You have moved div #right. In must go between #left and #center.
Don't mix units; margin in em, width in px (preference is for em which makes all columns fluid if the user changes font-size)
Use a basic document that validats:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Basic HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="copyright" content="Basic HTML">
<meta name="keywords" content="Basic HTML">
<meta name="description" content="HTML template">
<script type="text/javascript">
<!--
// all JavaScript here
//-->
</script>
<style type="text/css">
<!--
/* cascading style sheet */
-->
</style>
</head>
<body>
<!-- html here -->
</body>
</html>Okay, I've moved the #right DIV, changed the width's on #left & #right to me in em's, and added the stuff at the top, but it's still not displaying correctly...There was an extra opening bracket in #right
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>3 colum center fluid</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<style type="text/css">
<!--
div {border: 1px solid black;}
#wrap {position: relative; }
#left {float: left; width: 100px;}
#center {margin: 0 7em;}
#right {float: right; width: 100px;}
h1 {position: relative;}
p {text-align: center;}
-->
</style>
</head>
<body>
<div id="header">
<h1>The Header</h1>
</div>
<div id="wrap">
<div id="left">
<p>The left!</p>
</div>
<div id="right">
<p>The right!</p>
</div>
<div id="center">
<p>The center!
<br><br><br><br><br><br><br><br><br><br><br><br><br></P>
</div>
</div>
</body></html>Originally posted by Fang
There was an extra opening bracket in #right
Oops - good spot.
However it hasn't changed anything. The code I last gave works! If not which browser and OS are you using?Originally posted by Fang The code I last gave works! If not which browser and OS are you using?
I'm running IE6 on XP.Is it working? I have no problems with XP IE6.Your code works fine, but when I tried to re-write it (so I can try to understand how it all works), it fails...As with (nearly) all css layout solutions, you can not change parameters without breaking the layout.
CSS is about 'design and implementation'; you design the layout, then implement it with css.
If you change the design, you will usually have to re-write the css.