I have a div which has display: block. Inside of it, I have another div with display: inline-block. When I measure the size of the containing div, children bounds aren't taken into account. It's readily visible in a browser's inspector. Is there a way to stretch the containing div so that its bounds contain bounds on inline block?
Here is code which demonstrates the problem:
<div style="display: inline">
<div style="display: inline">aaa</div>
<div style="display: inline-block; width: 100px; height: 100px; background: red"></div>
</div>
P.S. I can't change inline on the container to the inline block. The only thing I can change is inline-block div's attributes.
You can apply display: table; on the container div. Here's a working fiddle.
Set height and width to auto
<div style="display: inline-block; background-color:green;width:auto; height:auto;">
<div>aaa</div> ^^^^^^^^^^^^^^^^^^^^^^^^
<div style="width: 100px; height: 100px; background: red;opacity:0.5;"></div>
</div>
You could wrap the contents within a div and give it a value of display: block;
DEMO http://jsfiddle.net/kevinPHPkevin/649EB/
CSS
.container {
background: #ccc;
}
.inner {
display: block;
background: #000;
}
HTML
<div class="container" style="display: inline">
<div class="inner">
<div style="display: inline">aaa</div>
<div style="display: inline-block; width: 100px; height: 100px; background: red"></div>
</div>
</div>
EDITED
If you can use display: block; then I would set it to height: auto;
[updated] DEMO http://jsfiddle.net/kevinPHPkevin/649EB/1/
Related
I've got custom elements in my code which display some odd behaviour when a child element has a display: inline-block style.
Consider the following two div elements:
<div style="padding: 4px;">
<randomcustomelement style="background-color: yellow">
<div style="display: block; height: 36px; background-color: red; width: 125px;">
<div style="display: block; width: 100%; height: 12px; background-color: green;"></div>
</div>
</randomcustomelement>
</div>
<div style="padding: 4px;">
<randomcustomelement style="background-color: yellow">
<div style="display: inline-block; height: 36px; background-color: red; width: 125px;">
<div style="display: block; width: 100%; height: 12px; background-color: green;"></div>
</div>
</randomcustomelement>
</div>
In the first main div it is clear that the custom element randomcustomelement is ignored by the browser. It does have a proper width and height, but is not rendered, like expected. In the second main div, however, randomcustomelement does get rendered, and what more, it has a very strange height of 17px. I've included an image depicting this through Chrome's element inspector below:
The only difference between both examples is that the child div which is wrapped by randomcustomelement has display: block in the first example, and display: inline-block in the second example. I've given the randomcustomelement a distinct yellow color to also visibly depict that it does get rendered.
This problem is present in all browsers, even though they should ignore the custom element:
User agents must treat elements and attributes that they do not understand as semantically neutral; leaving them in the DOM (for DOM processors), and styling them according to CSS (for CSS processors), but not inferring any meaning from them.
https://www.w3.org/TR/html5/infrastructure.html#extensibility-0
This is really giving me a headache, because I need the inner div to be a display: inline-block. So I would need the second example's code to give the first example's results.
Forcing the style of the randomcustom element to be display: inline-block and height: 0 gives the desired result.
<div style="padding: 4px;">
<randomcustomelement style="background-color: yellow">
<div style="display: block; height: 36px; background-color: red; width: 125px;">
<div style="display: block; width: 100%; height: 12px; background-color: green;"></div>
</div>
</randomcustomelement>
</div>
<div style="padding: 4px;">
<randomcustomelement style="background-color: yellow;height:0;display:inline-block">
<div style="display: inline-block; height: 36px; background-color: red; width: 125px;">
<div style="display: block; width: 100%; height: 12px; background-color: green;"></div>
</div>
</randomcustomelement>
</div>
Can't get my head around on why <img> inside <div style="display: inline-block"> pushes that div lower from top?
HTML
<div id="wrapper">
<div id="a1">
<img src='...' alt=""/>
</div>
<div id="a2">
</div>
<div id="a3">
</div>
<div id="a4">
</div>
<div id="a5">
</div>
<div id="a6">
</div>
<div id="a7">
</div>
<div id="a8">
</div>
</div>
CSS
div > div {
background: red;
height: 200px;
width: 19%;
text-align: center;
margin: 0 5% 5% 0;
display: inline-block;
}
img {
height: 128px;
width: 128px;
display: /* "BLOCK" FIXES THE ISSUE */;
}
EDIT
Setting img to display: block fixes the issue. But could anyone explain me why there is such a behaviour without that display: block?
The default vertical-align value is baseline, it can be the bottom line of the text or the bottom line of an image (img element is a replaced element, inline* level), which causes the offset in the first row of your demo.
In order to fix it, you can set vertical-align to top, or like you said set img to display: block also works.
The img tag behaves like a inline and bock element, basead on this answer: Is <img> element block level or inline level?
That's why you have to display block on the img inside a div with inline-block.
You can fix this by either adding a float: left or vertical-align:top
https://jsfiddle.net/foxhh0av/
div > div {
background: red;
height: 200px;
width: 19%;
text-align: center;
margin: 0 5% 5% 0;
display: inline-block;
float: left;
}
img {
height: 128px;
width: 128px;
display: /* "BLOCK" FIXES THE ISSUE */;
}
<div id="wrapper">
<div id="a1">
<img src='http://dfsm9194vna0o.cloudfront.net/1471693-0-Washingmachineforlaundry128.png' alt=""/>
</div>
<div id="a2">
</div>
<div id="a3">
</div>
<div id="a4">
</div>
<div id="a5">
</div>
<div id="a6">
</div>
<div id="a7">
</div>
<div id="a8">
</div>
</div>
Just change this in your css:
img {
height: 128px;
width: 128px;
display: block;
}
That should fix it.
You could set vertical-align: top; to your child divs (div > div).
There are some answers to a similar question already, but this one has a twist.
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-3 grey">
<div class="wrapper">
<div class="info">(i)</div>
<div class="text"><div class="labeled">This is a long text</div></div>
<div class="icon">[$]</div>
</div>
</div>
<div class="col-xs-12 col-sm-9 green">
Content
</div>
</div>
So I need three divs, aligned in one line at all conditions - info, text, icon - with two divs on the sides having fixed h/w, and one in the middle taking only as much space, as
either it needs, and not more
or is available for it, cutting the context with overflow:hidden
Here is the fiddle http://jsfiddle.net/L7tmt5w1/3/
Here are my mad skills in sketching ideas http://imgur.com/tF0HkD2
For those, who want to feel my pain, you may also try re-ordering the divs - text, icon, info - when the screen size goes mobile (bootstrap's col-xs-)
You can use the display: table-cell; method for this situation:
.wrapper {
display: table;
text-align: right;
width: 100%;
}
.info {
width: 20px;
height: 20px;
display: table-cell;
background-color: #005ea8;
color: #fff;
}
.icon {
width: 20px;
height: 20px;
display: table-cell;
background-color: #eb690b;
color: #fff;
}
.text {
display: table-cell;
background-color: #ccc;
width: auto;
}
This mimics the table display properties and keeps all the children of .wrapper inline and the middle one "elastic" as it has no defined width. You can also remove the floats.
http://jsfiddle.net/L7tmt5w1/7/
maybe this solution will help you DEMO
<aside class="panel">
...
</aside>
<div class="content">
...
</div>
.content {
overflow: hidden;
border: 1px solid;
}
.panel {
float: right;
width: 200px;
border: 1px solid;
}
You can try this http://jsfiddle.net/L7tmt5w1/3/
Remember: If you want to float an element to the right, it must be the first element. For example:
<div style="float:right"></div>
<div style="float:left"></div>
AND DIV's are already block elements, so you don't have to add display:block to a DIV-element
I don't know if this is what you want: jsfiddle
if not content on "text" no div... if too much content it's hidden
(but you can add
overflow:auto
to the text div for scroll bars
I have this HTML code
<div style="display:inline" >
<div>
<label>NOM:</label>
</div>
<div>
<label>Ben felten</label>
</div>
</div>
I got this result:
I need to change my code to get a result like this :
I need the two labels displayed in the same line and each div (parent to each label) having a width of 50 percent of the page's width.
How can i change my snipet to do that?
Thanks
Try something like this:
<div style="display:inline" >
<div style="float: left; width: 50%;">
<label>NOM:</label>
</div>
<div style="float: left; width: 50%;">
<label>Ben felten</label>
</div>
</div>
You need display inline for more than just the parent div.
div{
display:inline;
}
label{
display:inline;
}
http://jsfiddle.net/SVH5C/
add a class to your main div:
<div class="main">
<div >
<label>NOM:</label>
</div>
<div>
<label>Ben felten</label>
</div>
</div>
and in your css:
.main div{width: 50%; float: left;}
Or if those inside divs are realy there just for the labels there's no need for them to exist and you can style the labels directly, like:
<div class="main">
<label>NOM:</label>
<label>Ben felten</label>
</div>
CSS:
.main label{display: block; width: 50%; float: left;}
HTML:
<div>
<div class="label-container">
<label>NOM:</label>
</div>
<div class="label-container">
<label >Ben felten</label>
</div>
<div class="labels-end"/>
</div>
CSS:
div.labels-end{
clear: both;
}
div.label-container{
float: left;
width: 50%;
}
And the fiddle http://jsfiddle.net/RsK5N/3/
Div "labels-end" is not mandatory if labels spread over the entire width like in this case.
Without extra clear: both styled div browser will try to put the latter content in the same line as your labels. So it works without this div but only because there is no more width available.
You can also use inline-blocks and table-cells as follows.
Using inline-blocks
<div class="ex1">
<label>NOM:</label><label>Ben felten</label>
</div>
div.ex1 {
border: 1px dashed gray;
width: auto; /* will take the width of parent (page) container */
}
div.ex1 label {
display: inline-block;
width: 50%;
background-color: beige;
overflow: auto;
vertical-align: top;
}
Using CSS table-cells
<div class="ex2">
<label>NOM:</label><label>Ben felten</label>
</div>
div.ex2 {
border: 1px dashed gray;
width: 100%; /* will take the width of parent (page) container */
display: table;
}
div.ex2 label {
display: table-cell;
width: 50%;
background-color: beige;
}
If you use inline blocks, you need to be careful about any white space between the two label elements since any white space will add to the width of the line and will cause the second label to wrap to a second line. Use vertical-align: top to get rid of the extra white space below the labels which arises because of the inline formatting.
The extra white space issue does not arise with table-cells. Use width: 100% on the table div to make it fill up the width of the parent container (auto gives a shrink-to-fit width).
See demo: http://jsfiddle.net/audetwebdesign/Nb24q/
Comment: You don't need to wrap the label elements in div unless you need them for some other reason.
I have trouble with textarea inside a div whose display style is table-cell. You can see the problem here. The last div has a textarea and somehow it causes an empty area below itself and above other divs.
BTW I am trying to have a structure like this. According to selection, cells will be displayed in a fixed height area with equal widths having a total 100%. Problem occurs when there is a textarea inside any div. If there is an existing component that behaves like this any recommendation will be appreciated.
HTML
<div class="panes">
<div id="pane1" class="pane">
<div class="pane-content"></div>
</div>
<div id="pane2" class="pane">
<div class="pane-content"></div>
</div>
<div id="pane3" class="pane">
<div class="pane-content">
<textarea></textarea>
</div>
</div>
</div>
CSS
.panes {
display: table;
table-layout: fixed;
width:100%;
height:100px;
}
.pane {
display: table-cell;
border: solid 1px;
}
.pane-content {
display: block;
overflow: auto;
height: 100px;
border: solid 1px red;
}
.pane-content textarea {
display: block; /*This fix the issue in IE but other browsers still broken*/
width: 100%;
height: 100px;
}
make it like this:
.pane {
display: table-cell;
border: solid 1px;
vertical-align: top;
}