Really stupid CSS question

generalmiaow · 14-10-2006 2:00pm #1

Hi, I have been driving myself mad trying to solve what should be a simple problem in CSS. Basically, my question is this: Supposing I have a nested div inside another div, and I offset it by 100 pixels, why, no matter what I do, does it assume the width of the browser? (thus leading to a total page width of browser + 100px and scrollbar nightmare). Additionally, if I have a div to its left with a width of 100 pixels, and I want the div on the right to fill all the screen except for the space assigned to the left div, how can I get away without specifying an explicit width?* Also included is a question about why a div seems to be determining where another div is being rendered when my understanding is that top and so forth specify offset relative to the containing unit (the parent? isn't that the same thing?)

Anyway, on to the code
[PHP]<html>

<head>
<style>
#globalwrap {
top 0px;
left:0px;
background-color: blue;
}
#sidebar {
position: relative;
top: 0px;
left: 0px;
width: 200px;
background-color:green
}
#contentbox {
position: relative;
left: 200px;
top: 10px;
background-color:red
}
</style>
</head>
<body>
<div id="globalwrap">
<div id="sidebar">Width of the sidebar is fine, text wraps and whatnot</div>
<div id="contentbox">How can I make this box not exceed the width of my viewport without giving it an explicit width? Also, why is it rendering 10px after the end of #sidebar when its parent is #globalwrap?</div>
</div>
</body>

</html>
[/PHP]

If this isn't showing up right for the rest of you, I will do a screenshot, but so far it's screwed up for me in firefox and opera (ubuntu 6.06).

I've been losing sleep over this and I've bought and read through 2 CSS books and it hasn't helped. I can do anything else I've read about except for this, it just doesn't make any sense to me. I'm sure it's something stupid I've misunderstood though. Whoever can help me I will be eternally grateful!!

*You know how in the old days you could do
[PHP]
<TD WIDTH="100"> </TD> <TD WIDTH="100%">[/PHP]
and it would look fine.

wheres me jumpa · 14-10-2006 3:51pm

Is that what you are trying to achieve?

<html>

<head>
    <style>
        #globalwrap {
        top 0px;
        left:0px;
        background-color: blue;
        }
        #sidebar {
        float: left;
        position: relative;
        top: 0px;
        left: 0px;
        width: 200px;
        background-color:green
        }
        #contentbox {
        position: relative;
        background-color:red
        }
    </style>
</head>
<body>
    <div id="globalwrap">
        <div id="sidebar">Width of the sidebar is fine, text wraps and whatnot</div>
        <div id="contentbox">How can I make this box not exceed the width of my viewport without giving it an explicit width? Also, why is it rendering 10px after the end of #sidebar when its parent is #globalwrap?</div>
    </div>
</body>

</html>

This has the sidebar and content level, you can put a margin in between to space them.

generalmiaow · 14-10-2006 10:30pm

you're quite right, I was ignoring some very simple things I could have been doing and trying to get around them the wrong way. thanks for the reply!

Really stupid CSS question

Comments