finally am getting confident at using css for layouts. I just read "In
search of the One true layout" on position is everything and after trying
out the idea, am a bit confused about some of the concepts:
1. Does one use the width of the box in determining the leftmost point or
better still, how do I determine the leftmost point or rightmost point. Am
reall sorry if this seems obvious but again, am confused by the calculations
because after trying to achieve some layout I had to juggle the numbers to
get the desired layout and am not really sure if what I did was right.
Looking at the calculation at P.I.E, my maths seems odd.
Here is the markup and the css:
#body{
margin:0;
padding:0;
}
#header{
background-color:#33CCCC;
}
#container{
display:block;
overflow:hidden;
width:100%;
}
* html #container{
float:left;
}
#content{
float:left;
width:65%;
margin-left:35%;
border:1px solid #FF3300;
padding-bottom:32767px;
margin-bottom:-32767px;
background-color:#fff;
}
* html #content{
display:inline;
}
#left_nav{
float:left;
width:35%;
margin-left:-101%;
border:1px solid #003300;
padding-bottom:32767px;
margin-bottom:-32767px;
background-color:#66CC66;
}
#footer{
clear:both;
background-color:#CCCCCC;
}
<div id="header">
<h1>2 column </h1>
</div>
<div id="container">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis
ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut
sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce
ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel
accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non
tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere,
pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros
sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque
sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis.
Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at,
lacinia ut, augue. Nullam nunc.</p>
</div>
<div id="left_nav">
<p>Lorem ipsum dolor sit amet, consectetuer. </p>
</div>
</div>
<div id="footer">© skoolnet</div>
2. The other thing is that the border style applied to the box do not
display the solid line.
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
