I am building a CSS site and fail solving this partial problem:
On the left side there is a box which consists of three images. A top image, an (optional and stretched) middle image, and a bottom image.
I want the box to the left automatically stretch if there is more content inside. This already works for the right side with my current code.
(I put both columns into a container div and set the left box to height: 100.)
But now there shall also be content in the left box. This content does overflow because I set the left box to position: absolute. Thus it does not increase the size.
I didn't manage to get this effect without position: absolute though. I tried using float etc.
Here is the example code:
<body>
<div id="centerwrapper">
Header etc<br/>
<div id="verticalstretcher">
<div id="bgtop">
<div id="bgbottom">
<div id="bgmiddle">
</div>
</div>
</div>
<div id="content">
Content here will auto-stretch the container vertically (and the box to the left!)
</div>
</div>
Footer etc<br/>
</div>
</body>
With this stylesheet:
#centerwrapper {
width: 500px;
margin: 0 auto;
}
#verticalstretcher {
position: relative;
min-height: 280px; /* Sum of the top and bottom image height */
width: 100%;
background-color: orange;
}
#bgtop {
position: absolute;
width: 185px; /* width of the bg images */
height: 100%;
background: url(css/img/bg_navi_left_top.gif) no-repeat;
}
#bgbottom {
position: absolute;
width: 100%;
height: 100%;
background: url(css/img/bg_navi_left_bottom.gif) bottom no-repeat;
}
#bgmiddle {
position: absolute;
width: 100%;
top: 250px; /* Don't cover top GIF */
bottom: 15px; /* Don't cover bottom GIF */
background-color: yellow; /* Repeated image here */
}
#content {
margin-left: 200px; /* Start the text right from the box */
}
It looks like this (Colored it for better understanding):
The yellow part is actually a stretched image, I left it out for the example, it works as expected.
How can I add text into the left box that will also stretch it? Or is it possible with TABLE instead of CSS at this point?
EDIT: BitDrink's solution looks this way at my browser (current FF)
alt text http://img502.imageshack.us/img502/1241/layoutsample2.png
I could be wrong here but what you are trying to achieve here is two columns of the same height no matter how much text is in the left or right columns.
Equal Height Columns using CSS is the best CSS technique for this where by the backgrounds and bottom curved edges would need to be given to div#vertical stretcher.
The only other way that I know to make two columns equal height is to use JavaScript. See The Filament group article on setting equal heights with jQuery.
the problem is the absolute positioning! If you want an automatic resize (in vertical) of the left box, just apply a "float:left" to #bgtop!
Notice that the attribute "min-height" is not supported from all browsers (for example IE6)! The code below is an example:
<style type="text/css" >
#centerwrapper {
width: 500px;
margin: 0 auto;
}
#verticalstretcher {
min-height: 280px; /* Sum of the top and bottom image height */
width: 100%;
background-color: orange;
}
#bgtop {
float: left;
width: 185px; /* width of the bg images */
height: 100%;
background: #CCC url(css/img/bg_navi_left_top.gif) no-repeat;
}
#bgbottom {
width: 100%;
height: 100%;
background: #666 url(css/img/bg_navi_left_bottom.gif) bottom no-repeat;
}
#bgmiddle {
width: 100%;
background-color: yellow; /* Repeated image here */
}
#content {
margin-left: 200px; /* Start the text right from the box */
background-color: #FFF;
border: 1px dotted black;
}
</style>
<body>
<div id="centerwrapper">
Header etc<br/>
<div id="verticalstretcher">
<div id="bgtop">
text top
<div id="bgmiddle">
text middle
<div id="bgbottom">
text bottom
</div>
</div>
</div>
<div id="content">
Content here will auto-stretch the container vertically (and the box to the left!)
</div>
</div>
Footer etc<br/>
</div>
</body>
You can see the result below:
The 4 div(s) resize vertically according to their content!
Related
I'm just working on a simple HTML page but still struggling with the divs.
The plan is: a fullscreen background and four horizontal buttons next to each other on the bottom. The buttons are currently mapped to the background image - so I could just add four invisible layers (divs) with some hrefs for example. Otherwise I would add them manually (in four single jpgs) to the bottom...
Howsoever, I want the whole site to (borderlessly) scale up and down to variable screen resolutions. Therefore also the sizes of the divs/images should scale equally and keep its position.
What I've got so far:
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.background {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
img {
height: auto;
width: auto;
min-width: 100%;
min-height: 100%;
}
<body>
<div class="background">
<div class="img">
<img src="background.jpg">
</div>
</div>
</body>
At this point I only have the background set up: its in an img-div within a background container with absolute positioning.
How could I add the four buttons now to stick at the bottom of the background a keep its relative size and position when the screen resolution changes?
:)
Take the button images out of the background image, set the body rules as follows (with background-image), add a div at the bottom and put the buttons in there (I chose DIVs with background-images for the buttons, but of course you can also use <button> tags. Adjust the "bottom" and button heights and the button margins as needed:
CSS
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: url(background.jpg) center center fixed;
background-size: cover
}
.bottom {
position: absolute;
bottom: 0;
left: 0;
height: 50px;
width: 100%;
text-align: center;
}
.button {
display: inline-block;
width: 80px;
height: 50px;
margin: 10px;
}
.button1 {
background: url(button1.jpg) center center fixed;
background-size: cover
}
.button2 {
background: url(button2.jpg) center center fixed;
background-size: cover
}
.button3 {
background: url(button3.jpg) center center fixed;
background-size: cover
}
.button4 {
background: url(button4.jpg) center center fixed;
background-size: cover
}
HTML:
<body>
<div class="content">
(your content)
</div>
<div class="bottom">
<div class="button button1">(button text 1...)</div>
<div class="button button2">(button text 2...)</div>
<div class="button button3">(button text 3...)</div>
<div class="button button4">(button text 4...)</div>
</div>
</body>
Thanks for the quick help!
The code looks good so far. But I still have the problem that the buttons change its size when I rise or decrease the screen resolution. Is there a way to give them fixed sizes in relation to the whole screen? "buttonX" should always have x% of the screens width and x% of its height... And I don't want the actual visible positioning resp. margin to change when the resolution changes :/
But many thanks so for!
How to automatically adjust size of the div which is horizontally centred, using another div which has position: fixed property?
To better understand what I mean please take a look at the picture below. Div A is a fixed div with a fixed size and div B is a div which is horizontally centred. I want div B to resize (when I resize browser window) in a such way so right border of A and left border of B never overlap (ideally, if the distance between the borders kept the same).
I know that this can be fairly easy done using JavaScript by reacting on resize events, but I'm wondering is there any way to achieve this in pure CSS?
Here's another way. This should work in older browsers too.
<style>
div {
border: 1px solid red;
height: 100px; }
#A {
position: fixed;
width: 150px; }
#B {
margin: 0px 155px; }
</style>
<div id="A">Stuff</div>
<div id="B">Stuff</div>
How about this:
#a{
width:200px;
}
#b{
width:calc(100% - 400px);
}
Just set the width of B to be 100% of screen width minus twice the width of A and their borders will touch.
When an element is given the settings position: absolute or position: fixed You can change the width of an element by using the left and right properties.
Simply add the same amount to the right as you would to the left
#left {
position: absolute;
width: 150px;
}
#middle {
position: absolute;
left: 165px;
right: 165px;
overflow: auto;
}
/* For demo purposes */
html, body, div { height: 100%; margin: 0; } div { background: red; } #overflow { height: 200%; }
<div id="left"></div>
<div id="middle">
<div id="overflow"></div>
</div>
I'm stuck trying to get this to work. It looks right when the content of the main column fills the page height but not when it doesn't.
Looks right: http://jsfiddle.net/creativetags/ngv4H/1/
Doesn't look right: http://jsfiddle.net/creativetags/EAuBc/1/
<div class='container'>
<div class='container-wrap'>
<nav class='tabnav'>Some nav menu items here</nav>
<div class='container-inner'>
<div class='clearfix' id='mainwrap'>
<div class='columns' id='main'>
<h2>Main content scrolls here</h2>
</div>
</div>
<div class='columns' id='side'>
<div class="sidecontent">
<p>Fixed Side panel</p>
</div>
</div>
</div>
</div>
</div>
I'm using a faux sidebar column that is fixed, so when you scroll the main column it stays in view.
I need the background of .container-inner to fill to the bottom of the page, even when the content doesn't reach the bottom.
.tabnav needs to show the background image from the body tag, so .container-inner can't start from the top of the page.
Updated demos with large content and small content, using the same CSS.
Summary of the changes
Fixing the main content
Apply the white bg color to both .container-wrap and .container-inner.
Set .container and .container-wrap to height:100%;.
The background image underneath .tabnav is now covered by a white bg color, so re-apply the bg image to .tabnav. This is the key part of the solution.
Updating the sidebar
Set #side and .sidecontent to height:100%;.
Move the side bg image from .container to .sidecontent.
CSS added
.container {
height: 100%;
...
}
.container-wrap {
width: 660px;
height: 100%;
background-color: #f8f8f8;
}
.tabnav {
background: #1d1d1b url("http://cat.storehousebelfast.com/assets/bg.jpg") repeat fixed top left;
}
#side {
height: 100%;
...
}
.sidecontent {
background: transparent url("http://cat.storehousebelfast.com/assets/right-column.gif") repeat-y top right;
height: 100%;
...
}
CSS removed
.container {
background: transparent url("http://cat.storehousebelfast.com/assets/right-column.gif") repeat-y top right; /* Remove this */
...
}
.container-inner {
min-height: 100%; /* Remove this */
height: 100%; /* Remove this */
...
}
When I resize the browser (window) it shrinks the top background images (yellow squares) and causes a 1px break in the layout (the red squares show the area with the problem). I tried to force the size to always be the same for the top background images by setting width to 50px. The rest of the background is the repeated-x content_bg_sliver.gif image that I show by using a purple square. Any suggestions?
Thanks,
partizan
P.S: Please see attached images that shows the problem within the red squares.
<!-- HTML CODE Starts -->
<div id="top-navigation-container-inner">
<div id="top-nav-left-background"><!-- The left background appended to the top main navigation --></div>
<div id="top-nav-right-background"><!-- The right background appended to the top main navigation --></div>
</div>
<div id="main-body-container">
<div id="main-body-container-inner">
main content goes here....
</div>
</div>
<!-- HTML CODE Ends -->
/* CSS Code Starts */
#top-navigation-container-inner {
background: #FFF;
height: 160px;
float: none;
font: 14px Arial;
position: relative;
}
#top-nav-left-background, #top-nav-right-background {
height: 370px;
position: relative;
top: 0;
width: 50px;
}
#top-nav-left-background {
background: url('../images/top_nav_left_background.gif') left bottom no-repeat;
float: left;
margin-left: -50px;
}
#top-nav-right-background {
background: url('../images/top_nav_right_background.gif') right bottom no-repeat;
float: right;
margin-right: -50px;
}
#main-body-container{
background: aqua url('../images/content_bg_sliver.gif') center repeat-y;
float:none;
overflow:hidden;
width: 100%;
height: 400px;
}
/* End CSS Code */
try looking at this and see if this is what your after and if you think it's a better way to go about it!
http://drupalgeeks.co.uk/example/
Okey so basically I have:
<div id="content">
... content of arbitrary size ...
</div>
<div id="content_bottom"></div>
The style is:
#content {
background: transparent url(content_tile.png) center top repeat-y;
width: 800px;
}
#content_bottom {
background: transparent url(content_bottom.png) center top no-repeat;
height: 200px;
width: 800px;
}
content_tile.png is a 800x1 image (tiles vertically), and has transparency.
content_bottom.png is a 800x200 image.
Basically, I need to have the content_bottom.png image to replace the #content background image only on the bottom.
Having a negative margin on #content almost works, but since both images are transparent images, they overlap, and it should not happen.
I think that I need to make #content not to render its background on the last 200px on its bottom.
Any idea how I could do that ?
If you altered your markup slightly and used javascript you could do it with an absolutely positioned div that contained only the background. Then onload, set #repeating-background's height to (#content's height - 200px):
HTML
<div id="content">
<div id="text">
This is where your content would go
</div>
<div id="repeating-background"></div>
</div>
CSS
#content {
position: relative;
width: 800px;
background: url(content_bottom.png) left bottom no-repeat;
}
#text {
position: relative;
z-index: 2;
}
#repeating-background {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 800px;
height: 1px;
background: url(content_tile.png) left top repeat-y;
}
Javascript (jQuery)
$(document).ready(function() {
$('#repeating-background').height($('#content').height() - 200);
});
create a third div, nested in #content, that is 200px height.