How can I get the "content" <div> of these two columns to fill the container's entire height?
jsfiddle: http://jsfiddle.net/7m4f7/8/
This is a follow up to this question: Make children divs the height of tallest child.
Here is a similar question, but the solutions don't seem to work.
Make div (height) occupy parent remaining height
Instead of using the display:inline-block, I used floats.
In order to obtain the same height , I used the content div to push the item div through the padding/margin compensation.
The background color of the title and content are now independent. You can changed at will.
The automatic margin between the inline-block elements can be replaced with regular margins applied to the divs at will or if you prefer just take them away.
You get the following:
Fiddle here
markup did not change
Css as follows
.row {
border: 1px solid red;
overflow:hidden;
}
.item {
float:left;
margin-right:4px;
}
.title, .content {
border: 1px solid rgba(0,0,0,0.2);
}
.content {
padding-bottom:1000px;
margin-bottom:-1000px;
background: rgba(0,0,0,0.1);
}
.title {
background-color: rgba(0,0,0,0.2);
}
Not exactly what you asked for, but maybe this is sufficient. When you add vertical-align: top;, the top edges will align nicely
.item {
background: rgba(0,0,0,0.1);
display: inline-block;
vertical-align: top;
}
JSFiddle
Related
I have a container and a image inside it. When the parent is given float, there is a height mismatch in the child. When both are given float it matches. Why?
<div class="parent"><img src="images/trest.png" class="image"></img></div>
Mismatches when:
.parent{
float:left;
}
.image{}
Perfect when:
.parent{
float:left;
}
.image{
float:left;
}
Basically, specifying an element with float will in most cases make it into a block element.
Image elements by default are known to have the issue of unwanted white space underneath when placed in a block level container. The solution typically has been to set the image element's display to block.
From MDN:
As float implies the use of the block layout, it modifies the computed value of the display values in some cases:
Comparison between float and display: block (in essence, the results are the same):
.parent {
float: left;
border: 2px solid red;
}
.image {
border: 2px solid blue;
}
.image2 {
border: 2px solid blue;
display: block;
}
.image3 {
border: 2px solid blue;
float: left;
}
<div class="parent"><img src="https://placehold.it/100x100" class="image"/></div>
<div class="parent"><img src="https://placehold.it/100x100" class="image2"/></div>
<div class="parent"><img src="https://placehold.it/100x100" class="image3"/></div>
andyb said in a comment on the question:
It is because <img> is a replaced element which has default vertical-align:baseline and baseline aligned elements reserve space for text descenders - see stackoverflow.com/questions/5804256/… – andyb
Because of this, another way to fix this is to set the vertical-align property to bottom instead of baseline.
From timolawl's answer, if you adjust the style of the first image to be:
.image {
border: 2px solid blue;
vertical-align: bottom; /* added this */
}
then it will look the same as the other two, whish use display:block and float (respectively) to get the desired layout.
I have a container div with the following attributes:
#cat_container{
margin:0;
padding:5px;
border:1px solid red;
min-height:200px;
}
Inside there are multiple left floating div's. The problem is that they don't force the containing div to expand downwards, instead just overlapping and continuing outside the container div's boundary.
Left floating div's:
.cat_wrap{
border: 1px solid #000;
width:100px;
min-height:120px;
margin:0 10px 5px 0;
padding:0;
float:left;
}
If I take the left float out, the containing div does expand vertically as it should do. So how do I get the inner divs to float left but also expand the container div vertically?
you need to set overflow for the main div. overflow: auto; this will force the div container to expand and adapt to the content.
#cat_container{
margin:0;
padding:5px;
border:1px solid red;
min-height:200px;
overflow: auto;
height: auto !important;
}
This is a common problem and is fixed using a "clearfix" solution. Setting overflow will fix this problem, however there are better solutions, like the following:
.mydiv:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .mydiv { zoom: 1; } /* IE6 */
*:first-child+html .mydiv { zoom: 1; } /* IE7 */
The main point of this solution is to trigger thehasLayoutproperty of the div. Fortunately it is enough for IE 6/7 to set the zoom to 1 in order to trigger that. Modern browsers which support the:afterpseudo element can use the first statement, which is cleaner and does not affect the overflow property.
Please note that you should avoid using the!importantstatement as suggested in the earlier answer as that is not good css. Moreover it will not allow you to control the height of the div if you wish to and does not do anything to solve the problem.
It's 2016. A good way of doing this is using flex property.
.container {
display: flex;
flex-wrap: wrap;
}
Then the child element can get rid of the old magical float property.
Check out this JSFiddle to see the effect.
Note: when the heights of children elements are not uniform, the flex way will behave differently with the float way. But it is hard to tell which one is correct.
container{
overflow: auto;
}
Insert the following at the end, before the enclosing the container
<div style="clear:both"></div>
The container will automatically expand to the the last clear:both
I have two rows:
<div>
The first row
</div>
<div>
The <span class="boxed">second</span> row
</div>
The word "second" is in a yellow box with padding:
* { box-sizing: border-box; }
div { border: 1px solid black; }
.boxed {
background: yellow;
padding: 0.5em;
}
As you can see I am using the border-box model. But the yellow box does not. Or does it?
I expected the second row to be as high as the yellow box, but that did not happen. There is no float, no CSS position, but still the yellow box overflows the div. How can I make the second div row contain the yellow box inside of it?
There is a fiddle here: http://jsfiddle.net/lborgman/9xEgA/
Inline boxes are not affected by box-sizing since they are never affected by the width and height properties. When you add padding to inline boxes, all that does is cause their backgrounds to expand, pushing only their left and right edges away from surrounding content, but not their top and bottom edges (since the line height is not altered). That's why it overflows. See sections 10.6.1 and 10.8 of the spec for more details.
If you want to hide the overflow, use overflow: hidden:
div { border: 1px solid black; overflow: hidden; }
Otherwise, if you want to make the second row expand to contain the yellow box, you might be able to make the yellow box display: inline-block without any adverse side-effects:
.boxed {
display: inline-block;
background: yellow;
padding: 0.5em;
}
Try adding display: block to the span. Inline block elements sometimes alter the document flow in strange ways when you do things like add padding to them. See this updated fiddle
You can use display: inline-block property for your .boxed span.
.boxed {
background: yellow;
display: inline-block;
padding: 0.5em;
}
JSFiddle
Look at my html + css code: http://jsfiddle.net/nP39E/1/
I'll explain if don't understand what I want to achieve:
I want a page with a div which floating right and takes 250px width and a div that takes width of the rest of the document.
In the left div, you can see that I have some other floating elements, and their heights are effected from the right div. You can see the first (red) row with height that align with the right bar's height and has nothing to do with the real content of its content.
I use group class in order to handle the common floating problem: .group:after { content: ""; display: table; clear: both; }
Can you tell me why it happens?
I just changed CSS for the content div from the last answer:
.content {
background: #888;
padding: 10px;
position: absolute;
right: 270px;
left: 0;
}
http://jsfiddle.net/nP39E/4/
What you think?
display: table isn't meant to be used for layouts like this, it's more useful for specific equal-height situations.
Properly floating the divs and not using the margin-right to push the left div will work:
.content {
background: #888;
padding: 10px;
float: left;
width: 250px;
}
Fiddle
You are giving margin-right:270px which is wider than the available space,So just remove that. Also you should make content float:left.
.content {
background: #888;
padding: 10px;
float:left;
}
JSFiddle : http://jsfiddle.net/ankur1990/nP39E/3/
I have several divs inside another div (let's call it container) and I was wondering if it possible to extend the width of a child div to go beyond the width of the container div.
It's easier to explain if you could take a look at this jsfiddle.
Currently, the container div has the width of 80% and so do all the child divs. I want to extend the width of the first div to 100% so that it completely fills the page horizontally.
How would I achieve this?
By the way, the reason I want to do this because I use the grid structure provided by this and it requires that eveything must be included inside a container div in order to get the features provided by the structure.
EDIT: I just realized the width of the container div is specified in px, and not in % as in the jsfiddle example. So setting the width of the child div to 120% does not guarantee to fill the page horizontally. How should I approach my problem? The only way I can think of right now is to get the width of screen in px, but I don't think that is possible in CSS.
I wouldn't do this but it seems to work:
#greendiv {
width:120%;
margin-left:-10%;
background-color: green;
}
See the Fiddle.
Why can't the #greendiv be before the .container or some other wrapper div?
Edit. Turn you thinking upside down (not really, just make a custom container inside mandatory container, here the .yellowdivs are custom containers and the #greendiv is the full width container inside container):
.container {
width: 100%;//or some amount of pixels and the yellow divs follow that setting
margin: 0px auto;
}
.yellowdiv {
width:80%;
margin-left:10%;
border: solid 1px;
background-color: yellow;
}
#greendiv {
background-color: green;
}
See the Fiddle.
If the parent container is centrally-aligned, you can use negative margins on both left and right sides:
#greendiv {
background-color: green;
margin: 0 -12.5%;
}
See fiddle here - http://jsfiddle.net/CtsTQ/12/
Add overflow:visible to your parent div which is .container.
.container {
width: 80%;
margin: 0px auto;
overflow:visible;
}
#greendiv {
background-color: green;
width:500px;
}
LIVE DEMO
Well I got what you asked for by doing this:
#greendiv {
background-color: green;
width: 140%;
margin-left: -20%;
}
But this is not a good practice I think...
Its usually not a good idea to extend stuff beyond wrapper containers but if I had to do it I would most definitely use relative positioning like this.
#greendiv {
position:relative;
left:-10%;
width:120%;
background-color: green;
}
You could also use other units like px to achieve more precise results.