a div in a container with a background that stretches to infinity
Question
I've got a design idea that I'm not exactly sure the best way to go about pulling it off in html and css. Basically I want to do what I've (crudely) drawn in this image:
My basically I want a div to appear some distance down from the top of the page that stretches from infinity, to within the bounds of the container to display some content. My code looks something like this
# html
<html>
<body>
<div id="container">
<div id="content">
Some text content
</div>
</div>
</body>
</html>
# css
div#container {
width: 1140px;
margin: 0 auto;
}
div#content {
width: 300px;
background: #000;
color: #fff;
float: left;
}
Where the div#content would be the one that has the background that stretches to infinity. Is this possible to pull off without resorting to altering the background of the tag? I want to use this on multiple pages within my site, all of which have different heights and distances down from the top, so I'd like to be able to do it without having to switch out the background images for the tags for these different pages. And the div#content will have variable content length, so using body background images isn't a very elegant solution. It would be nice to do it without resorting to some kind of absolute positioning as well.
Sorry for rambling, I hope what I am trying to do is clear. Any suggestions?
2 answers
solution1
1 2011-11-19 07:23:29
By "infinity," you mean that div#content appears to go forever to the left of the page and beyond? It can't really go for infinity, but you can certainly give the illusion of that.
Sigh .... I am a bit baffled. Maybe because it's midnight and I can't think straight, but I whipped this up:
Live preview (Feel free to fork this fiddle and play around with it to get it just right.)
Is this close to what you're looking for? I wonder if the most robust way to do this right might involve Javascript (jQuery, specifically). It would really help to know the height of that "content" div, and jQuery might help us with the sizing/positioning of it if the window changes its dimensions.
solution2
1 ACCPTED 2011-11-19 07:46:49
I whipped this up.
Just adds a div beneath the content area that matches up with the element you have in the header. It goes on infinitely in both directions. I hope this is what you were trying to achieve.
EDIT : As per your request in the comments, I threw this together. It uses jQuery to set the width of the underlying div and its top margin, which is found by getting the top offset of the fg div.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.