Hi,
and yes, that's the state i'm in.
I've read a very nice book on CSS. And what i've read 10 times in that book: with css, you don't use tables for layout no more.
So i thought i give it a go, with a little (easy, i thought
) hello world example...
and aaaarghhh, i can't get it done....
what i wanted to accomplish?
2 columns. 1, at the right, 300 pixels wide (fixed) and the other one, the left one, filling up the rest of the window.
I have tried:
- float left one div, and float right another. Didn't work
- right margin of 300 px on the left one, and the other one float right.
- width=300, float = right, for the right one, and width="100%" for the left one (hihihi, works with tables
)
- i fought with position:relative, position:absolute; width:auto, and i lost.
Can anyone give me a hand?
Grtz,
Michelfloat both to the leftHi, tried both float:left, but didn't work with me (IE6.0)
div.right {
background-color:yellow;
float:left;
width:300px;
}
div.left {
background-color:red;
float:left;
}I've never like the results from floating. Set the right margin of your left col DIV to 301px; set the width of the right col DIV to 300px and then absolutely position it to top, right.would you post the markup as well?<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Style-Type" content="text/css">
<title>Giant says</title>
<style type="text/css">
#content {margin-right:301px}
#navigation {position:absolute; top:1em; right:1px; width:300px}
</style>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent non enim eleifend est porttitor tincidunt. Donec rutrum cursus enim. Sed viverra, sapien eget ornare semper, est velit blandit velit, eget blandit arcu nibh sed ipsum. In hac habitasse platea dictumst. Vivamus neque ligula, fringilla eu, imperdiet sit amet, molestie eget, ligula. Praesent pretium arcu quis pede. Vestibulum ipsum risus, condimentum at, elementum sit amet, ultricies id, erat. Sed lacinia porta orci. Praesent euismod odio at augue. Donec placerat sodales magna. Duis velit. Vivamus nibh. Nullam nibh. Proin eros. Fusce turpis augue, convallis ac, pulvinar at, mattis at, nisi. Vivamus iaculis. Ut pede nisl, egestas vitae, viverra dignissim, porta eget, ligula. Nunc faucibus. Praesent scelerisque nunc vel lacus. Curabitur porttitor eleifend velit. </p>
</div>
<ul id="navigation">
<li>Fee</li>
<li>Fie</li>
<li>Foe</li>
<li>Fum</li>
</ul>Maybe you got the wrong book? Check the ones in my sig.i'll second that, the 'styling with CSS: a designers guide' book rocksi've read this one:
Cascading Style Sheets: The Definitive Guide, Second Edition
By Eric MeyerIt works!!!!
Great.
But then the sequel
now the right div is positioned top:1em.
What if these 2 blocks would be below some other text, and you don't know the height of the text above the 2 blocks
Then you can't give the exact TOP value for the block, and if you omit the TOP, the right navigation block would be placed below the left div.
What i'm trying to say is can it be done without specifying beforehand what the top of the right block is, because there can be 1 or 10 em's of text above it.
Before i forget: thanks for the fast reply's so farYou'll have to put those two elements inside a DIV, one after another, and then you'll position that DIV.allrightie,
that worked!
i do, however, have to put the position:relative attribute on the outer div. (position:absolute does the trick also).
without that, the outer div gets placed allright, but the right element is still 1 em from the top of the screen, instead of 1em from the top of the outer div.
Is that how it's supposed to be?
I remember reading that the position:absolute for the right element is enough, because it is place 1em from the top of it's containing element, being the outer div.
Or is it a small feature of my win2000prof/ie6 combination?You shouldn't have to do any positioning inside the DIV for the col. Just put one after the other in the HTML and let things flow. Then you can use margins to adjust the spacing. Be aware. Over-using positioning can lead to odd results, especially as the page is resized. Use as little of it that you can.Also be aware that you are designing and testing in IE, which is very buggy and non-standard. Always test using Firefox or Opera. Then adjust for IEs quirks and bugs because your next question is "Why does it work in IE but not Firefox/Opera/Safari?!" (See link in my sig)Another tip whilst in the process of producing a website, don't forget to validate (<!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m -->) often
and yes, that's the state i'm in.
I've read a very nice book on CSS. And what i've read 10 times in that book: with css, you don't use tables for layout no more.
So i thought i give it a go, with a little (easy, i thought
) hello world example...and aaaarghhh, i can't get it done....
what i wanted to accomplish?
2 columns. 1, at the right, 300 pixels wide (fixed) and the other one, the left one, filling up the rest of the window.
I have tried:
- float left one div, and float right another. Didn't work
- right margin of 300 px on the left one, and the other one float right.
- width=300, float = right, for the right one, and width="100%" for the left one (hihihi, works with tables
)- i fought with position:relative, position:absolute; width:auto, and i lost.
Can anyone give me a hand?
Grtz,
Michelfloat both to the leftHi, tried both float:left, but didn't work with me (IE6.0)
div.right {
background-color:yellow;
float:left;
width:300px;
}
div.left {
background-color:red;
float:left;
}I've never like the results from floating. Set the right margin of your left col DIV to 301px; set the width of the right col DIV to 300px and then absolutely position it to top, right.would you post the markup as well?<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Style-Type" content="text/css">
<title>Giant says</title>
<style type="text/css">
#content {margin-right:301px}
#navigation {position:absolute; top:1em; right:1px; width:300px}
</style>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent non enim eleifend est porttitor tincidunt. Donec rutrum cursus enim. Sed viverra, sapien eget ornare semper, est velit blandit velit, eget blandit arcu nibh sed ipsum. In hac habitasse platea dictumst. Vivamus neque ligula, fringilla eu, imperdiet sit amet, molestie eget, ligula. Praesent pretium arcu quis pede. Vestibulum ipsum risus, condimentum at, elementum sit amet, ultricies id, erat. Sed lacinia porta orci. Praesent euismod odio at augue. Donec placerat sodales magna. Duis velit. Vivamus nibh. Nullam nibh. Proin eros. Fusce turpis augue, convallis ac, pulvinar at, mattis at, nisi. Vivamus iaculis. Ut pede nisl, egestas vitae, viverra dignissim, porta eget, ligula. Nunc faucibus. Praesent scelerisque nunc vel lacus. Curabitur porttitor eleifend velit. </p>
</div>
<ul id="navigation">
<li>Fee</li>
<li>Fie</li>
<li>Foe</li>
<li>Fum</li>
</ul>Maybe you got the wrong book? Check the ones in my sig.i'll second that, the 'styling with CSS: a designers guide' book rocksi've read this one:
Cascading Style Sheets: The Definitive Guide, Second Edition
By Eric MeyerIt works!!!!
Great.
But then the sequel
now the right div is positioned top:1em.
What if these 2 blocks would be below some other text, and you don't know the height of the text above the 2 blocks
Then you can't give the exact TOP value for the block, and if you omit the TOP, the right navigation block would be placed below the left div.
What i'm trying to say
is can it be done without specifying beforehand what the top of the right block is, because there can be 1 or 10 em's of text above it.Before i forget: thanks for the fast reply's so farYou'll have to put those two elements inside a DIV, one after another, and then you'll position that DIV.allrightie,
that worked!
i do, however, have to put the position:relative attribute on the outer div. (position:absolute does the trick also).
without that, the outer div gets placed allright, but the right element is still 1 em from the top of the screen, instead of 1em from the top of the outer div.
Is that how it's supposed to be?
I remember reading that the position:absolute for the right element is enough, because it is place 1em from the top of it's containing element, being the outer div.
Or is it a small feature of my win2000prof/ie6 combination?You shouldn't have to do any positioning inside the DIV for the col. Just put one after the other in the HTML and let things flow. Then you can use margins to adjust the spacing. Be aware. Over-using positioning can lead to odd results, especially as the page is resized. Use as little of it that you can.Also be aware that you are designing and testing in IE, which is very buggy and non-standard. Always test using Firefox or Opera. Then adjust for IEs quirks and bugs because your next question is "Why does it work in IE but not Firefox/Opera/Safari?!" (See link in my sig)Another tip whilst in the process of producing a website, don't forget to validate (<!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m -->) often