This page states "browsers always display scrollbars whether or not any content is actually clipped."
This isn't the case for #2.
#1 does display a scroll-bar but only when I scroll. For some reason I was led to believe it'd always be there.
I am using Chrome. Is this behavior normal? Have I misinterpreted MDN?
div {
height: 150px;
width: 150px;
padding: 5px;
border: 5px solid red;
overflow: scroll;
}
section {
height: 150px;
width: 150px;
padding: 5px;
border: 5px solid red;
overflow: scroll;
}
<body>
<h1>1</h1>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium modi beatae explicabo officiis voluptatibus doloribus quae ipsam, voluptate reiciendis iure maiores repudiandae, hic quaerat eaque amet alias ducimus voluptas consequatur!</div>
<h1>2</h1>
<section>Voluptate reiciendis iure maiores repudiandae, hic quaerat eaque amet alias ducimus voluptas consequatur!</section>
</body>
see it here youtube
When an overflow is on scroll browsers will always display scrollbars whether or not any content is actually clipped that's it when overflow is set to scroll so if you want the contents not to show scrollbars when contents is not overflowing you can simply use auto on overflow like
overflow: auto;
div {
height: 150px;
width: 150px;
padding: 5px;
border: 5px solid red;
overflow: auto;
}
section {
height: 150px;
width: 150px;
padding: 5px;
border: 5px solid red;
overflow: auto;
}
<body>
<h1>1</h1>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium modi beatae explicabo officiis voluptatibus doloribus quae ipsam, voluptate reiciendis iure maiores repudiandae, hic quaerat eaque amet alias ducimus voluptas consequatur!</div>
<h1>2</h1>
<section>Voluptate reiciendis iure maiores repudiandae, hic quaerat eaque amet alias ducimus voluptas consequatur!</section>
</body>
so if you want to have the scrollbar on one dimension you could just use overflow-y to have scrollbars on the y-axis or use overflow-x to have the scrollbar on the x-axis
the following is an example of overflow on one dimension
Example
div {
height: 150px;
width: 150px;
padding: 5px;
border: 5px solid red;
overflow-y: scroll;
}
section {
height: 150px;
width: 150px;
padding: 5px;
border: 5px solid red;
overflow-x: scroll;
}
<body>
<h1>1</h1>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium modi beatae explicabo officiis voluptatibus doloribus quae ipsam, voluptate reiciendis iure maiores repudiandae, hic quaerat eaque amet alias ducimus voluptas consequatur!</div>
<h1>2</h1>
<section>Voluptate reiciendis iure maiores repudiandae, hic quaerat eaque amet alias ducimus voluptas consequatur!</section>
</body>
Related
Is margin-right not calculated or taken into account in the following example? what happens when someone increases margin-right on .box? it has no effect. why?
.outer {
width: 500px;
margin: 0 auto;
background: #9CF;
}
.box {
width: 300px;
background-color: #ffd900;
margin: 50px;
}
p {
background: #EEA458;
}
<div class="outer">
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga ipsam quibusdam pariatur animi doloremque libero sed odio asperiores aliquam, accusamus vel voluptas iusto labore ipsa aspernatur voluptates, blanditiis. Eaque rem sapiente officiis dolores
incidunt assumenda natus reprehenderit quisquam, perspiciatis ab nostrum eligendi deserunt, pariatur, obcaecati fuga quos sunt nemo ullam!</p>
</div>
</div>
You have a margin: 50px declaration, which applies margins on all sides, as well as a width: 300px declaration. The values are over-constrained — since you can't expect a 300-pixel wide box to only have 50-pixel horizontal margins in a containing block whose width is greater than 300 + 50 + 50 pixels — which does indeed result in the specified value of margin-right being ignored (in the typical LTR writing mode).
Here, the margin is getting collapsed. It does have a margin, but you cannot see. To make it visible, we need ti add the overflow: hidden to recalculate and show up the margin.
.outer {
width: 500px;
margin: 0 auto;
background: #9CF;
overflow: hidden;
}
.box {
width: 300px;
background-color: #ffd900;
margin: 50px;
}
p {
background: #EEA458;
}
<div class="outer">
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga ipsam quibusdam pariatur animi doloremque libero sed odio asperiores aliquam, accusamus vel voluptas iusto labore ipsa aspernatur voluptates, blanditiis. Eaque rem sapiente officiis dolores
incidunt assumenda natus reprehenderit quisquam, perspiciatis ab nostrum eligendi deserunt, pariatur, obcaecati fuga quos sunt nemo ullam!</p>
</div>
</div>
After applying overflow: hidden to the parent, you could see the top and bottom margins too.
And since your margin-right: 50px; is lesser than 150px of the space on the right, you cannot see the right margins.
This is the current box model of the .box:
If you want the background of .box to be visible, use padding instead of margin:
.outer {
width: 500px;
margin: 0 auto;
background: #9CF;
}
.box {
width: 300px;
background-color: #ffd900;
padding: 50px;
}
p {
background: #EEA458;
}
<div class="outer">
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga ipsam quibusdam pariatur animi doloremque libero sed odio asperiores aliquam, accusamus vel voluptas iusto labore ipsa aspernatur voluptates, blanditiis. Eaque rem sapiente officiis dolores
incidunt assumenda natus reprehenderit quisquam, perspiciatis ab nostrum eligendi deserunt, pariatur, obcaecati fuga quos sunt nemo ullam!</p>
</div>
</div>
Can anyone help me with why the left side of this article is sitting down from the top of the section? I have shown this in the below image.
I have used Chrome developer tools to try and find the problem but I can't see anything in the gap or margins that would indicate such behaviour?
main {
border: 1px solid white;
}
main>section {
border: 1px solid black;
}
main>section>h3 {
border: 1px solid black;
width: 98%;
text-align: center;
padding: 2px;
margin: 2px 2px;
height: 10%;
}
main>section>article {
display: inline-flex;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
min-height: 300px;
max-height: 400px;
}
main>section>article.aleft {
border: 1px solid black;
width: 28%;
padding: 1px;
height: 90%;
margin: 1px 1px;
}
main>section>article.aright {
border: 1px solid black;
width: 68%;
padding: 1%;
height: 90%;
margin: auto;
}
<main id="content">
<section class="part">
<h3>Latest News</h3>
<article class="aleft">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro at vero esse error eius laborum illum magni qui natus quisquam culpa, quaerat, ullam impedit. Nobis, repellendus itaque commodi! Iure, distinctio.
</article>
<article class="aright">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil aut quis mollitia, voluptates alias odit amet ullam praesentium molestias sapiente ex est. Repudiandae expedita cupiditate illo quis veritatis nemo, voluptates architecto incidunt ratione
in, voluptate neque amet quaerat eligendi ipsum earum aliquid dolorum inventore non natus. Autem dignissimos similique at possimus voluptatum, hic vel sunt velit. Rerum blanditiis voluptate animi molestias, hic ab natus vitae, cum labore facere
harum, placeat ea illum officia magni quis. Earum atque illum sit voluptate, veritatis asperiores, facere velit ipsam laborum hic iusto blanditiis possimus, molestias maxime sed! Excepturi nemo, rem quisquam quae, dolore magni.
</article>
</section>
</main>
It's being caused by uneven padding on your article elements.
main > section > article.aleft {
border: 1px solid black;
width: 28%;
padding: 1px; /* pixel unit */
height: 90%;
margin: 1px 1px;
}
main > section > article.aright{
border: 1px solid white;
width: 68%;
padding: 1%; /* percentage unit */
height: 90%;
margin:auto;
}
Matching the units for both – percentages or pixels – solves the problem.
you may use this code
main>section {
border: 1px solid white;
display: flex;
flex-wrap: wrap;
}
and replace the CSS you have for main>section
Hope this helps
Take care and happy coding
Maybe I'm overlooking something I don't know hehe.. But the point is this I have two columns beside each other. One, the left, should be the master of the height of the columns wrap, the right, which contains an img, should not be counted in height for the wrap's height... I can't use fixed heights, not even with Jquery or something cause the layout should change if the user drags his browser window smaller.. Thanks!
So my code is like
<div class="column_wrap">
<div class="column">
Some text
</div>
<div class="column">
IMG
</div>
</div>
Example of what I want to achieve
If the image is not to contribute to the height/width it would need to be either a background image or absolutely positioned.
I've assumed that the two columns will have equal width for this scenario and I have used flexbox to ensure that the columns are also equal height.
Absolute Position
The image need an additional wrapper which is the same size as the second column like so:
* {
box-sizing: border-box;
}
.column_wrap {
display: flex;
margin: 10px auto;
bordeR: 1px solid grey;
}
.column {
flex: 0 0 50%;
position: relative;
overflow: hidden;
}
.imgwrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.imgwrap img {
max-width: 100%;
}
<div class="column_wrap">
<div class="column">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis rem, repudiandae dolores ea, exercitationem quod quos distinctio voluptate. Ratione doloribus fugiat quis eaque quia modi numquam laudantium temporibus veritatis praesentium aliquid expedita dolores, voluptates sequi, natus eum dolorum maxime. Earum iure quasi odit excepturi rerum, debitis repellat enim veniam impedit.
</div>
<div class="column">
<div class="imgwrap">
<img src="http://lorempixel.com/output/fashion-q-c-640-480-8.jpg" alt="" />
</div>
</div>
</div>
Codepen Demo
Background Image
* {
box-sizing: border-box;
}
.column_wrap {
display: flex;
margin: 10px auto;
bordeR:1px solid grey;
}
.column {
flex:0 0 50%;
position: relative;
overflow: hidden;
}
.column:nth-child(2) {
background-image: url(http://lorempixel.com/output/fashion-q-c-640-480-8.jpg);
background-size: cover;
}
<div class="column_wrap">
<div class="column">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis rem, repudiandae dolores ea, exercitationem quod quos distinctio voluptate. Ratione doloribus fugiat quis eaque quia modi numquam laudantium temporibus veritatis praesentium aliquid expedita
dolores, voluptates sequi, natus eum dolorum maxime. Earum iure quasi odit excepturi rerum, debitis repellat enim veniam impedit.
</div>
<div class="column">
</div>
</div>
Codepen Demo
So I have a full-width row and I want to have an image that extends a bit outside the top and bottom boundaries of the row, so as to look like a sticker holding a ribbon to the website. How do I achieve this "overlap" effect in CSS?
As far as I can tell, you can nest divs within each other or float them side-by-side, but you can't put a taller div on top of a thinner one and get this overlap effect to work. What am I missing?
I'm using Bootstrap... if there is some kind of grid-based solution to this that would be awesome.
EDIT: Code! Here's the HTML.
<div class="row-fluid redRibbon">
<div class="bodyContainer">
<img id="isocert" src="img/isocert.png">
</div>
</div>
And relevant CSS (row-fluid is a default class in Bootstrap):
.bodyContainer{
padding: 15px;
width: 800px;
margin: auto;
}
.redRibbon{
background-color: #AF002A;
color: white;
}
#isocert{
overflow: visible;
}
I would post a picture but I don't have enough reputation :(
Give your .row the style or CSS rule position: relative; and now give your image you want to overlap that row position: absolute; but keep it placed inside the row. Now it will be placed relative to your .row but you can adjust its position with the CSS attributes top, right, bottom, and left. Furthermore you can make it bigger than the row (via CSS or image attributes) and it will not influence the dimensions of your .row. Should it be cut by an other element you can give it an higher z-index. With this values you should be able to get your desired effect.
EDIT
So your code could look like something like this in the end:
.bodyContainer{
padding: 15px;
width: 800px;
margin: auto;
}
.redRibbon{
margin-top: 200px;
background-color: #AF002A;
color: white;
position: relative;
}
#isocert{
overflow: visible;
position: absolute;
top: -50px;
}
Here is a fiddle with an example: http://jsfiddle.net/L1wn66v8/
One option (in the absence of any supplied code) is to position the image with relative positioning.
div {
width: 50%;
border: 1px solid grey;
margin: 25px auto;
}
img {
float: left;
position: relative;
top: 50px;
left: -50px;
width: 100px;
border: 1px solid red;
}
<div>
<img src="http://www.clipartpal.com/_thumbs/pd/education/award_ribbon_blue_T.png" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus hic dicta dignissimos consequuntur mollitia enim fuga inventore tempore totam ad libero eveniet voluptatum iusto quis unde deleniti doloribus quos veniam perspiciatis rerum in cum
facilis maxime. Reiciendis corporis dolor tenetur at sunt quidem asperiores natus ad soluta fuga maiores expedita vero explicabo rem consequuntur accusantium similique alias odio cupiditate quaerat eligendi! Laborum illum earum pariatur minus sunt
eaque praesentium cum libero nihil voluptatibus dolorem eum. Eveniet nobis mollitia</p>
</div>
Note that the text continues to wrap around the image as though it was still in the same place. The element is only moved visually, any other elements will still treat it as though it had not been moved.
As an alternative, you could position it absolutely, but relative to the parent. In this case, the element is taken out of the flow and other elements will not react to it in the same way..
div {
width: 50%;
border: 1px solid grey;
margin: 25px auto;
position: relative;
}
img {
position: absolute;
top: 50px;
left: -50px;
width: 100px;
border: 1px solid red;
}
<div>
<img src="http://www.clipartpal.com/_thumbs/pd/education/award_ribbon_blue_T.png" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus hic dicta dignissimos consequuntur mollitia enim fuga inventore tempore totam ad libero eveniet voluptatum iusto quis unde deleniti doloribus quos veniam perspiciatis rerum in cum
facilis maxime. Reiciendis corporis dolor tenetur at sunt quidem asperiores natus ad soluta fuga maiores expedita vero explicabo rem consequuntur accusantium similique alias odio cupiditate quaerat eligendi! Laborum illum earum pariatur minus sunt
eaque praesentium cum libero nihil voluptatibus dolorem eum. Eveniet nobis mollitia</p>
</div
I have a bootstrap project with some other CSS that I inherited. I don't want to change any of the existing styles, but I'd like to add a solid-color child div that is flush with its parent on the top, left and bottom edges, and some number of pixels wide (much narrower than the parent).
The parent's classes which I'd like to keep intact are:
.my-heading {
padding: 10px 15px;
border-bottom: 1px solid transparent;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.my-link {
background-color: transparent;
padding: 0;
margin: 0;
border: 0;
position: relative;
}
My naive understanding for how to build the child makes me think the CSS should look like:
margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
width: 40px;
background-color: red;
But I still see margins. I've tried several variations changing padding also to no effect. I've seen answers that boil down to display:table-cell (couldn't make that work) or to position:absolute, which makes the child appear outside the parent.
It seems like this ought to be a simple problem, but I'm out of ideas.
display:table-cell; should work but you may need to have display:table; and display:table-row;
You would need to remove the padding from .my-heading and move it into your content div.
See below.
.my-heading {
border-bottom: 1px solid transparent;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
display: table;
}
.my-link {
background-color: transparent;
padding: 0;
margin: 0;
border: 0;
display: table-row;
}
.my-content {
padding: 10px 15px;
width: 100px;
background-color: red;
display: table-cell;
}
.my-content2 {
padding: 10px;
background-color: green;
display: table-cell;
}
and the html
<div class="my-heading">
<div class="my-link">
<div class="my-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, assumenda quis debitis aliquam aut dicta praesentium laboriosam eligendi placeat ipsa sint saepe vitae porro! Excepturi reiciendis illum at alias minima.
</div>
<div class="my-content2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, aliquid, eligendi, dolore nemo corporis iusto est assumenda cupiditate sapiente cumque incidunt excepturi ipsum nisi! Iure quisquam commodi nemo saepe rem autem minima inventore temporibus? Explicabo, reiciendis, ducimus, quasi alias nobis consectetur accusamus fugiat sed in sit vitae vel maiores itaque culpa magni voluptatum rem dicta est beatae ea. Adipisci, quis aliquam autem voluptas architecto quam asperiores ea ducimus provident harum laboriosam enim beatae ipsam tempore alias voluptatibus dignissimos doloremque recusandae a ullam aut error blanditiis odio labore reprehenderit dolore distinctio accusamus? Dignissimos, ipsam ea officiis nesciunt ipsum rem aut veritatis!
</div>
</div>
</div>
I've uploaded the above to bootply http://www.bootply.com/3y7QfF2653
Or you could use height: inherit;
example http://jsfiddle.net/j5umnnLd/
ofc if you set the height in the parent you might need a display : block or display : inline-block depening on your content / element type
Make the child an absolutely positioned element, and give the parent a position of relative so that it properly anchors the child. Then use CSS properties left, bottom, top to move the child against the edges.