If you try to give margin-left to C1 div, it moves and overflow is hidden. But if you try to give margin-left to C2 div, it moves towards right, but overflow is not hidden, rather it moves in next line (behavior of inline-block).
So why is it not working on C2 div? Is there any way to solve this problem?
(Basically I want C1 and C2 div to be placed together and overflow should be hidden if I increase their widths, or if I give them margins).
Here's what I'm trying:
.c1 {
width: 220px;
height: 200px;
background-color: #666666;
display: inline-block;
}
.c2 {
width: 200px;
height: 220px;
background-color: #CCCCCC;
display: inline-block;
}
.c3 {
width: 180px;
height: 210px;
background-color: #333333;
display: block;
}
.wrapper {
background-color: red;
width: 500px;
height: 500px;
display: inline-block;
overflow: hidden;
}
<div class="wrapper">
<div class="c1">C1</div>
<div class="c2">C2</div>
<div class="c3">C3</div>
</div>
Add white-space: nowrap to the container (.wrapper).
white-space
The white-space property is used to describe how whitespace inside
the element is handled.
nowrap
Collapses whitespace as for normal, but suppresses line breaks (text
wrapping) within text.
source: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
To understand why, with white-space: normal, C2 wraps but C1 does not, see these posts:
Understanding the wrapping behavior of inline-block elements with overflow:hidden
Why are these inline-block divs wrapping in spite of their parent having overflow-x:scroll?
Here's an excerpt from an answer by #BoltClock:
The value of overflow on a container doesn't influence whether or
when its contents overflow; it only changes how it and its contents are rendered, when overflow does occur.
So you have to force the inline-blocks to actually overflow the
container.
Since an inline-block has the same rigid physical structure as a block
container box, it's impossible for an inline-block to "break apart" or
wrap when it's the only inline-level box on a given line box.
Don't use Display Property.. Use Float property for example
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="jquery-2.2.0.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
.c1{
width: 220px;
height: 200px;
background-color:#666666;
float:left;
margin-left:10px;
overflow:hidden;
}
.c2{
width: 200px;
height: 220px;
background-color:#CCCCCC;
float:left;
margin-left:10px;
overflow:hidden;
}
.c3{
width: 180px;
height: 210px;
background-color: #333333;
float:left;
margin-left:10px;
overflow:hidden;
}
.wrapper{
background-color: red;
width: 500px;
height: 500px;
display: inline-block;
overflow: hidden;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="c1">C1</div>
<div class="c2">C2</div>
<div class="c3">C3</div>
</div>
</body>
</html>
Related
I have the following HTML code:-
<html>
<head>
<meta charset="utf-8">
<title>Personal Site</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="header1">
hello world
</div>
<div class="header2">
</div>
<div class="header3">
</div>
</body>
</html>
Below is the style defined in the style sheet:-
.header1{
background-color: yellow;
width: 35%;
height: 200px;
display: inline-block;
}
.header2{
background-color: blue;
width: 30%;
height: 200px;
display: inline-block;
}
.header3{
background-color: green;
width: 34%;
height: 200px;
display: inline-block;
}
I am getting the following output:-
Question: Despite defining my display property as inline-block, why is the yellow box along with Hello World going in the second line? If I remove the text Hello world then all three box lines up together?
Can someone please explain this behavior?
The inline-block display property treats block level elements (e.g. ) as an inline element (e.g. ), and, just like if you had a line break between two elements, the line-break between the s is creating a space between the s. That extra margin is actually a space—not a margin.
ref: more details...
apply 'float:left' to each header block.
.header1{
background-color: yellow;
width: 35%;
height: 200px;
display: inline-block;
float:left;
}
.header2{
background-color: blue;
width: 30%;
height: 200px;
display: inline-block;
float:left;
}
.header3{
background-color: green;
width: 35%;
height: 200px;
display: inline-block;
float:left;
}
Seems to be a quirk of inline-block. If you add vertical-align:top; it sorts it out.
.header1{
background-color: yellow;
width: 35%;
height: 200px;
display: inline-block;
vertical-align:top;
}
.header2{
background-color: blue;
width: 30%;
height: 200px;
display: inline-block;
vertical-align:top;
}
.header3{
background-color: green;
width: 34%;
height: 200px;
display: inline-block;
vertical-align:top;
}
The following is a theory, based on reading the Visual formatting model document provided by the W3C. I'm most likely wrong on at least part of this, but:
By applying display: inline-block to the div elements, the end result is
the divs themselves are inline
the content inside each div gains a, let's call it a "virtual container", that's a block element (or treated as such).
Inline elements collapse to the height and width of their content. In the second and third divs, since those are empty, means those collapse to a height of 0. The boxes you see are actually the inner content overflowing the parent divs.
The three elements all have a default vertical-align value of baseline, so I suspect what you're ultimately seeing is three divs aligned in a row, to the baseline of the first div, but then the bottom of the inner content of the latter divs is aligning to the baseline of the first div, with their tops pushing the whole row down from the top of the page.
Adding the the old "has-layout" trigger will cause the inline elements to resize to fit their content, if that's all you're after (you'll want to run this with the full-screen option to see it correctly):
.my-block{
height: 200px;
display: inline-block;
/* these rules applied together trigger hasLayout */
/* see https://webplatform.github.io/docs/css/cssom/properties/hasLayout/ */
overflow: auto;
zoom: 1;
}
.header1{
background-color: yellow;
width: 35%;
font-size: 25px;
}
.header2{
background-color: blue;
width: 30%;
}
.header3{
background-color: green;
width: 34%;
}
<html>
<head>
<meta charset="utf-8">
<title>Personal Site</title>
</head>
<body>
<div class="header1 my-block">
hello world
</div>
<div class="header2 my-block">
</div>
<div class="header3 my-block">
</div>
</body>
</html>
Changing the vertical-align to top or bottom would yield the same effect in your example, although you'd need to make sure either of those alignments make sense in your "real" code.
Here is a simple piece of code, resulting in blue span element overflowing out of yellow and black box.
I know, I can use overflow property to hide/scroll it, but I rather need to resize the #inner and #outer containers to cover it (so that scrollbar would rather be on whole page instead of in the containing div). Is there any way?
The content ( = width) of "blue span" is dynamicly generated from application?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<style type="text/css">
#outer {background: black; width: 300px; margin: 10px auto; padding: 20px; }
#inner {background: yellow; min-width: 200px; height: 200px; }
#inner span { background: blue; display: block; width: 400px; }
</style>
<div id="outer">
<div id="inner">
<span> </span>
</div>
</div>
</html>
If you want the two outer boxes to resize dynamically based on the content thats inserted in the span, you will have to reconsider your approach. All boxes that scale dynamically cannot have a width defined, so they cannot be centred using the margin: auto. However, it is possible to achieve the same effect by wrapping the whole thing into another box that covers the full width of the page, text-align centring that box and then making the outer box displayed inline-block. This is the code that works. Now you can add a min-width to the content box if you want and it will scale nicely. Heres some code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<style type="text/css">
#wrap {
width: 100%;
text-align: center;
}
#outer {
display: inline-block;
background: black;
margin: 10px 0;
padding: 20px;
}
#inner {
background: yellow;
height: 200px;
}
#inner span {
background: blue;
display: block;
}
</style>
<div id="wrap">
<div id="outer">
<div id="inner">
<span> </span>
</div>
</div>
</div>
</html>
I think so you can add % units for your divisions to make it as perfect
Here is the CSS
#outer {background: black; width: 300px; margin: 10px auto; padding: 20px; }
#inner {background: yellow; min-width: 200px; height: 200px; }
#inner span { background: blue; display: block; }
Here is the fiddle
http://jsfiddle.net/mohamedmusthafac/n6CEx/
I think so this is what you are expecting for??
I'm trying to place two div horizontally, but one the content of the second div exceeds the height of the first one i get bad results:
Here is my Html code:
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="mystyle.css"></head>
<body>
<div class="container">
<div class="yellow">sometext</div>
<div class="green">more text here more text here more text here more text here more text here more text here more text here more text here more text here more text here </div>
<div class="spacer"></div>
</div>
</body>
and this is my Css:
.yellow {
background-color: yellow;
margin: 2px;
float: left;
width: 100px;
text-align: center;
}
.green{
background-color: #00ff00;
}
.container {
width: 30%;
}
.spacer {
clear: both;
}
The result i want is this:
but this is what i get:
Why not make the container background the same colour as your first div and change the CSS to:
JSFiddle here
.yellow {
background-color: #00ff00;
margin: 2px;
float: left;
width: 100px;
text-align: center;
}
.green{
background-color: yellow;
overflow: hidden; <-- added
}
.container {
width: 30%;
background-color: #00ff00; <-- added
}
.spacer {
clear: both;
}
Although float is commonly used for layout purposes like this, it was originally designed to float text elements. This is the reason for why floated divs behave in a strange manner when ones not familiar with it.
Beside the text formatting issues there is actually another difficulty when you want two floated elements have the same automatic height. This could be achieved much better by using the display property with table and table-cell.
Have a look at this:
CSS for HTML dynamic layout with not fixed columns?
Or just take the regarding fiddle:
http://jsfiddle.net/TfuTE/
I think restricting .container to has a specific background-color may be cumbersome.
I suggest using display: table for parent element and display: table-cell for children to get rid of this issue.
Just add following lines in your stylesheet:
.container {
display: table;
height: 100%;
}
.container > div {
display: table-cell;
height: inherit;
vertical-align: top;
}
Here is a JSBin Demo
if you make a blocklevel element float your element won't be height and width 100% but as big as it's content, or as big as you set it with css.
you could give it a height with css
you could give the yellow div a margin-left: 104px
I want to have a text box of fixed height where the text are aligned bottom. If the text exceeds the height of the box, the text will not be visible. My problem right now is that the overflow:hidden; is not hiding the extra text. I think this is because of the display:table-cell;. If I remove display:table-cell; the overflow:hidden; will work vertical-align:bottom; will no longer work.
EDIT: If the text is very long, the text needs to expand upwards until it has reached 40px. When it reaches 40px, additional text will not be rendered via overflow:hidden;.
http://jsfiddle.net/LxtqJ/
div {
background: yellow;
height: 40px;
width: 250px;
display: table-cell;
vertical-align: bottom;
overflow: hidden;
}
<div>
A SHORT LINK WITH MY TEXT
</div>
<br>
<div>
A VERY...VERY LONG LINK WITH MY TEXT
</div>
Where you need overflow is on <a>
a {
display:inline-block;
}
http://codepen.io/anon/pen/GLidz
(see my comment on question about display:table-XX;)
If this is not totally what you need , you may set a max-height or height to <a>
a {
display:inline-block;
max-height:2.4em /* average 2 lines 1.2 X 2 */
/* or max-height : height of cell ;*/
overflow:hidden;
}
A litlle more explanations:
table-cell will keep expand vertically , that's how it works.
If you set max-height:100%; to a child , and no height for
table-cell, it will grow it will be 100% of unknown.
If you set an height to table-cell like height:100px, it will grow, but if
childs have height or max-height like: 100%, it will be the 100% of those 100px
set in CSS file.
in HTML
<div class="outside">
<div class="insideside">
A SHORT LINK WITH MY TEXT
</div>
</div>
<br>
<div class="outside">
<div class="insideside">
A VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY VERY LONG LINK WITH MY TEXT
</div>
</div>
In CSS
.outside {
background: yellow;
height: 40px;
width: 250px;
overflow: hidden;
}
.insideside {
height: 40px;
display: table-cell;
vertical-align: bottom;
}
Hope this will help you ...
You can do the same thing without editing HTML code
HTML: the same html code
CSS: Like this
div {
background: yellow;
height: 40px;
width: 250px;
overflow: hidden;
}
a {
display: table-cell;
height: 40px;
vertical-align: bottom;
}
maybe this will solve your problem ...
This works:
div {
background: yellow;
height: 40px;
width: 250px;
overflow: hidden;
position: relative;
}
div a{
position: absolute;
bottom: 0;
}
I have a div wrapped in another div.
The parent div is set to:
display:table
The child div is set to
div:table-cell
This is in order to vertically and horizontally centre some text.
But I aslo need to define the size of that text. This is becasue the div needs to float in the centre of the browser window, and the window itself is on a long page too.
I have uploaded a screenshot to show you what i mean.
So, this is why i need to define the height and width of my table-cell div too. It needs to fit within that circle.
I'm at a loss as to why i cant set the height or width of this table-cell.
I also need to do this in CSS, not jquery as it'll be the first thing that people see when the page loads, and there will be a lot of content on the landing page.
I've put the code here:
http://jsfiddle.net/Kpr9k/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Div as Table-Cell Width/Height Mystery</title>
<style type="text/css">
body, html {
width:100%;
height: 100%;
background-color: gray;
margin: 0;
padding: 0;
}
#myTable {
margin: 0;
display: table;
width: 100%;
height: 100%;
border: 1px red solid;
}
#myCell {
display: table-cell;
max-height: 500px;
max-width: 500px;
min-height: 500px;
min-width: 500px;
height: 500px;
width: 500px;
text-align: center;
color: #000000;
line-height: 36px;
vertical-align: middle;
border: 1px yellow solid;
}
</style>
</head>
<body>
<div id="myTable">
<div id="myCell">I cannot define the width of a table cell and its driving me insane! The yellow border is the table-cell, however its been defined to be (min, max AND regular!!) as a 500px square.Instead, it's just defaulting to be 100%.</div>
</div>
</body>
</html>
I think the behaviour of display: table-cell; is to fill any display: table; parent.
EDIT:
Confirmed this by mucking around with your code on jsfiddle.
My suggestion to you would be to use absolute positioning to center the container div in the page, and use display: table-cell; on the inner div to get your vertical alignment.
Here is the answer:
I'm surprised by how complicated this was, anyone have a better solution?
http://jsfiddle.net/2Z2BF/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Browser Centred Div Overlay - WITH Specified Width and Height</title>
<style type="text/css">
html,body{
height:100%;
margin:0;
padding:0;
}
#stopTheOverlayFromAffectingTheContent {
position: absolute;
width: 100%;
height: 100%;
}
#verticalFix{
height:50%;
margin-top:-250px;
width:100%;
}
#horizontalFix {
width:500px;
height:500px;
margin-left:auto;
margin-right:auto;
}
#myTable {
background-color: aqua;
display: table;
width: 100%;
height: 100%
}
#myCell {
display: table-cell;
text-align: center;
vertical-align: middle;
}
#contentBelow {
height:3000px;
}
h1 {color:#fff;margin:0;padding:0}
</style>
</head>
<body>
<div id="stopTheOverlayFromAffectingTheContent">
<div id="verticalFix"></div>
<div id="horizontalFix">
<div id="myTable">
<div id="myCell">Lorem Ipsum</div>
</div>
</div>
</div>
<div id="contentBelow">DEVIL</div>
</body>
</html>