I have to create a div that has a paper texture to it, with rounded corners. When the content inside grows, this div should grow along with it and not ruin the bg..
So to do this, I made the main div with the content, and made it repeat the center of the bg and set the height to auto. I made a div for the top and bottom parts of it with the textures and rounded corners. I used absolute positioning relative to the content div so when it grows, the bottom bg will be below the content div at all times.
Everything looks good BUT, the top and bottom divs are covering the content div. I can fix this by leaving a large gap at the top and bottom of the content div but it looks strange having such a large gap.. and its improper.
Any ideas around this?
Try adding a margin to the top and bottom of the content div (ie. margin: 20px 0 30px 0; where 20 is the height of your top div and 30 is the height of your bottom div). Also, can't you just put the three divs in a container and position them relatively, one stacked on another?
Example:
<div id="container">
<div id="top"></div>
<div id="content"></div>
<div id="bottom"></div>
</div>
It´s hard to say without looking at your code, but I think your problem can be easily solved by adding a top and bottom padding to your main div, the size of the top and bottom parts.
Edit: An alternative would be to put your content in another div in the main div and abandon absolute positioning. Just put all three divs one after the other and use negative margins to pull the content up over the top div and do something similar for the bottom border.
Use z-index: http://www.jsfiddle.net/xPEY6/
(Per the CSS spec you don't actually need the .text div, you could set .top and .bottom to z-index: -1 and .container to z-index: 0, but I wouldn't rely on all browsers implementing that detail correctly.)
You can do this with positioning:
div.paperTexture {
position: absolute;
top: 0px;
bottom: 0px;
}
Also works well if you need the div to take up 100% of the viewport minus Xpx. Just set the top or bottom to Xpx.
Related
Let's assume the following html markup:
<div id="container">
<div id="inner"></div>
</div>
I would like the inner div to be centered in its parent (container) while if there is not enough space in the viewport, it should gradually go to negative left margin upto -XY px.
The situation is:
I have a container div that always has a plain background. In this div I have another div that has a ribbon as a background and contains the navigation. If the viewport is wide enough, I want to show everything (=from the inner div) centered on the page. So far no problem by setting margin: 0 auto to the inner. However, when the viewport is less than the ribbon's width, I would like to "cut off" the ribbon on the left side (logically, on the right it is automatic) to the point where it "bends", that's the point where the buttons of the navigation begin (169px from left). I have come up with this:
#container {
height: 240px;
position: relative;
background: url("../images/top_noise_bg.png") top left repeat #222;
margin-left: -169px;
margin-right: -169px;
}
The margin works as intended when the viewport is large enough. When it is too small, the left side works just right, however the negative right margin cuts the *top_noise* background off on the right side when I scroll there. Also it creates another undesired effect: the page will always have horizontal scrollbars. Any advices how to solve this? Thank you!
jsfiddle example -> resize the area to very small, then scroll to right of the red div.
I have simple HTML and CSS as following. I notice the bottom margin collapse between .outside box and .inside box. I don't understand why i can't see the background image when bottom margin collapse, background image should nothing about margin.
Thanks :)
<div class="outside">
<div class="inside"> content </div>
</div>
.outside {background:url(http://blurfun.com/temp/images/bottom.png) left bottom no-repeat; padding-top:1px;}
.inside { background:#00CCFF; margin:0 0 10px 0; padding:0 0 20px 0;}
You are experimenting vertical margin collapse between your nested divs
Include this overflow property (any value not equal to visible will do the job), and it will work ok
.outside {
background:#ff0000 url(http://blurfun.com/temp/images/bottom.png) left bottom no-repeat;
padding-top:1px;
overflow:hidden;
}
The red color was added only to test the result. Of course you can wiped.
Detailed comment
Your outside div uses a sort of yellow strip at its left bottom.
Your inside div has a bottom margin of 10 px and as there is nothing in between this margin and the outside div bottom margin. Thats why they are collapsing.
You could prevent this to happen including a bottom padding or even a bottom border to outside div. But this would change your design intentions.
That is why I suggested using the overflow property which also prevents the vertical margin collapse and does not interfere with your design.
In this fiddle I added a left margin to the inside div and a red background to the outside div.
For didactic porpouse I also included a transparent background to the inside div.
Vertical Margins collapsing
Prevented by overflow:hidden
Play with it. Delete the overflow property and watch vertical margins collapsing.
I hope is clear enough for you.
Have a good day and enjoy your coding :-)
I want to create a page with a horizontal centered content block that reaches from teh top to the bottom of the browser window. I already figured out that tables are not the right way to design a layout. A block that reaches from top to bottom is not the problem:
<div style="position:absolute;top:0px;width:800px;height:100%;background-color: #fff;">
</div>
But I'm not able to make this Div centered. I tried
"margin:auto"
But no effect. Th centers the text in the Div, but not the Div itself on th screen.
To center a div you need two things, a width, and automatic horizontal margins. Like this:
#myDiv {
width:800px; /* or whatever */
margin:0 auto;
}
There is no need for absolute positioning, just these two rules will do the trick.
to center an Absolutely Positioned div add left: 50%; margin-left: -400px;
where the negative margin value is half the width of the div
Try not to use position:absolute for layouts unless necessary. This sample shows best practice for horizontally centering your content.
If you need a solution that will continuously work to restrain the content area height within the viewable area, try my jQuery solution: http://jsfiddle.net/BumbleB2na/Z75hA/
i have a problem with the entire content of my page.
The problem being without a scrollbar present my content is about 20px to the right, but when a scrollbar is present it shifts to the left.
I have to compensate for this for an absolute postioned div by positioning it over the content by 20px until a scrollbar is present as it rests at the right hand side of the page.
This is a crappy fault on my behalf but i just want an easy way to fix this. Any quick and easy suggestions? Would i be better off making the main content div an absolute one?
One quick and dirty way is to always force the scrollbar to be visible with:
html { overflow-y: scroll; }
Not ideal, but it standardizes the appearance if the lack of scrollbar offset is breaking your design.
If I'm understanding your problem correctly, your absolute div is 20px off when a scrollbar is present? If that is the case what you can do is set a parent div that wraps around your content and absolute div.
Be sure to set this wrapper div to position: relative; so now your absolute div will be positioned inside the relative div instead of the document level. If there is a scrollbar, the wrapper div will be offset to the left by 20px (the width of the scrollbar) and the absolute div will also.
<div class="wrapper">
your content goes here
<div class="absoluteDiv"></div>
</div>
.wrapper { position: relative; }
.absoluteDiv { position: absolute; }
I don't think your content is actually shifting in any sort of buggy way; it's just that the presence of the scroll bar makes the viewport narrower. If you're using a layout that depends on viewport width (e.g. fluid layout, or fixed-width with centered content), this will cause everything to move by half the width of the scroll bar when it appears.
AFAIK, there's no sure-fire way to compensate for that, since the width of the scroll bar isn't known.
There are a lot of questions regarding side-by-side divs. I didn't miss those. But I need something that spans the whole width of the screen. This is the situation:
I need three divs positioned side-by-side. The left, middle, and right divs we'll call them. The middle div holds the header contents of the site and is a fixed width (800px). I want the left and right div to span the rest of the screen width on either side. So..
<-LEFT-> | MIDDLE | <- RIGHT ->
The reason I want to do it this way is because the middle (content holding) div has a backgrond that is a gradient. Let's say the left side of the gradient is white and the right side is black. I need the Left div to be white so it is a continuation and the Right div to be black. This way it looks like one fluid heading that spans the whole width of the screen.
Thanks.
A solution for this problem I once implemented was using 2 div elements, absolutely positioned, with the center div as an overlay. I have a working example here:
jsFiddle solution
This way, it doesn't matter how wide the screen is: The div's span 50% of your screen, and the middle part is behind the centered div.
Note that you might have to use a javascript workaround for the height-issues.
Do you want content in the left or right divs? If not, Simply stick with your one center div, give it a width and position it using margin: 0 auto; in your css. You can then set the background image of the body tag with an image (say 1px by 2400px) that is half white and half black.
If you want that effect just behind your header, then you could create a div the same height as the heading and give it the following css properties:
position: absolute;
width: 100%;
z-index: -1;
that way it should sit behind your container (middle) div.
You should consider having just one centered div and on the body put a background-image of 1px height and large enough width and centered. That image will have the left half white and the right one black.
Hope this helps, Alin
...WWWWW| DIV |BBBBB...
Anyway I don't think it's possible without using a table.
Usually floatting div are size-fixed and center div is fluid.