...

View Full Version : Help with CSS divs



lipstud
06-03-2007, 02:55 PM
hey everybody, hope someone can help me with this

i did a tutorial on webreference to recreate their hope page, and i found it really fun and interesting and its made me want to learn more about css and divs

ive got some really basic code, and i think its probably a really simple reason that its not working. but for someone whos just started, its stopped me in my tracks




<style type="text/css">
body {
background:#FFFFFF;}

#main {
width:100%;
margin:0px;
padding:1px;
background:#FFFFFF;}

#lNav {
float:left;
position:relative;
visibility:visible;
top:5px;
left:5px;
width:150px;
height:100%;}

#midCol {
position:relative;
visibility:visible;
top:5px;
left:165;
width:inherit;
height:100%;}

#rNav {
float:right;
position:relative;
visibility:visible;
top:5px;
right:5px;
width:150px;
height:100%;}


#lNav,#midCol,#rNav {
background:#ffffff;
border-top:4px;
border-left:1px;
border-right:1px;
border-bottom:1px;
border-style:solid;
border-color:#000000;}


#lNav h1,#midCol h1,#rNav h1 {
font:bold .8em Courier;
background:#ffffff;}

</style>

<div id="main">
<div id="rNav"><h1>rNav</h1></div>
<div id="lNav"><h1>lNav</h1></div>
<div id="midCol"><h1>midCol</h1></div>
</div>



what i want to happen - rNav to stay on the right side and not change width, lNav to stay on the left and not change width, and the div in the middle to resize according to the width of the web browser.

the effect works in the tutorial that i did on webreference, but when i try to recreate the effect it doesnt

ive really tried my best (which probably isnt much) at fixing the problem, but its still not working

can anyone help? (remember im new to it, so try and go easy lol)

lipstud

koyama
06-03-2007, 03:19 PM
what i want to happen - rNav to stay on the right side and not change width, lNav to stay on the left and not change width, and the div in the middle to resize according to the width of the web browser.
Try these changes:


#main {
width:100%;
margin:0px;
/* padding:1px; */
background:#FFFFFF;
}
#midCol {
position:relative;
visibility:visible;
top:5px;
/* left:165; */
/* width:inherit; */
margin-left: 154px;
margin-right: 154px;
/* height:100%; */
}

I think that you should use margins instead of offsets (top, right, bottom, left) to move around with elements. That tends to work better. Relative positioning is unfortunately associated with many bugs in IE.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum