Hi,
I finally got my layout to work in IE, FireFox and Netscape (have yet to
check in on Safari), and was feeling pretty excited about having figured out
how to use css.. until I discovered that if i shrunk my browser, the content
to the right shifted right over the left content. They overlapped on to
each other.
Is there some way of fixing this? Ideally if the browser was minimized I
would like the page to still be legible by using the browser scroll on the
bottom. I'm guessing from what I researched over the Internet it may have
something to do with the "position" or "float" tag. If somebody could
please direct me I'd super grateful.
Here's what my code looks like. My layout is just a 2 column page with a
boarder around it. Content on the left, and content on the right.
<style type="text/css">
body {
margin: 0px 0px 0px 0px;
padding: 0px;
}
#left {
width: 265px;
position:absolute;
border-left:1px solid silver;
border-bottom:1px solid silver;
border-top: 1px solid silver;
padding-bottom:20px;
height:398px;
margin-left: 180px;
margin-top: 30px;
}
#right {
width:590px;
position: absolute;
border-right:1px solid silver;
border-top: 1px solid silver;
border-bottom:1px solid silver;
padding-bottom:20px;
height:398px;
margin-left: 27%;
margin-top: 30px;
margin-right:17%;
}
p.leftcontent {
width: 125px;
border-top: 1px solid silver;
margin-top:25px;
margin-left: 10px;
margin-right: 5px;
padding-top: 15px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-indent: 5px;
text-align:center;
}
p.special {
width: 125px;
border-bottom: 1px solid silver;
margin-top:25px;
margin-left: 10px;
margin-right: 5px;
padding-bottom: 15px;
font-family: Arial,Verdana,Helvetica,sans-serif;
font-size: 11px;
color: #333333;
font-weight: bold;
text-align:center;
text-indent: 5px;
}
p.right {
border-top: 1px solid silver;
margin-top:25px;
margin-left: 10px;
margin-right: 5px;
padding-top: 15px;
font-family: Arial,Verdana,Helvetica,sans-serif;
font-size: 11px;
color: #333333;
text-align:justify;
}
</style>
</head>
<body>
<div id="left"><p class="leftcontent">ROD XXXX </p>
<p class="special">bio</p>
</div>
<div id="right">
<p class="right">adfkadfjladj <br /> <br />afdjaslkfjsladki</p>
</div>
</body>
</html>
______________________________________________________________________
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/
