I'm using a 2-column div layout where the widths of both the left and right columns is non-deterministic. The left column div holds an image. The right column div holds a header div and a text content div below it. The width of the left column image takes precedence over the right column, and the right column gets the scraps in terms of width. Both of these columns are inside a div container, which has a fixed height (and width, but that doesn't matter). This layout is working using the following code:
.container {
height: 200px;
border: 1px solid black;
overflow: hidden;
}
.left {
float: left;
}
.right {
overflow: hidden;
}
.scrollable-content-header {
font-size: 25px;
border-bottom: 1px solid black;
}
.scrollable-content {
font-size: 18px;
overflow: auto;
}
The text content div should be scrollable if it overflows the container height. But I can't get the scrollbar to appear on the .scrollable-content element. Here's some HTML:
<div class="container">
<div class="left">
<img id="image" src="http://www.webresourcesdepot.com/wp-content/uploads/image/css-icon.png"/>
</div>
<div class="right">
<div class="scrollable-content-header">Lorem Ipsum</div>
<div class="scrollable-content">
Lorem ipsum dolor sit amet, consectetur... etc.
</div>
</div>
</div>
If the container element has overflow: auto instead of hidden, then a scrollbar will appear. But it will allow scrolling of the entire container. I don't want that, only the .scrollable-content should be scrollable, not including the header. I'm assuming that the overflow: hidden trick on the right column div in order to achieve the fluid width effect is causing problems.
Here's a fiddle: http://jsfiddle.net/PJdNW/
Any help is appreciated.
UPDATE
From what I understand, CSS cannot figure out what the height of the scrollable-content needs to be, so in order for the scrollbar to work and be the correct height, the pixel height of the scrollable-content needs to be set.
In my case, the height of the overall container is dynamic, so I opted for a JS solution, which gets the height of the overall container and subtracts the height of the scrollable-content header in order to get the pixel value I need for the scrollable-content (plus some fine-tuning i.e. margins).
I'll leave this question open for the moment in the hopes that I'm wrong and CSS is up to the task.
You have to set the height of your container, otherwise the container will automatically resize to the content length. Also, set the overflow attribute to scroll. Fix below:
.container {
height: 200px;
border: 1px solid black;
overflow: hidden;
}
.left {
float: left;
}
.right {
overflow: hidden;
}
.scrollable-content-header {
font-size: 25px;
border-bottom: 1px solid black;
}
.scrollable-content {
font-size: 18px;
overflow: scroll;
height:200px;
}
Updated fiddle: http://jsfiddle.net/hdrenollet/PJdNW/1/
Related
If I use overflow-y = scroll; property, the texts are scrolled vertically as usual. But again If I use overflow-x = scroll; property, I see in the browser that the box shows the left and right arrow. Well, but I can't scroll left or right dimension or more specifically to say horizontally. The text still scrolled vertically. Why the text isn't scrolled horizontally in this case???
/* Here is the example of overflow property */
.box {
height: 100px;
width: 200px;
border: 4px solid green;
overflow-x: scroll;
}
.box {
height: 100px;
width: 200px;
border: 4px solid green;
overflow-y: scroll;
}
From the MDN docs,
The overflow-x CSS property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content.
In your example, the content is NOT overflowing the edges and simple wrapping to the next line. This is because you probably have simple text in your container and the normal value for word-wrap property for text is normal (which "Break words only at allowed break points"). So the text just wraps.
If, for example, you had a div inside that was exceeding the width of this container - then your overflow property would kick in. Alternatively, if your text inside was a single continuous string with no spaces (hence not allowed to wrap with normal) with a width greater than the width the parent, the scrollbar would be visible.
I added some examples below to demonstrate this:
.box {
border: 1px solid black;
height: 200px;
width: 100px;
margin: 10px;
font-family: sans-serif;
display: inline-block;
}
.long-box {
width: 300px;
}
.scroll-x {
overflow-x: scroll;
}
.word-wrap {
word-wrap: break-word;
}
<!--
Doesnot scroll,
width adheres to left/right edges
-->
<div class='box scroll-x'>
<b>Will not scroll</b>
Scroll X with content less than width
</div>
<!--
Will not scroll,
because of the really long word,
and since `word-wrap` by default is `normal` so the content overflows
-->
<div class='box scroll-x'>
<b>Will scroll</b>
Scroll X with content greater than width
LoremipsumLoreLoremipsumLoremLoremipsumLoremLoremipsumLorem
</div>
<!--
Will not scroll
because this now has `word-wrap` set to `break-word`-->
<div class='box scroll-x word-wrap'>
<b>Will not scroll</b>
Scroll X with content greater than width but with word wrap
LoremipsumLoreLoremipsumLoremLoremipsumLoremLoremipsumLorem
</div>
<!--
Will scroll,
because of the div inside,
that is 300px, i.e > width of box (200px)
-->
<div class='box scroll-x'>
<b>Will scroll</b>
Scroll X with content (long-box) greater width
<div class='long-box'>...</div>
</div>
try this.
.yourclass {
overflow-y: auto;
}
.yourclass {
overflow-x: auto;
}
I have a modal window which displays a form. The user has the ability to click a button to add new rows to the form. As each new row is appended, the entire modal window should grow in height until it's 50px away from the bottom of the viewport.
Sample markup from the demo:
<div class="parent">
<h4>window title</h4>
add new row
<section>
<h4>content</h4>
<p>some random content which never scrolls</p>
<ul><li></li></ul>
</section>
</div>
I'm essentially using a div with absolute positioning to contain the modal window. As the window grows it will eventually hit this height and I could then overflow-y: scroll the contents.
The trouble is, only the form itself should scroll. As each new row is added, the window should grow in height until it reaches its parents' height. At this point, only the ul contents should scroll - not the entire modal.
I realize this can be done with javascript, but I'm hoping to find a pure css solution so that can avoid DOM-specific logic in our app, and having to account for viewport resize events, etc.
overflow-y only works when there's a max-height for the container. I can't set that for the list because I don't know what it will be.
I could make the height dynamic for the list with absolute positioning, but then the parent window loses it's height and never adjusts when the child does.
http://jsbin.com/wanipiw/1/edit?html,css,js,output
If the height of your parent content and the height of your section content before the ul is consistent and will not be dynamic based on content, you can use a max-height: calc(100vh - valuePx) to allow the ul to be scrollable. I have also include a margin: 0 to your ul css.
See JSFiddle
$(function() {
var ul = $('ul');
$('a').on('click', function() {
ul.append('<li></li>');
return false;
});
})
.parent {
position: fixed;
bottom: 56px;
overflow-y: hidden;
top: 56px;
/* demo only */
border: 1px solid red;
left: 50%;
margin-left: -100px;
width: 200px;
}
section {
border: 1px solid blue;
min-height: 300px;
}
ul {
padding: 0;
max-height: calc(100vh - 341px);
overflow-y: auto;
margin: 0;
}
li {
background: #ccc;
height: 50px;
margin-top: 10px;
}
li {
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<h4>window title</h4>
add new row
<section>
<h4>content</h4>
<p>some random content which never scrolls. the list below should scroll when the section reaches the max height</p>
<ul>
<li></li>
</ul>
</section>
</div>
So I'm attempting to create this effect where when the window is pulled big enough two divs align side by side but when made smaller the divs stack above each other and centred neatly.
So far I have this view.
The CSS for the DIV wrapping the image is:
div.pararight {
width:451px;
height:272px;
margin:0px auto;
position:relative;}
Titled 'Pararight' because when the screen is this wide the divs should sit by side with the image on right.
The CSS for the DIV wrapping the text is:
div.paraleft {
width:480px;
margin:0px auto;
position:relative;}
Named 'paraleft' as the text will align to the left.
It's also important to mention. I think, these 2 DIVs are wrapped in another DIV which is:
div.hitterbox {
width:100%;
margin: 0px auto;
font-family: sans-serif;
font-size: 13pt;
line-height:18pt}
Mainly because there will be multiple of these hitterbox div's down the page and it was easier to copy paste and change the HTML content, don't need to explain that though I'm asking for your help!
Finally another piece of information is that the container holding the hitterbox is another DIV which has the CSS:
div.pagecontent {
padding:10px;
font-family: sans-serif;
font-size:12pt;
position:static;
text-align:center;}
Finally the HTML for it all:
<div class="pagecontent">
<div class="hitterbox">
<div class="pararight"><img src="images/Macbook.png" width="451" height="272" alt="Mac Book"/></div>
<div class="paraleft">The Onscreen Text</div>
</div>
</div>
</div>
I put pararight above paraleft so it aligns up and down that way as you can see. The white page container of all the DIVs mentioned below is 1200px wide at the moment so enough room to sit both of these guys side by side.
What would I need to to make the text DIV move to the side of the image and the image to the right. I have used float:left, float:right in the respective DIVs but then when its shrunk down to create the stack effect they are shifted right and left respectively until the user shrinks the page down to 480px when the text will be centred but the image will still float slightly right.
What have I done wrong here? :o
I would use display: inline-block, then add text-align: center in the parent element.
JSFiddle: http://jsfiddle.net/gW8r2/1
.parent {
width: 100%;
height: 100%;
border: 1px solid green;
text-align: center;
}
.parent > div {
display: inline-block;
}
.a {
width: 100px;
height: 100px;
background: red;
}
.b {
width: 200px;
height: 100px;
background: blue;
}
This is a generalized solution. In your case, .parent would be .hitterbox, .a would be .paraleft, and .b would be .pararight.
So yet another question about vertically aligning an image within a div, but I think mine is different than the others I've found on here. I can't seem to find a solution that works for my situation.
I have a DIV that is 100% width (to it's container, which is floating left and has a set pixel width) and has a set pixel height. I have an image inside that I am positioning absolute to get it to the background of content within the DIV. The image is fluid with a width of 100%.
All works well, but I want to get the image to vertically align to the middle of the container and height is unknown.
Here is some sample code that shows what I'm trying to do:
<div class="container">
<div class="image-wrapper">
<img src="http://farm5.staticflickr.com/4111/4968056789_d872094672_o.jpg"
width="100%" />
</div>
<p>Some text</p>
</div>
And some sample CSS:
.container {
width:100%;
margin-top:10px;
height:100px;
overflow:hidden;
}
.image-wrapper {
position: relative;
}
.image-wrapper > img {
position: absolute;
z-index: -1;
}
p {
text-align: center;
padding-top: 10px;
color:#fff;
font-weight: bold;
}
But the flower should show up with it's center visible within the container div.
Any thoughts? I'm trying to avoid any Javascript sizing (the outer container, not shown in this sample, is already being sized). I'm not opposed to more DIVs, tables.. whatever you got!
A jsFiddle to demo this:
http://jsfiddle.net/JonMcL/sNz9h/
Why not go for the background-image property? That allows vertical centering...
http://jsfiddle.net/urrWS/
Assuming you want to only scale the image down and not stretch it beyond its native resolution this should do the trick. A little bit of jQuery is involved but it's minimal. Essentially, this adjusts the top-margin of the IMG on the window.resize event.
HTML
<div id="container">
<img id="image" src="image.jpg"> <!-- native size is 480x300 -->
</div>
CSS
#container {
margin: auto;
width: 80%;
height: 300px;
border: 1px solid gray;
}
#image {
display: block;
width: 100%;
max-width: 480px;
margin: auto;
}
jQuery
function adjustImage() {
$("#image").css('margin-top', ($("#container").height() - $("#image").height()) / 2);
}
$(window).load(function() {
adjustImage();
$(window).resize(function() {
adjustImage();
});
});
If I get what you need I would suggest setting the background image via css, then you can set the position correctly etc.
.container {
width:100%;
margin-top:10px;
background-image:url("http://farm5.staticflickr.com/4111/4968056789_d872094672_o.jpg");
background-repeat:no-repeat;
background-position:left center;
height:100px;
overflow:hidden;
}
http://jsfiddle.net/sNz9h/6/
I have a CSS element, with a border around it, that could have one or multiple boxes in it, so the width of the entire div changes depending on how many boxes are present inside of it. However, I want this whole div to be centered on the screen.
Usually, to center things, I just use:
margin-left: auto;
margin-right: auto;
But, this time, I have to either float the element or make it inline-block so the size of the div will be resized to the content, and if I do that, the margin-left and margin-right auto does not work, it always just stays on the left side of the screen.
Currently I have:
#boxContainer {
display:inline-block;
clear:both;
border:thick dotted #060;
margin: 0px auto 10px auto;
}
I also tried with float: left instead of display: inline-block.
Does anyone know of a good way to both center a div and allow it to be resized to content simultaneously? Any help would be greatly appreciated.
Have you tried keeping it inline-block, and putting it inside a block-level element that’s set to text-align: center?
E.g.
HTML
<div id="boxContainerContainer">
<div id="boxContainer">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</div>
</div>
CSS
#boxContainerContainer {
background: #fdd;
text-align: center;
}
#boxContainer {
display:inline-block;
border:thick dotted #060;
margin: 0px auto 10px auto;
text-align: left;
}
#box1,
#box2,
#box3 {
width: 50px;
height: 50px;
background: #999;
display: inline-block;
}
Seems to work as you describe: http://jsfiddle.net/pauldwaite/pYaKB/
Unfortunately, this cannot be achieved through CSS solely I don't think. You could always use JavaScript to center the div once you know its width (i.e. after the boxes have been appended) for example:
$(document).ready(function() {
var itemWidth = $('#boxContainer').width();
var availWidth = $(screen).width();
var difference = availWidth - itemWidth;
$('#boxContainer').css('margin: 0 ' + Math.round(difference / 2) + 'px');
});