I have an element container, which must remain static. Inside it lies fix, which I need to be fixed when container overflows and I scroll in it.
Example:
<div id="container" style="width: 850px; height: 200px; position: static;">
<div id="fix"></div>
<div id="otherStuff" style="width: 2000px;"></div>
</div>
Can I do this with CSS?
You can put the content you want to overflow in an element with overflow-x: scroll, and the #fix element will stay where it is.
.overflow {
overflow-x: scroll;
}
<div id="container" style="width: 850px; height: 200px; position: static;">
<div id="fix">fix</div>
<div class="overflow">
<div id="otherStuff" style="width: 2000px;">otherstuff</div>
</div>
</div>
Related
I have no idea why this is such a struggle. I want to place an image inside a container. That image should be responsive, meaning when the column gets smaller in width, the image should also get smaller. It does that now, but it maintains the height, meaning it will look stretched.
https://codepen.io/anon/pen/vmZKyM
<div class="container-fluid">
<div class="col-md-8 offset-md-2">
<div class="row">
<div class="col-md-4 offset-md-2">
<div class="row">
<p>Left column</p>
<img src="http://placehold.it/600x400" />
</div>
</div>
<div class="col-md-5 offset-md-1">
<div class="row">
<p>Right column</p>
<img src="http://placehold.it/700x400" />
</div>
</div>
</div>
</div>
</div>
I do not know the aspect ratio of the image (in this case I do), so I cannot achieve this with the padding-bottom trick (normally used for images).
How can I achieve this?
change max-width: 100%; to width: 100%; also change height: auto; to height: 100%;
If the container should have a fixed height, then give it an ID (or a class) and change the .img-responsive restrictions the other way around eg
.container {
height: 600px;
}
/*And then change */
.container .img-responsive {
display: block;
height: auto;
max-width: 100%;
}
/*To */
.container .img-responsive {
display: block;
width: auto;
max-height: 100%;
}
Not sure how it will work with a mix of orientations but if they are floated it shouldnt really matter
I am having some issues positioning an image within a parent div. I have 2 divs side by side both within a parent div, the first div within the container contains text and the second contains an image. The parent container has no height specified so it adjusts to the height of the content contained within it. I am struggling to absolutely position the image in the 2nd div to the bottom. Below is my HTML and css...
<style>
.container{
width: 100%;
}
.box{
float: left;
width: 49%;
}
</style>
<div class="container">
<div class="box text">
<p>Text placed here</p>
</div>
<div class="box image">
<img src="xxx" />
</div>
</div>
I have tried to give .image a relative position and then give the img tag within it 'position: absolute: bottom: 0px;' however this does not seem to work as .image has no fixed height.
Thanks, any help would be appriciated.
That should do the work. In fact, your container has no height at all with 2 floated div inside of it. I use a clear:both to... clear the floats and give the container the proper height.
<style>
.container{
width: 100%;
position: relative;
}
.box{
float: left;
width: 49%;
}
.image img {
position: absolute;
bottom: 0;
right: 0;
}
.clear { clear: both; }
</style>
<div class="container">
<div class="box text">
<p>Text placed here</p>
</div>
<div class="box image">
<img src="xxx" />
</div>
<div class="clear"></div>
</div>
You can find more infos about floats and clear on this nice article on css-tricks.com
Below I have some HTML code. Everything is positioned relative apart from contentRow which is positioned absolutely. This is making the footer stick to where the browser window ends and not where the scroll bar ends.
Is there any way I can make the footer go down to the very bottom where the scroll bar ends.
<div id="s4-workspace" style="width: 1920px; height: 748px; overflow:scroll">
<div id="s4-bodyContainer" style="position:relative">
<div class="headerSection" style="position:relative">
<div class="globalHeader">
</div>
</div>
<div>
<div id="contentRow" style="position:relative">
<div class="fixedWidthMain" style="position:relative">
<div class="fixedWidthMain" style="position:absolute">
</div>
</div>
</div>
</div>
</div>
<!--PAGE FOOTER SECTION-->
<div class="pageFooterSection" style="clear: both;position:relative">
</div>
</div>
Theres a few available flavours of the solution for this but they basically go something like this.
EXAMPLE
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
a point to remember is that height of elements in html are always passed through the parent. so if you dont define height 100% on a parent the child won't know either. Good luck and let me know if you have any other issues :)
SOURCE
http://mystrd.at/modern-clean-css-sticky-footer/
If I'm understanding correctly, you could make s4-bodyContainer position:relative so that the contentRow is only positioned absolutely within that container. Then footer would go below the bodyContainer.
I have a fixed container and inside of that is an additional container which houses a number of DIVs based on user choices. I need these additional DIVs to line up horizontally and provide horizontal scrolling (but not vertical scrolling).
Such as this:
[x] [x] [x]
Essentially, my setup looks like this:
<div id="container">
<div id="second">
<div class="final"><img src="..." /></div> //Repeat as needed from user
</div>
</div>
The CSS breaks down as such:
#container {
position: fixed;
top: 200px;
left: 0px;
height: 500px;
width: 100%;
}
#second {
height: 500px;
}
#final {
display: inline-block;
float: left;
}
This setup works fine in Firefox however it continues to break in IE7. All of the "#final" divs are stacking vertically:
[x]
[x]
[x]
Any suggestions on how to fix this?
Several problems here. For a start:
<div id="container">
<div id="second">
<div class="final"><img src="..." /></div> //Repeat as needed from user
<div style="clear:both"></div>
</div>
</div>
You should have a DIV after your floats that remains constant, telling your browser not to float any subsequent elements (clear:both).
And you have several "final" DIVs, so they be in a CSS class, not an ID.
.final {
float: left;
}
That should do it!
Edit: That will fix your HTML/CSS errors, at least. But I've just noticed that you want the document to scroll right. The only way to do that is to set the width of the #container div to be wider than the sum of all the widths of the .final divs. Otherwise your browser will attempt to push everything "down".
Try this......
<div id="container">
<div id="second">
<div class="final"><img src="..." /></div>
<div class="final"><img src="..." /></div>
<div class="final"><img src="..." /></div>
<div class="final"><img src="..." /></div>
</div>
</div>
<style>
#container {
position: fixed;
top: 200px;
left: 0px;
height: 500px;
width: 100%;
}
#second {
height: 500px;
}
.final {
float: left;
}
I have following HTML+CSS markup:
<div id="protofade" style="position: relative;">
<div style="position: absolute;"><img src="slide-01.jpg"></div>
<div style="position: absolute;"><img src="slide-02.jpg"></div>
<div style="position: absolute;"><img src="slide-03.jpg"></div>
</div>
Notice that the slides are absolute-positioned inside a relative-positioned element so that the top-left corners of all slides are aligned together. All slides are equal height, but the height is not pre-determined hence this problem: the "protofade" div does not have a height. Is there any CSS trick that can make this div as tall as the first slide without explicitly specifying height: NNpx.
<div id="protofade" style="position: relative;">
<div style="position: absolute;"><div style="width: 200px; height: 50px; background: #F66;"></div></div>
<div style="position: absolute;"><div style="width: 200px; height: 50px; background: #6F6;"></div></div>
<div style="position: absolute;"><div style="width: 200px; height: 50px; background: #66F;"></div></div>
<div style="visibility:hidden;"><div style="width: 200px; height: 50px; background: red;"> This should be a second copy of slide one </div></div>
</div>
The above code shows your original code (except with divs, as per Scott Brown, above), with the addition of a second copy of "slide 1", positioned with the default algorithm, but with its box hidden. Accordingly, it's container, protofade, has to be large enough to accomomdate the box, even though the box is not displayed.
There is a jQuery answer to this. I don't believe this can be done through CSS as you need to be able to get the height of the first div.
I've illustrated it here: http://jsfiddle.net/thewebdes/FHgz5/
For reference, here's a run down of the code:
HTML
<!--
using DIVs in place of IMGs
setting height to these DIVs, all equal as specified
-->
<div id="protofade" style="position: relative;">
<div style="position: absolute;"><div style="width: 200px; height: 50px; background: #F66;"></div></div>
<div style="position: absolute;"><div style="width: 200px; height: 50px; background: #6F6;"></div></div>
<div style="position: absolute;"><div style="width: 200px; height: 50px; background: #66F;"></div></div>
</div>
CSS
/* border set to show height given to DIV */
#protofade { border: 5px solid #000; }
JS
// CSS height set based on the height of the first DIV
// First DIV chosen as all heights will be the same anyway so it shouldn't matter.
$('#protofade').css("height", $('#protofade div:eq(1)').height());