How to stop a horizontal scrollbar from affecting the vertical align of the text inside a div? I want the text centered and the scrollbar can be under it.
Is it also possible to place the scrollbar on the underside of the outer div (without affecting its height) and affecting the scroll of the inner div with it?
.outer {
width: 50%;
padding: 30px;
background-color: #008000;
}
.inner {
border: 1px solid red;
height: 50px;
overflow: scroll;
white-space: nowrap;
}
<div class="outer">
<div class="inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget nulla ac leo ullamcorper tristique. Donec lobortis a dolor sit amet congue. Etiam nisl lectus, euismod id enim ac, pretium blandit lectus. Cras congue placerat purus in malesuada. In
ex dui, iaculis id nisi eget, fermentum condimentum ante. Etiam a facilisis justo, vitae auctor lacus. Duis at nisi sed lacus tincidunt accumsan at id lacus. Praesent at luctus velit, eget interdum turpis.
</div>
</div>
Screenshot
The red line is the middle and the text needs to be there, which isn't because it's centering the whole div including the scrollbar in it
You can vertically center your text easily with flex :
.inner {
display: flex;
align-items: center;
border: 1px solid red;
height: 50px;
overflow: scroll;
white-space: nowrap;
}
.text {
margin: auto;
}
<html>
<body>
<div class="outer">
<div class="inner">
<p class="text">Text here</p>
</div>
</div>
</body>
</html>
For your second question for the scrollbar outside the div i don't think you can do it, but maybe someone here have the solution :)
Add line-height. line-height = height.
.outer {
width: 50%;
padding: 30px;
background-color: #008000;
}
.inner {
border: 1px solid red;
height: 50px;
line-height: 50px;
overflow: scroll;
white-space: nowrap;
}
<div class="outer">
<div class="inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget nulla ac leo ullamcorper tristique. Donec lobortis a dolor sit amet congue. Etiam nisl lectus, euismod id enim ac, pretium blandit lectus. Cras congue placerat purus in malesuada. In
ex dui, iaculis id nisi eget, fermentum condimentum ante. Etiam a facilisis justo, vitae auctor lacus. Duis at nisi sed lacus tincidunt accumsan at id lacus. Praesent at luctus velit, eget interdum turpis.
</div>
</div>
Related
Task:
There is a box with fluid height that has to be centered in the browser window. It consists of three parts:
- top part with any length depending on text inside
- bottom part with any length depending on text indside
- middle part that is scrollable if there is not enough space to fit the text
Problem:
Implemeting the task I'm using flexbox on the parent display: flex; flex-direction: column;. Top and bottom parts are having flex-shrink: 0;
The part in the middle is set to overlow: auto. And for some reason there is no scroll in Internet Explorer 11. Overflow property is completely ignored. In Firefox and Chrome it works fine.
Screenshots:
Chrome/Firefox:
Internet explorer 11:
Code:
.wrapper {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
}
.box {
display: flex;
flex-direction: column;
max-width: 300px;
max-height: 90vh;
width: 100%;
border: 1px solid red;
}
.top,
.bottom {
flex-shrink: 0;
padding: 10px;
background: #ccc;
}
.scrollable {
overflow: auto;
}
<div class="wrapper">
<div class="box">
<div class="top">I'm any length text</div>
<div class="scrollable">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lacinia eleifend nisi ac laoreet. Praesent commodo bibendum turpis nec finibus. Aenean ac tincidunt velit. Sed et sodales quam, efficitur viverra erat. Pellentesque aliquet ultrices lectus at vulputate. In pulvinar nec ex sed condimentum. Vivamus vitae vulputate urna. Aliquam lobortis iaculis lacus a dictum. Pellentesque odio mauris, tincidunt sit amet sem dapibus, pretium ornare turpis. In sit amet justo luctus, ultricies nisi eu, iaculis erat. Pellentesque et tempor nibh. Vivamus congue elementum elit, id tempus dolor laoreet sed.
Vestibulum dictum efficitur metus, in consectetur turpis. Vestibulum vel vehicula ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc congue, odio ac malesuada pharetra, velit nisl facilisis lorem, at tincidunt ex metus volutpat diam. Integer varius dolor at tellus dapibus ultrices. Nulla sagittis purus in mauris vestibulum, ac facilisis turpis condimentum. Ut mattis in ex eu mattis. Nullam ac elit metus. Nullam finibus tempus lacus, sit amet sagittis ante. Morbi sit amet sem a nisi volutpat luctus. Suspendisse eget condimentum dui. Proin suscipit sed sapien a efficitur.
</div>
<div class="bottom">I'm any length footer</div>
</div>
</div>
Is there any idea how to fix this issue? What's wrong there and how to make IE renders scroll?
IE has quite some bugs, and ignoring min/max-height is one of them.
In this case I found using flex column direction on the wrapper, and remove align-items: center does the trick.
To make it aligned horizontally centered, use auto margin on the box
Note, there is still one flaw with this in IE, if you start and manually change the browser height, the scroll won't disappear even if the text would fit, but if to reload the page, it works. Am still looking into this, to see what/if can be done to get rid of that issue.
Stack snippet
.wrapper {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.box {
display: flex;
flex-direction: column;
max-width: 300px;
max-height: 90vh;
width: 100%;
border: 1px solid red;
margin: 0 auto;
}
.top,
.bottom {
flex-shrink: 0;
padding: 10px;
background: #ccc;
}
.scrollable {
overflow: auto;
}
<div class="wrapper">
<div class="box">
<div class="top">I'm any length text</div>
<div class="scrollable">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lacinia eleifend nisi ac laoreet. Praesent commodo bibendum turpis nec finibus. Aenean ac tincidunt velit. Sed et sodales quam, efficitur viverra erat. Pellentesque aliquet ultrices lectus at vulputate. In pulvinar nec ex sed condimentum. Vivamus vitae vulputate urna. Aliquam lobortis iaculis lacus a dictum. Pellentesque odio mauris, tincidunt sit amet sem dapibus, pretium ornare turpis. In sit amet justo luctus, ultricies nisi eu, iaculis erat. Pellentesque et tempor nibh. Vivamus congue elementum elit, id tempus dolor laoreet sed.
</div>
<div class="bottom">I'm any length footer</div>
</div>
</div>
try using -ms-overflow-style: scrollbar; on the element
I would like to wrap the content of varying length text within a box. With the below code, the width of the box is adjusted for smaller length text. But the height doesn't vary and text is not wrapped inside the box.
.chatbox {
border: 1px solid black;
border-radius: 3.5em/5em;
padding: 2%;
max-width: 60%;
float: left;
height: auto;
white-space: nowrap;
}
<div class="chatbox">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo arcu, aliquet quis interdum sed, molestie iaculis turpis. Morbi rutrum molestie mauris id gravida. Curabitur libero tortor, tincidunt at facilisis vitae, euismod id urna. Proin sit amet
facilisis est. Vivamus id rutrum eros, in tempus mauris. Nunc nec velit tempus, varius neque sit amet, varius mi. Nullam ullamcorper lacus arcu, eu commodo magna consectetur sit amet.
</div>
Try this
.chatbox{
border:1px solid black;
border-radius:3.5em/5em;
padding:2em;
max-width:60%;
float:left;
}
You don't need height:auto and word-wrap, which create the problem. I changed the padding to be compatible with border-radius.
Change white-space:nowrap to white-space:normal , hope this will help you
.chatbox {
border: 1px solid black;
border-radius: 3.5em/5em;
padding: 2%;
max-width: 60%;
float: left;
height: auto;
white-space: normal;
}
<div class="chatbox">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo arcu, aliquet quis interdum sed, molestie iaculis turpis. Morbi rutrum molestie mauris id gravida. Curabitur libero tortor, tincidunt at facilisis vitae, euismod id urna. Proin sit amet
facilisis est. Vivamus id rutrum eros, in tempus mauris. Nunc nec velit tempus, varius neque sit amet, varius mi. Nullam ullamcorper lacus arcu, eu commodo magna consectetur sit amet.
</div>
just replace your css with below css:
.chatbox{
border:1px solid black;
border-radius:3.5em/5em;
padding:2%;
max-width:60%;
float:left;
height:auto;
word-wrap: break-word;
}
Just remove white-space: nowrap it works this way.
.chatbox{
border:1px solid black;
border-radius:3.5em/5em;
padding:2%;
max-width:60%;
height:auto;
float: left;
}
I've made an illustration of the situation:
The blue lines illustrate the grid the website is in. Let's assume a 960 grid for now, with a 300px left side (red part), a 20px gap and the remaining 640px for the right side (the black and green parts). I want to know if there's a solution for this problem that doesn't use calc() (due to older browsers) or background-image (because that's not really pretty).
Is there a pretty way to make this work, using just CSS while keeping the content centered within the grid, and the backgrounds flowing all the way to the borders of the screen?
http://codepen.io/anon/pen/avoKwQ
Done by pseudo elements and absolute positioning. Used bootstrap for faster demo. Actually, it is a specific problem and my solution may not fit your project. Especially not work when you require horizontal scrolling. But problem is solved.
&:after {
content: " ";
position: absolute;
top: 0; right: 6px;
width: 99999%;
height: 100%;
background: red;
z-index: -1;
}
Parent of this element ofcourse require position: relative. In example this is done by bootstrap.
Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
This one has the added benefit of the columns always being equal height:
* { margin:0; padding:0; box-sizing: border-box; }
.grid {
display: flex;
}
.col-3 {
flex: 1 1 320px;
border-right: 20px solid #fff;
}
.col-2-3 {
flex: 1 1 640px;
}
.col-3 {
display: flex;
justify-content: flex-end;
}
.col-3>div {
padding: 20px;
flex: 0 1 300px;
}
.col-2-3>div {
display: flex;
justify-content: flex-start;
}
.col-2-3>div>div {
flex: 0 1 640px;
padding: 20px;
}
.red { background: #f00; color: #fff; }
.green { background: #0f0;}
.black { background: #000; color: #fff;}
<div class="grid">
<div class="col-3 red">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis rhoncus erat. Morbi id pretium tortor. Sed tristique, leo non fringilla tempor, orci ligula lobortis velit, a efficitur tortor dui eget libero. Ut aliquam tortor sed diam placerat, ut lacinia ipsum lacinia. Cras a neque vehicula arcu rutrum luctus. Aliquam placerat ac ex in tincidunt. Quisque nulla diam, cursus nec orci sit amet, aliquet tempor massa.
</p>
</div>
</div><!-- col -->
<div class="col-2-3 green">
<div class="black">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis rhoncus erat. Morbi id pretium tortor. Sed tristique, leo non fringilla tempor, orci ligula lobortis velit, a efficitur tortor dui eget libero. Ut aliquam tortor sed diam placerat, ut lacinia ipsum lacinia. Cras a neque vehicula arcu rutrum luctus. Aliquam placerat ac ex in tincidunt. Quisque nulla diam, cursus nec orci sit amet, aliquet tempor massa.
</p>
</div>
</div><!-- .black -->
<div class="green">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis rhoncus erat. Morbi id pretium tortor. Sed tristique, leo non fringilla tempor, orci ligula lobortis velit, a efficitur tortor dui eget libero. Ut aliquam tortor sed diam placerat, ut lacinia ipsum lacinia. Cras a neque vehicula arcu rutrum luctus. Aliquam placerat ac ex in tincidunt. Quisque nulla diam, cursus nec orci sit amet, aliquet tempor massa.
</p>
</div>
</div><!-- .green -->
</div><!-- .col -->
</div><!-- .grid -->
If I have two div elements. Both have similar parent location and float:right the style attribute. Which one will be more right than the other? I'd like to be able to tell that div1 should be most right, and div2 follows the div1. Or other way around, but this order must be deterministic.
thanks.
UPD: I'd like not to rely on the order of the divs in the html page. My html page gots generated from java/jsp, so i cannot be absolutely sure which div will be generated and written first. Is there another solution?
According to the CSS specification, the first floated element that appears in the code will be placed to the right, followed by the second one.
If there is not enough room on the line, then the second floated element will appear below the first one.
Reference: http://www.w3.org/TR/CSS21/visuren.html#floats
Also, be aware of block-formatting contexts:
http://www.w3.org/TR/CSS21/visuren.html#block-formatting
p {
overflow: auto; /* this creates a block formatting context */
}
img {
float: right;
}
<p>
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x200">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis velit ut neque tempor quis cursus tortor suscipit. Curabitur rutrum magna vitae arcu pharetra eget cursus ante accumsan. Nunc commodo malesuada adipiscing. Pellentesque consequat laoreet sagittis. Sed sit amet erat augue. Morbi consectetur, elit quis iaculis cursus, mauris nulla hendrerit augue, ut faucibus elit sapien vitae justo. In a ipsum malesuada nulla rutrum luctus. Donec a enim sapien. Sed ultrices ligula ac neque vulputate luctus. Suspendisse pretium pretium felis, in aliquet risus fringilla at. Nunc cursus sagittis commodo.</p>
<p>
<img src="http://placehold.it/700x100">
<img src="http://placehold.it/100x200">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis velit ut neque tempor quis cursus tortor suscipit. Curabitur rutrum magna vitae arcu pharetra eget cursus ante accumsan. Nunc commodo malesuada adipiscing. Pellentesque consequat laoreet sagittis. Sed sit amet erat augue. Morbi consectetur, elit quis iaculis cursus, mauris nulla hendrerit augue, ut faucibus elit sapien vitae justo. In a ipsum malesuada nulla rutrum luctus. Donec a enim sapien. Sed ultrices ligula ac neque vulputate luctus. Suspendisse pretium pretium felis, in aliquet risus fringilla at. Nunc cursus sagittis commodo.</p>
.right {
background: green;
}
.right-too {
background: red;
}
div {
float: right;
height: 20px;
width: 100px;
}
<div class="right">RIGHT</div>
<div class="right-too">RIGHT TOO</div>
The one to appear first in the code will be further on the right.
Edit: added a snippet
First one is more right..
<div style='width: 600px; height: 200px; border: 1px solid black;'>
<div style='width: 200px; height: 100px; background-color: yellow; float: right;'>A</div>
<div style='width: 200px; height: 100px; background-color: green; float: right;'>B</div>
</div>
Here is the jsfiddle: http://jsfiddle.net/q6wnm4dv/
The first one you write in the HTML will be the first one from the right side.
HTML:
<div class="wrapper">
<div class="div1"></div>
<div class="div2"></div>
</div>
CSS:
.wrapper {
width: 100%;
height: 50px;
}
.div1 {
float: right;
background-color: red;
height: 50px;
width: 50px;
}
.div2 {
float: right;
background-color: blue;
height: 50px;
width: 50px;
}
Here you can see the working example: https://jsfiddle.net/mgjdjf62/
the best way to order items is to use flexbox: a guide to flexbox
Im wanting the container (purple border) to grow in size alongside the main content so i can place a border around it so it looks like the sidebar (blue border) is full height.
<div id="container">
<section id="mainContent">
<h1>title here</h1>
<img src="images/jayzmchg.jpg"></img>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec eget sapien ut eros auctor consectetur. Praesent pretium ante et orci pharetra venenatis.
Proin fringilla fermentum sollicitudin. In ornare lectus ipsum, et egestas arcu consectetur
a. Nulla facilisi. Praesent id convallis arcu. Vestibulum leo tellus, hendrerit eu metus et,
cursus ultricies sapien. Aenean eu rutrum sem. Curabitur at quam nec augue viverra tempor ac
ut lorem. Sed vel accumsan sapien. Phasellus luctus diam ac luctus tincidunt. Integer quis
venenatis mauris. Nam malesuada augue id nibh porta commodo. Nam ullamcorper dui sit amet
ligula scelerisque hendrerit.</p>
</section>
<div id="sidebar">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<footer id="footer">
<p></p>
</footer>
Above is the html, the following is the css
#container { /* purple border */
height: 250px;
margin: 0 auto;
max-width: 1000px;
border: 1px solid #FF00FF;
}
#mainContent { /*red border */
float: left;
width: 700px;
border: 1px solid #FF0000
}
#sidebar {/*blue border */
width: 294px;
float: right;
border: 1px solid #0000FF;
}
ive set the height at 250px for the container so you can see it, ive tried setting it as 100% but just doesnt show anything im guessing this is cause theres no content in it but how could i make it so it acts like if what is inside the mainContent is its height.
adding overflow:hidden to container causes this
Put a float:left; on #container.
OR
Put overflow:hidden; on #container to clear the internal floats.
Example fiddle: http://jsfiddle.net/3jNTv/
Chris Coyier has written a great post about it here:
http://css-tricks.com/all-about-floats/
Try set the height to heigh: 100%;?
Try this one, see live example:
link
height: auto !important;
I have added a class floClear and add a div. it will work fine.
CSS
#container { /* purple border */
margin: 0 auto;
max-width: 1000px;
border: 1px solid #FF00FF;
}
#mainContent { /*red border */
float: left;
width: 700px;
border: 1px solid #FF0000
}
#sidebar {/*blue border */
width: 294px;
float: right;
border: 1px solid #0000FF;
}
.floClear
{
clear:both;
}
HTML
<div id="container">
<section id="mainContent">
<h1>title here</h1>
<img src="images/jayzmchg.jpg"></img>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec eget sapien ut eros auctor consectetur. Praesent pretium ante et orci pharetra venenatis.
Proin fringilla fermentum sollicitudin. In ornare lectus ipsum, et egestas arcu consectetur
a. Nulla facilisi. Praesent id convallis arcu. Vestibulum leo tellus, hendrerit eu metus et,
cursus ultricies sapien. Aenean eu rutrum sem. Curabitur at quam nec augue viverra tempor ac
ut lorem. Sed vel accumsan sapien. Phasellus luctus diam ac luctus tincidunt. Integer quis
venenatis mauris. Nam malesuada augue id nibh porta commodo. Nam ullamcorper dui sit amet
ligula scelerisque hendrerit.</p>
</section>
<div id="sidebar">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="floClear"></div>
</div>
<footer id="footer">
<p>Test</p>
</footer>