Is it possible to extend a background element in a div outside of the div frame?
And a follow-up question pertaining to a workaround I've found:
I've put an <img> in my HTML code positioned behind my main content. That displays the whole background image correctly, but there are scroll bars extending the full length of the image and the of course the image is selectable. Is there a way to remove the scroll bars and make that image non-selectable?
The reason I'm not putting the background image in the body style of the CSS is because I want the background to be attached to my content when the browser window is resized.
Try using an additional wrapper <div>, and set the background-image on that.
Question 1: No.
Question 2: Use the background-image property instead of <img>. You can place that in a containing <div> behind your content, or in the same box as your content. Using background-image will not give you any scrollbars.
"Is it possible to extend a background element in a div outside of the div frame"
You can give the illusion that it does simply by adjusting margin and padding values of 2 div's. It's pure CSS, the top div can grow as tall as you want it too. The bottom div has to be a set height. I have tested this on multiple browsers and haven't found any issues yet...
<div id="top" style="padding:0 0 300px 0; margin:0 auto -700px; background:red;" >
my top content which can grow in height as much as possible.<br /><br />
my top content which can grow in height as much as possible.<br /><br />
my top content which can grow in height as much as possible.<br /><br />
my top content which can grow in height as much as possible.<br /><br />
my top content which can grow in height as much as possible.<br /><br />
my top content which can grow in height as much as possible.<br /><br />
my top content which can grow in height as much as possible.<br /><br />
my top content which can grow in height as much as possible.<br /><br />
</div>
<div id="bottom" style="margin:400px 0 0; padding:0; height:300px;">
my bottom content at a set height - required!<br /><br />
</div>
Hope this helps! And here is an updated jsfiddle so that you can see what it looks like right away
Maybe you should try using that image background from CSS and then other elements will not auto resize?
I may not be seeing in my head exactly what you want... but there are CSS attributes to remove scrollbars from items, just use the overflow property and set it to hidden.
http://www.w3.org/TR/CSS2/visufx.html#overflow
If you are just trying to prevent scrollbars on the DIV that is. If you know the size of the image, or it's always going to be the same just set the DIV width and height to be the same as the image and it should display it all.
As far as I know there is no way to make the background content larger than the item displaying it.
You can put your background image outside of your division, but use CSS positioning to keep it in the right place when you resize the browser. A common solution is that the background position is set to center and so is the division, which keeps them in the same place.
Related
I'm using angular2-draggable module to resize div vertically. You can see this demo: https://xieziyu.github.io/angular2-draggable/#/resizable/default, in the Resizable Demo area.
What I wanted is, when resize the top div，the below div height decrease or increase, instead of move down. That is, this whole page height never change, just two div heights mutual adjustment. Is there anyone knowing how to do this?
You can easily achieve this with some simple css. Create a parent container that covers the full page, apply a flex-box style with column direction, and make the bottom element automatically resize to fit available space. e.g.
<div class="container" style="height:100%; display:flex; flex-direction:column">
<div ngResizable>
...
</div>
<div class="bottom-div style="flex:1">
...
</div>
</div>
</div>
I know there are numerous threads on this subject but I couldn't get any of the suggestions I found to work for me. Whether that's due to novice status or because the code wasn't suitable, I don't know. But I'm now pulling my hair our after trying to get the grey background behind the h2 tag "Attachments" and the two lines that follow it to expand to full width, removing the white spaces that are currently to the left and right of this div.
http://bit.ly/1OVprsc
One approach is to use negative margins and padding to extend the background in both directions.
margin: 0 -9999rem;
padding: 0.25rem 9999rem;
Your grey div is inside g-container div which have width that is not full one. So if you want to have that grey div full width u must change your structure into something like this:
<div class="g-container">
CONTENT
</div>
<div class="grey-div"></div>
<div class="g-container">
CONTENT
</div>
Or you can do it with position absolute but then none of the parent of the grey div shouldn`t be position relative so the grey div can be absolute relative to body.
I'm trying to write a piece of code that has a div with a certain width and height. That div also has a CSS animation, shrinking the div to nothing. However, the text wraps. I do not want the text inside to wrap. I will create a fiddle for a demonstration:
Link
I have attempted overflow: hidden, but the text still wraps eventually.
I apologize in advance if I'm missing something obvious, and thanks in advance.
Any Javascript solution (Unless it's adding classes or something) is not preferred, as CSS animations are much faster.
I just added another div inside the main div and placed the text inside of that and it seems to be doing what you want it to do.
<div id="bar">
<div style="width:250px; height:250px;">Good Day.
<br/>
<br/>I'm a DIV
<br/>
<br />
<br />
<br />
<br />
<br />
<br/>And I shouldn't move when animating.</div>
</div>
give that a shot. Text will always adjust to its' container, doing it like this places it inside of another container that remains the size you want it and because you have the overflow set to none on the outer container no scroll bar pops up when it shrinks smaller than the inner div.
Add white-space: nowrap; to #bar
Use the white-space CSS property and set the value to nowrap:
white-space: nowrap;
I have a page where I want an element to align right at the same time I have elements which may be wide and cause a horisontal scrollbar. For instance:
<body>
<div style="float:right">Stay right</div>
<div style="white-space:nowrap; clear:both; font-size:2em">
Wide child element which determines the width of the page.
</div>
</body>
This works fine if the wide element fits within the browser window. But if the browser window is too small so that a horisontal scrollbar appears the "stay right" element will align with the window and not the page:
If I move the scrollbar the "stay right" element moves and doesn't really align to anything.
If a add a table around the whole page it does what I wan't:
<body>
<table width="100%"><tr><td>
<div style="float:right">Stay right</div>
<div style="white-space:nowrap; clear:both; font-size:2em">
Wide child element which determines the width of the page.
</div>
</td></tr></table>
</body>
The "stay right" element will align with the right side of the wide child element regardless of browser window size.
Edit: The table based solution above will align right to largest of the width of the wide child element or the window width. Effectively this gives the page a "minimum width" which is determined by the contents of the page (ie. the wide child element). This is what I want - which isn't clear from the original text, sorry.
I am wondering if there is a better way than wrapping the entire page in a table.
That is a very interesting problem. It actually happens because the computed width on div matches the window size (and body size) instead of the width of the text. The floating text looks to it's container for a width/height when rendering (and because that computed value is actually size of the window, the float stops at the edge of the window).
This does not really occur often because most sites use something like grid960/foundation/etc and a min/max width are provided (you probably figured out that setting a width will fix your problem).
I don't know of a really good solution for dynamically sized text (with only css)... The only thing I can think of without using a table would be to use a clearfix. It is really used/created for element with floating children (in order to give them a correct width/height.. floating elements do not normally effect the containers dimensions) but it also will work in this case.
<body>
<div class="clearfix">
<div style="float:right">Stay right</div>
<div style="white-space:nowrap; clear:both; font-size:2em">
Wide child element which determines the width of the page.
</div>
</div>
</body>
EDIT: I lied, I came up with a second (better) way but it does require a more modern browser. It is to use a wrapper with a display: inline-block OR display: table. It really is just a sub-set of the clearfix but will work if you can get away with being IE8+ based.
<body>
<div style="display:inline-block">
<div style="float:right">Stay right</div>
<div style="white-space:nowrap; clear:both; font-size:2em">
Wide child element which determines the width of the page.
</div>
</div>
</body>
NEVER wrap an entire page in a table. It messes up your HTML since about the year 2000.
I think you want a fixed position for your div, it lines up the element with the window instead of the page:
.myDivThatFloatsRight {
position: fixed;
top: 10px;
right: 10px;
}
I am destroying my mind trying to get this styling done right. I have a fixed size image with an unpredictable height div of text to the right of it. I want the top of the text to line up with the top of the image but to NOT wrap around it. My markup is:
<img height='231px' width='132px' style='float:left' />
<div>Text</div>
I would like to find a solution that doesn't involve using a table, but at the moment I am drained and can't think about how to do it with css/divs
This should do the trick.
<div style="margin-left: 132px">Text</div>
To have space between the text and the image, make the margin larger or add a padding-left.
DanielB's answer nails it, but I just like giving alternative solutions; never know if it might come in handy. You could put the image and the div into a container with a fixed width, set a fixed width on the image and div that adds up to the container's width, and float the div as well.
<div id="container">
<img height='231px' width='123px' style='float:left' />
<div>Text</div>
</div>
#container div
{
float:left;
width: 123px;
}
#container {
width:246px;
}
http://jsfiddle.net/thomas4g/A7ZHg/3/