I am trying to figure out the overflow property
So to middle an element using margin:auto property it has width defined but,
what is the requirement for centering an element vertically with respect to its container/parent?
With current set up overflow happens so, when does the overflow auto expands the container to fit the overflow element ???
div {
margin: 200px auto;
height: 100%;
width: 60%;
border: 10px solid red;
text-align: center;
}
body {
height: 300px;
min-height: 500px;
padding: 0;
border: 10px solid yellow;
overflow: auto;
}
<div>
somet text
</div>
Just a few things about your current code:
If you want your div to be what is scrollable you should put the overflow auto on your div. Putting it on your top level container will result in you never seeing the proper scrollbars.
You have a left/right margin of 200px on every div. Is there a reason for this type of margin? Maybe this can be fixed a little better using a more structured layout. For instance tables or floating divs. I think your 200px margin could start to make things look strange when the window starts getting resized.
To answer your question though, I think that you can easily do what you want using the new flexbox display option. Here is an example:
body {
padding: 0;
border: 10px solid yellow;
height: 300px;
display: flex;
}
div {
height: 60%;
width: 60%;
border: 1px solid red;
text-align: center;
overflow: auto;
margin: auto;
}
<div>
somet text
<br><br><br><br> somet text
<br><br><br><br> somet text
<br><br><br><br> somet text
<br><br><br><br> somet text
<br><br><br><br> somet text
<br><br><br><br>
</div>
Related
I'm trying to draw a square next to a multiline piece of text in a fixed width container for a color legend. However, I'm running into the issue that even though the text and the square should fit in the container, the square is getting squashed into a rectangle as the text element takes up more horizontal space than it should. Is there a way I can (preferably without hard-coded magic numbers) ensure that the p element only takes the horizontal space it needs to display the text?
Relevant MWE:
html:
<div class="div">
<div class="square">
</div>
<p class="text">
Lorumipsum dolorsitamet
</p>
</div>
css:
.div {
width: 140px;
display: flex;
align-items: center;
outline: 1px solid blue;
}
.square {
width: 25px;
height: 25px;
background-color: red;
}
.text {
margin-left: 2px;
outline: 1px solid red;
}
Fiddle:
http://jsfiddle.net/6jxtp8k5/59/
Use min-width and min-height instead of using width and height. This will ensure that the square will always have the specific width and height.
.square {
min-width: 25px;
min-height: 25px;
background-color: red;
}
I have an responsive Owl Carousel (v2), each item or slide has an image and below that some text of variable length, see image below:
As can be seen, all the images are bottom aligned to the same baseline, regardless of how much text there is. I've done this by setting the text div to a fixed height. The problem is, if there were to be just one line of text, I'd have unnecessary space below the carousel.
If I allow the div to set its own height, I get this:
So my images are no longer lined up.
HTML
<div>
<img class='a4_diary_image' src='sizes/test.png'>
<div class='owl_diary_desc'>
A4 size, this is going on to two lines
</div>
</div>
<div>
<img class='a5_diary_image' src='sizes/test.png'>
<div class='owl_diary_desc'>
A5 size
</div>
</div>
<div>
<img class='a6_diary_image' src='sizes/test.png'>
<div class='owl_diary_desc'>
A6 size
</div>
</div>
</div>
CSS
.owl-carousel .owl-item {
display: table-cell;
float: none;
text-align: center;
vertical-align: bottom;
border: 1px dashed grey;
height: 100%;
padding: 0px 10px;
}
.owl_diary_desc {
font-size: 19px;
border: 1px dashed red;
margin-top:10px;
}
.a4_diary_image {
max-width: 100%;
max-height: 100%;
margin-left: auto;
margin-right: auto;
}
.a5_diary_image {
max-width: 70%;
max-height: 70%;
margin-left: auto;
margin-right: auto;
}
.a6_diary_image {
max-width: 50%;
max-height: 50%;
margin-left: auto;
margin-right: auto;
}
Straight HTML and CSS won't allow you to set equal heights based off siblings. Using a little jquery this can be achieved though.
$maxDesc;
function equalize(){
$('.owl_diary_desc').each(function(i){
if ($(this).height() > $maxDesc) { $maxDesc = $(this).height();}
});
$('.owl_diary_desc').each(function(i){$(this).height($maxDesc);});
}
When I use something like this, I generally move the variable holder to the beginning of the script. Then I call the function on document ready. Sometimes I'll even call it on the window resize function. If you choose to do that, you must call an each function on your object and reset the height to auto before recalling the equalize function.
Will be hard to explain what I want, so I will show an animated gif of the result that I want (made in photoshop) and my code in jsFiddle of what's happening.
As you can see, when the blue box size is not enough to fit all items in one row, the 4ยบ item is moved to the second row (as expected), but instead of being aligned in center, he is left aligned.
My CSS code
.outer-box
{
background: #00cc99;
width: 100%;
max-width: 800px;
font-size: 0;
text-align: center;
padding: 10px;
}
.outer-box a
{
display: inline-block;
width: 120px;
height: 80px;
padding: 10px;
background: #ff5050;
font-size: 12px;
}
.outer-box a:hover
{
background: #990000;
}
.outer-box a div
{
background: #99ccff;
width: 100%;
height: 100%;
}
My HTML
<div class="outer-box">
<div>I put image and text here</div>
<div>I put image and text here</div>
<div>I put image and text here</div>
<div>I put image and text here</div>
</div>
My Result
My Expected Result
I've tried to play with float divs (one div inside outer-box and the link elements using float left) with no success.
There is a way to accomplish this without javascript?
Here is my code in jsFiddle.
PS. English is not my native language '-'.
with flex or inline block, you can use a pseudo of 1px height and the width of 2 boxes + their margins .
It will be like a fith box, filling entirely the second line and drop as a third line:
.outer-box {
background: #00cc99;
width: 100%;
max-width: 800px;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: auto;
font-size: 0;
padding: 10px;
}
.outer-box:after {
content: '';
max-height: 1px;
width: 320px
}
.outer-box a {
display: block;
width: 120px;
height: 80px;
padding: 10px;
background: #ff5050;
font-size: 12px;
margin: 5px 10px;
}
.outer-box a:hover {
background: #990000;
}
.outer-box a div {
background: #99ccff;
height: 100%;
}
<h1> USE full page mode then resize window broser </h1>
<div class="outer-box">
<div>I put image and text here</div>
<div>I put image and text here</div>
<div>I put image and text here</div>
<div>I put image and text here</div>
</div>
Inline-block version to play with
Firstly, I love the way you presented your problem. Nice images :-)
I don't think you can do what you want without an extra element. Adding an inline-block element that re-adjusts the alignment will do what you want.
.inner-box {
text-align: left;
display: inline-block;
}
See https://jsfiddle.net/qgcz0ax4/
Each of those divs act as text due to the <a> tags. Just set text-align to left for .outer-box - if you want each of the divs to have center aligned text, create a class and give that class to all 4 child divs
.outer-box
{
background: #00cc99;
width: 100%;
max-width: 800px;
font-size: 0;
text-align: left;
padding: 10px;
}
Hi, i want to make this layout.
I am trying to do it in this way:
<div class="container" >
<div class="picture_cont">...</div>
<div class="info">...</div>
<div class="price">...</div>
</div>
And CSS
.container {
border: solid 1px #000;
min-height: 160px;
}
.container .picture_cont {
float: left;
border-right: dotted 1px #777777;
min-height: 160px;
width: 100px;
}
.container .price {
min-height: 160px;
min-width: 160px;
width: 150px;
float: right;
border-left: dotted 1px #777777;
}
.container .info {
float: left;
}
But i am getting this picture:
There is some issue with right column.
How to make it right ?
A mix of relative and absolute positioning will also do the trick. Something like this:
.container{position:relative;}
.picture_cont{position:absolute;left:0;top:0;bottom:0;width:100px;border-right:...}
.info{position:absolute;left:101px;top:0;bottom:0;right:151px;}
.price{position:absolute;right:0;top:0;bottom:0;left:150px;border-left:...}
Here's a fiddle to demonstrate.
you are missing overflow:auto;
.container {
border: solid 1px #000;
min-height: 160px;
}
.container .picture_cont {
float: left;
border-right: dotted 1px #777777;
min-height: 160px;
width: 100px;
}
.container .price {
min-height: 160px;
min-width: 160px;
width: 150px;
float: right;
border-left: dotted 1px #777777;
overflow:auto;
}
.container .info {
float: left;
}
You could try rearranging your markup to have both columns occur before the larger content area, remove the float on the larger area, and apply overflow:auto to it. This forces a new block formatting context restoring the flow of the .info container to be independent of the floated sidebars. (Note that you need to be careful of collapsing margins and non-staticly positioned elements to avoid scrollbars).
HTML
<div class="container" >
<div class="picture_cont">...</div>
<div class="price">...</div>
<div class="info">text text text text text text text text text text text text text text text text text text text text text text text </div>
</div>
CSS
...
.container .info {
overflow: auto;
}
Fiddle Demo
Source: http://jsfiddle.net/StMLm/
Demo: http://jsfiddle.net/StMLm/show
Because the items are floated and the middle has no specified width, the last item will "feel" the text of the second ("info") and be bumped down below it -- there is nothing telling info that, instead, it should stop 200px from the right edge. (150px? -- your picture and CSS don't match up)
One way to achieve that is to put right-padding of 200px (150px?) on info and then move the right-column into place with some CSS trickery: see In Search of the Holy Grail for this classic solution.
A newer approach is to use display:table on the container display:table-cell on the 3 inner parts, set the width's on the left- and right-columns, and be done with it.
You're using floats, so all your containers are independant, which means you can't base position and size on other containers. So in your case you'll have to specify a width for your containers so that they are fixed and don't overlap each other.
Also try and put a "top" of 0px on your price container. This should help out.
I typically use "inline-blocks" and fluid widths. This nice thing about this method is you can add a "min-width: 240px" and your UI will stack on mobile devices. (jsFiddle)
div.container {
width: 100%;
}
div.container div {
border: 1px solid blue;
overflow: auto;
height: 10em;
display: inline-block;
margin: -3px;
padding:0;
}
div.info {
width: 70%;
}
div.picture_cont,
div.price {
width: 15%;
}
I'm trying to vertically center text in a div using the method outlined in this article : http://css-tricks.com/vertically-center-multi-lined-text/
.container {
width: 160px;
margin: 80px auto;
padding: 5px;
height: 60px;
max-height: 60px;
border: 1px solid black;
display: table;
}
.container p {
height: 60px;
max-height: 60px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
<div class="container">
<p>This is a lot of text. A really large amount of text, even. So much text here. And it just keeps going, oh my. Wow - so much text.</p>
</div>
<div class="container">
<p>Here's one line.</p>
</div>
JSFiddle here : http://jsfiddle.net/Vc88w/2/
The div must not go bigger than the specified height of 60px, and any overflowing text should be hidden. The CSS table trick works fine when there is not enough text to make the div overflow, but when there is too much it forces the div to go larger than 60px (the first example), which is not what I want.
Is there a CSS rule besides height and max-height that lets me override the height of a CSS table? Alternatively, how else could I achieve the vertical centering while enforcing a maximum height of 60px on the container div?
yes you must change in ".container" the "display:table" with a "display:block"
.container {
width: 160px;
margin: 80px auto;
padding: 5px;
height: 60px;
max-height: 60px;
border: 1px solid #000;
overflow: hidden;
display: block;
}