I am using this system to try to implement a sliding window selector.
I have a <div> that is contained in another <div>. The outer <div> has a fixed size and the inner one should expand to contain its contents.
<div style="width: 25px; overflow: hidden">
<div id="middle">
<div style="width: 50px"></div>
</div>
</div>
The outer <div> has a fixed size.
The middle <div> should expand to match the size of the inner <div> (the one that has width 50px)
How, using CSS or JavaScript can I ensure that the middle <div> is as wide as the inner <div>, but still gets cut off by the outer <div>?
I have tried to use JQuery to get the length of the inner <div> and then dynamically set the width of the middle <div>, but this does not consistently get the right length.
Div elements, by default, try to fit their container. so the middle one will try to fit its container which is the outer div.. it is not affected by content.
If you set the middle one to be display:inline-block you make it fit the contents instead of the container it that fixes the issue..
Can you make inner div float? That way it should display full width of the span but without editing outer div width to expand the content longer than outer div width will be invisible.
divs are block elements, so your inner div will naturally expand to the width of the containing div. You can ensure this by setting the style attribute of the inner div to 100%. You should also set its overflow CSS property to "hidden."
You can get the width of the content of any HTML object like this:
document.getElementById("myDIV").clientWidth
Use display: inline-block and max-width: ?px on middle. You'll want to put overflow-x: hidden on middle (not outer like in your code), but I left it off in the demo so you could see the width working.
Demo: http://jsfiddle.net/ThinkingStiff/hHDQS/
HTML:
<div class="outer">
<div class="middle">
<div id="inner1"></div>
</div>
</div>
<div class="outer">
<div class="middle">
<div id="inner2"></div>
</div>
</div>
CSS:
.outer {
border: 1px solid green;
height: 100px;
width: 300px;
}
.middle {
border: 1px solid red;
display: inline-block;
height: 75px;
max-width: 300px;
}
#inner1 {
border: 1px solid blue;
height: 50px;
width: 50px;
}
#inner2 {
border: 1px solid blue;
height: 50px;
width: 350px;
}
Output:
If the inner div can be absolutely positioned the following will stretch it to fill up the parent completely (width and height):
#myInner{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
width:auto;
height:auto;
}
Related
Is there a way of having one image (PNG or SVG) as a background for multiple divs? Please see the images below as to how it would work. Also when the screen width becomes smaller and the divs line up below each other, would there be a way of changing the background to match that aswell?
DIVs without background:
The background:
DIVs with background:
Using background-attachment: fixed will give you the desired effect. You just need to make sure your background image works within the bounds of the div or else you will get tiling which can be turned off with background-repeat: none
.border {
border: 1px solid #000;
position: absolute;
}
div {
background-image: url("https://dummyimage.com/500x250/000/fff.png");
background-attachment: fixed;
}
<div id="div1" class="border" style="height:100px;width:200px"></div>
<div id="div2" class="border" style="left:225px;height:100px;width:200px"></div>
<div id="div3" class="border" style="top: 125px;height:100px;width:225px"></div>
<div id="div4" class="border" style="left:250px;top:125px;height:100px;width:175px"></div>
You might be looking for background-attachment: fixed:
If a background-image is specified, the background-attachment CSS
property determines whether that image's position is fixed within the
viewport, or scrolls along with its containing block.
.container {
background-color: gray;
}
.window {
background-image: url("https://i.stack.imgur.com/RPBBs.jpg");
background-attachment: fixed;
display: inline-block;
}
<div class="container">
<div class="window" style="width: 100px; height: 50px; margin: 20px;"></div>
<div class="window" style="width: 200px; height: 50px; margin: 20px;"></div>
<div class="window" style="width: 500px; height: 50px; margin: 20px;"></div>
</div>
How's it going? I'm still relatively new to HTML and CSS, but I think we can tackle this one together!
Your "WHOLE" picture might exist in a that contains the other "WINDOW" elements...where each of the window elements is positioned relative to the parent div that contains the whole picture
.whole{
position:relative;
}
.UpperL{
position: absolute;
height: 25px;
width: 100px;
}
.UpperR{
position:...;
}
.LowerL{
position:...;
}
.LowerR{
position:...;
}
<div class="whole" img src="whole picture.png">
<!-- let the whole class contain the background image-->
<div class="UpperL"> Upper Left Window</div>
<div class="UpperR"> Upper Left Window</div>
<div class="LowerL"> Upper Left Window</div>
<div class="LowerR"> Upper Left Window</div>
</div>
The code doesn't run well yet, but the point of setting four windows inside of a fifth window is to give the four an ability or property to see through the fifth;
If your parent contains the image, but is still colored all white (opacity at 100%), the four window elements should be able to see through the opacity of the fifth window (turning their opacity down to reveal the image).
hmm...
I have a single container div with two child div's. The container div is 100% width. The child div's are left floated. The left div's width is not set because it's contents must decide it's width. The right div's width must be 100% minus the width of the left div.
HTML:
<div class="container">
<div class="message-name"><p>User :</p></div>
<div class="message-msg"><p>Some message</p></div>
</div>
<div class="container">
<div class="message-name"><p>User : </p></div>
<div class="message-msg"><p>Some really long message that breaks to new line because it is too long to stay on this line. mmmm mmmmmmmmmmmmm mmmmmmmmmmmmm mmmmmmmmmmm mmmmmmmmmm mmmmmmmmm mmmmmmmmm mmmmmmmmmm mmmmmmmmmm mmmmmmmmm mmmmmmmm</p></div>
</div>
CSS:
*{margin:0;pading:0;}
.container{
width:100%;
min-height: 20px;
overflow: auto;
}
.message-name{
height: 20px;
text-align: left;
float: left;
border: 1px solid red;
}
.message-msg{
border: 1px solid red;
min-height: 20px;
float: left;
}
This is my attempt at using JQuery to dynamically set the width of the right div when it is added to the page dynamically:
$(document).ready( function(){
var nameWidth = $(".message-name").last().width();
alert(nameWidth);
$(".message-msg").last().css("width","100%").width($(".message-msg").last() - nameWidth);
});
But it doesn't change anything.
How can I get the width of the left div and then subtract that from the width of the right div to ensure the right div does not break to a new line?
Here is a JSFiddle of my attempt.
Use flexbox, it's support is wide enough for most reasonable purposes.
No scripting required, much more FLEXible!
* {
margin:0;
padding:0;
}
.container {
width:100%;
min-height: 20px;
overflow: auto;
display: flex;
flex-direction: row;
}
.message-name {
height: 20px;
text-align: left;
border: 1px solid red;
flex-shrink: 0;
}
.message-msg {
border: 1px solid red;
min-height: 20px;
flex-grow: 1;
flex-shrink: 1;
}
<div class="container">
<div class="message-name"><p>User :</p></div>
<div class="message-msg"><p>Some message</p></div>
</div>
<div class="container">
<div class="message-name"><p>User : </p></div>
<div class="message-msg"><p>Some really long message that breaks to new line because it is too long to stay on this line. mmmm mmmmmmmmmmmmm mmmmmmmmmmmmm mmmmmmmmmmm mmmmmmmmmm mmmmmmmmm mmmmmmmmm mmmmmmmmmm mmmmmmmmmm mmmmmmmmm mmmmmmmm</p></div>
</div>
Also on JSFiddle
A more efficient way to use flexbox is to just declare the .message-msg block to be flex: https://jsfiddle.net/84vocLbk/. It'll be situated horizontally next to the .message-name and stretch the available width.
CSS:
.message-msg {
border: 1px solid red;
min-height: 20px;
display: flex;
}
Please try this
$(".message-msg").last().width($(".message-msg").last().width() - nameWidth);
Border 2px for each div is present. If you want to place it to the left then try this
$(".message-msg").last().width($(".message-msg").last().width()-2 - nameWidth-2);
DEMO without removing border
DEMO after removing the border
Add this
$(".message-msg").last().css("width","100%").width($(".message-msg").last().width() - nameWidth);
In thaat line you're setting the width to 100% then changing that width to 100% minus the variable nameWidth You have to get width of last div to do calculations
You can achieve this with CSS.
fiddle: https://jsfiddle.net/zof15z6c/7/
This works by setting the overflow of the second div to hidden or auto. if your content is just a text I suggest setting it to hidden since the text would just wrap around.
Changes to the css
.message-msg{
border: 1px solid red;
min-height: 20px;
overflow:hidden;
}
Advantages:
Works on most browsers (tested in IE7)
The browser takes care of window resizes
Cleaner code
Disadvantages
Overflow should either be hidden or auto. This will not be an issue for you since you just have text.
I want to overlay the background image of a parent div over the content of its children.
What I have in essence is simple:
<div> <!-- has BGImage -->
<div>
<div>
<iframe /> <!-- serves content that needs to be interacted with -->
</div>
</div>
</div>
The top parent div has a background image (a silhouette of an ipad) and the content in the iframe is a page serving JQuery Mobile content (it is a mobile preview). I can't have another parent div with absolute positioning using z-index because the content in the iframe must remain fully usable and click-able.
The reason I need this is that the inside edge of the tablet silhouette has a transparent inner border, I need this to soften the edges of the served iframe content.
I hope this is achievable, I put the JavaScript and JQuery tags in the question because I am not shy to using if they need to be, but as always, if I can complete this using CSS then I am all for that.
Mock up JS fiddle basically showing what I have: http://jsfiddle.net/fQ22A/1/
The following image is where I am wanting to go based on the JSFiddle above:
Not the way you wanted but your purpose is solved here. http://jsfiddle.net/fQ22A/5/
Full Screen: http://jsfiddle.net/fQ22A/5/embedded/result/
HTML:
<div id="finalCont2">
<div id="insidewrapper2">
<div id="outsidewrapper2">
<div class="fullheight2">
<iframe id="template_preview_iframe" src="http://www.w3schools.com" width="770" height="1024"></iframe>
</div>
</div>
</div>
</div>
CSS:
#insidewrapper2{
background-image:url("http://desktop.ly/images/devices/ipad_mini_black.png");
background-repeat: no-repeat;
display: block;
height: 1289px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
width: 870px;
}
#outsidewrapper2{
position: relative;
}
.fullheight2{
padding-top:133px;
}
#template_preview_iframe{
overflow:hidden;
display:block;
border:none;
margin:0 auto;
}
You can't do that.
...but you can get something close to what I guess your want using a box-shadow inner.
EDIT:
body{border:none;box-shadow: inset 0 0 10px #000;}
http://jsfiddle.net/rwA2f/1/
This could be something closer to what you are actually after:
Demo: http://jsfiddle.net/abhitalks/ZVEug/2/
Full Screen: http://jsfiddle.net/abhitalks/ZVEug/2/embedded/result/
You need to position the iframe inside your div using positioning. Here is a simple markup to give you the idea:
HTML:
<div class="outer">
<iframe src="..." />
</div>
CSS:
div.outer {
width: 320px;
height: 320px;
background: url('...') no-repeat top left;
background-size: 100%;
position: relative;
}
iframe {
border: none;
width: 250px;
height: 220px;
position: absolute;
top: 48px; left: 32px;
border-radius: 10px;
box-shadow: 0 0 30px #fff;
opacity: 0.6;
}
The trick is to use a combination of box-shadow with opacity to give the illusion of soft edges and also meets your requirement of the background peeping through at the same time the iframe contents are usable.
Please notice how the background's reflection (diagonal glass reflection) is visible through the iframe contents.
I have this html structure.
<div id="parent">
<div class="child">
<h1>title</h1>
<p>content</p>
</div>
<div class="child">
<h1>title</h1>
<p>content</p>
</div>
<div class="child">
<h1>title</h1>
<p>content</p>
</div>
</div>
and a css for those elements.
#parent{
padding: 0px 8px;
overflow: auto;
max-width: 100%;
max-height: 100%;
}
.child{
width: 300px;
display: block;
}
.child:first-child{
float: left;
}
.child:last-child{
float: right;
}
.child:nth-child(2){
/* what is the style here to make it center? */
}
as you can see from above codes, the objective is to make those child elements align correctly in a neat and clean way so the first child element is floated left, the last child element is floated right and the second child element should be exactly on between those left and right child elements so what im trying to achieve is a three box that align on a equal patern inside a parent div. So far I tried margin: 0 auto; on the middle child element but unfortunately does not work so currently Im looking for a precise solution to achieve my desired output.
Just float it:
#parent{
padding: 0px 8px;
overflow: auto;
max-height: 100%;
float:left;
width:900px;
}
.child{
width: 300px;
display: block;
float:right;
}
here's a fiddle
Float your second div to the left and apply a margin left if needed. If you are trying to create a responsive template, simply use % instead of pixels. I hope that makes sense.
.child:first-child, .child:nth-child(2) {
float:left;
}
.child:nth-child(2) {
/* what is the style here to make it center? */
margin-left: what ever pixels or %;
}
.child:last-child {
float:right;
}
JSFIDDLE (Responsive):
http://jsfiddle.net/83Gg2/
You don't need to float the elements one to other, what you need, is to use display: inline-block property on them, is an hacky but an cleaner approach:
#parent{
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
overflow: hidden;
}
.child{
width: 33%; // Since there are 3 childs.
display: inline-block;
}
The trick and hack here is that you need to comment the space between the child elements in your HTML code, since the property display:inline-block only align elements that have not space between them, so your html code should look like this:
<div id="parent">
<div class="child">
<h1>title</h1>
<p>content</p>
</div><!--
--><div class="child">
<h1>title</h1>
<p>content</p>
</div><!--
--><div class="child">
<h1>title</h1>
<p>content</p>
</div>
</div>
~
This is the link to the JsFiddle Check it out
~
~
Flexbox makes this trivial:
#parent {
display: flex;
}
.child {
flex: 1;
}
Add prefixes and older syntax as necessary, conforming to http://caniuse.com/#search=flexbox
I whipped up an example for you: http://codepen.io/anon/pen/tribL
Ok, since you tag jquery also, here is the JQ way.
If you dont want to set fix width to #parent and you want a fix width to .child, use this. Also works in cross browsers and old browsers.
DEMO http://jsfiddle.net/yeyene/VW9mw/
$(document).ready(function(){
moveCenter();
$(window).resize(function() {
moveCenter();
});
});
function moveCenter(){
var mar = ($('#parent').width()-$('.child').width()*3)/2;
$('.child').eq(1).css({
'margin-left': mar+'px',
'margin-right':mar+'px'
});
}
I would like to have two columns with separator border.
The task is quite simple when the columns have the same height.
But, if the heights of columns are different, and you don't know a priori which is the higher column, (and I don't want to use fixed value) how can I solve the problem?
The background color is the same.
A pure css solution is the best. If not possible, also a JavaScript code is acceptable.
Click here for the current example.
You can set the display of the container to table and the left and right columns to table-cell
#container {
display: table;
width: 100%;
}
#content-left {
border-right: 4px dotted #000;
width: 50%;
display: table-cell;
margin-right: -4px;
}
#content-right {
width: 50%;
display: table-cell;
}
Then you just need to wrap the left and right columns in the container and you have it.
<div id="wrapper">
<div id="container">
<div id="content-left">left</div>
<div id="content-right">right<br />right<br />right</div>
</div>
<div id="footer">
footer content
</div>
</div>
Look Here
One css method is to use a repeating background image for the dotted line - this repeat goes on a div surrounding the 2 columns, like so:
http://jsfiddle.net/P5Z9s/ (obviously you'd get a better image, I just pulled this from google)
Or using jQuery, you can do something like:
http://jsfiddle.net/ntWRY/ (you basically add the same class to the columns you want to equalize, and then call the function on that class)
I suggest you read about faux columns.
If you can't afford the time (not that much, but...), then using JS you could simply check which is higher and set the other's min-height to that.
I think this would work as you want it. But I suggest you learn about the faux columns instead.
Perhaps something like this is what you are looking for:
http://jsfiddle.net/euYTQ/40/
HTML:
<div class="container">
<div class="left">section left</div>
<div class="right">section right<br>other row</div>
<div class="footer">section footer</div>
</div>
CSS:
div.container {
position:absolute;
background:#eee;
margin: 0 auto;
width: 750px;
height:100%;
}
.left{
position:absolute;
left:0px;
top:0px;
bottom:50px;
width:48%;
border-right-style:dotted;
}
.right {
position:absolute;
right:0px;
top:0px;
bottom:50px;
width:48%;
border-right-style:dotted;
}
.footer {
position:absolute;
background: none repeat scroll 0 0;
bottom: 0px;
height:50px;
left:0px;
right:0px;
border-top-style:dotted;
}