Bleeding with CSS Options

[Brian Chandler]

I'm putting together my "kind of blog", for shop chit-chat. Here's the page:

http://imaginatorium.org/shop/blog.php?y=2009&m=9

The index panel is on the right, and I want to make the background colour bleed to the right of the screen. (I.e. not have a grey border on the right.)

Here's the CSS for this <div>:

CODE

DIV.bloglist {
    width: 15em;
    float: right;
    margin: 0.5em -3em 0.5em 0.5em;
    border: none;
    border-left: 5px double #0040b0;
    background-color: #d0e8ff;
    padding: 1em 3em 1em 1em;
    font-family: Gentium, Times, Times New Roman, serif;
    font-style: normal;
}

It sits within a <div> class=main, which has a border defined in %. I might want to change this one day, so I do not regard the distance to the "printing area" of the bloglist <div> as knowable. So I thought I could simply have a large negative margin, and equivalent positive padding, so the background extends "indefinitely" to the right. But if I do this, I get a horizontal scrollbar, as the browser helpfully makes all of the background visible. This appears to happen consistently in Opera and Firefox.

Is there a better way to make a bleed? Have I completely misunderstood anything?

Thanks for suggestions...

[Christian J]

I want to make the background colour bleed to the right of the screen. (I.e. not have a grey border on the right.)

I don't see any CSS border. Do you mean the thin strip of gray parchment background-image to the right of the blue column?

I thought I could simply have a large negative margin, and equivalent positive padding, so the background extends "indefinitely" to the right. But if I do this, I get a horizontal scrollbar

I don't see any hor scrollbar on the linked page, which is odd considering the negative margin (maybe DIV.main has a positive margin that compensates?).

But currently there seem to be four stylesheets contributing to the layout, which is just confusing to try to debug. I suggest you make a test page with all CSS embedded on it, then crop away everything not related to the issue.

[Brian Chandler]

I want to make the background colour bleed to the right of the screen. (I.e. not have a grey border on the right.)

I don't see any CSS border. Do you mean the thin strip of gray parchment background-image to the right of the blue column?

Yes -- I just wrote that bit because I'm not sure if people understand what 'bleed' means.

I thought I could simply have a large negative margin, and equivalent positive padding, so the background extends "indefinitely" to the right. But if I do this, I get a horizontal scrollbar

I don't see any hor scrollbar on the linked page, which is odd considering the negative margin (maybe DIV.main has a positive margin that compensates?).

But currently there seem to be four stylesheets contributing to the layout, which is just confusing to try to debug. I suggest you make a test page with all CSS embedded on it, then crop away everything not related to the issue.

Yes, I know there's a lot there, but it's not clear there is anything to debug, as such, if as you suggest any area with a background is deemed a "viewable" area, prompting scrollbars. The current version just happens to look right in a full-screen Opera window; if you have a wider monitor than mine, it's likely there is a grey strip to the right of the panel. In a narrower window, the scrollbar pops up. Since I can't calculate exactly how much "negative margin" I need, perhaps this approach won't work.

What I am really asking for is guidance: how in general should one approach making a background bleed to the edge of the screen? Is it not possible to make the background extend further than the right of the screen without causing scrollbars?

If so I can see two ways, both ugly:

(1) Do everything in absolute units (pixels, mm, etc; no % or em), so as to be able to calculate the exact distance back to the edge.

(2) Never apply margins or padding to divs; so that everything is positioned wrt the whole screen.

Is that all there is?

[Christian J]

Yes -- I just wrote that bit because I'm not sure if people understand what 'bleed' means.

Not sure I do, actually... In any case, what you don't want is the gap between the blue box and the browser window.

I know there's a lot there, but it's not clear there is anything to debug

Sorry, I meant finding the cause of the unwanted gray strip. I suspect it's caused by something preventing DIV.main from filling the whole window width, but I can't be bothered to look through four stylesheets. Simplify your HTML and CSS until only the relevant parts are left.

The current version just happens to look right in a full-screen Opera window; if you have a wider monitor than mine, it's likely there is a grey strip to the right of the panel. In a narrower window, the scrollbar pops up.

I only get a little hor.scroll at 760px or less.

What I am really asking for is guidance: how in general should one approach making a background bleed to the edge of the screen?

By removing whatever's in between? Could be a lot of things.

Is it not possible to make the background extend further than the right of the screen without causing scrollbars?

Maybe, but it's probably better to remove the need for it. My guess is that your layout is something like this:

CODE

<style type="text/css" media="screen">
body {
background: gray;
margin: 0;
padding: 0;
}

.main {
border: solid red;
width: 90%;
height: 400px;
margin: 0 auto;
}

.sidebar {
background: blue;
float: right;
width: 300px;
margin-right: -10%;
}
</style>

<div class="main">
<h1>main</h1>
<div class="sidebar">sidebar</div>
</div>

(but I'm not sure, so you must confirm this yourself). If so maybe it's better to put DIV.sidebar outside DIV.main.