Hi there,
I'm trying to make a div's width to be automatically increased/decreased based on it's child elements width inside the div. However the elements inside always overflow outside the div as if they were standalone elements.
<div id='item_stats_info'>
<div id='item_name'> Name </div>
<div id='item_attr1'> Attribute </div>
<div id='item_req_lvl'> Level X</div>
<div id='item_buy_cost'>
<div>
4000000 <img src="path_to_img">
10 <img src="path_to_img">
</div>
</div>
</div>
see more here:
Fiddle
Can anyone help me with this?
In your css, remove the width: 90px; and add float: left;
Replace this in your css:
div#item_stats_info {
background-color: rgba(41, 53, 59, 0.4);
border: 1px solid #000;
color: black;
float: left;
min-height: 100px;
min-width: 80px;
opacity: 1;
padding-top: 2px;
position: relative;
text-align: left;
/*width: 90px;*/
z-index: 25;
}
Related
I have this code here:
<div style="border:3px solid #808080;">
<h1 style="text-transform: uppercase;font-size: 38px;color: #808080;text-align: center;">Lowell</h1>
<div class="column-1">
<img src="images/ruler-icon.png">
</div>
<div class="column-2">
<img src="images/bed-icon.png">
</div>
<div class="column-3">
<img src="images/bath-icon.png">
</div>
</div>
my problem is that the border does not go over the column-1, column-2, column-3...those elements are floating left, how do I get them to be included in the border?
Here is the CSS
.column-1, .column-2, .column-3
{
float:left;
width: 33%;
border-right: 3px solid #808080;
height: 52px;
padding: 10px;
}
Either add a div in parent with clear:both property right after the floated divs as mentioned by RemyaJ. like this
https://jsfiddle.net/zmasvt8b/
Or
Simply give overflow:hidden property to the parent div. Like this
https://jsfiddle.net/jv5xtLg9/
I realize you've already chosen an answer, but here is an alternative - using flexbox. I also separated all the CSS from the HTML (like it should be!)
.container {
/* Important for columns */
display: -webkit-flex;
display: flex;
}
.item {
/* Important for columns */
flex-grow: 1;
border: 3px solid #808080;
border-top: none;
height: 52px;
padding: 10px;
}
.heading {
border: 3px solid #808080;
margin: 0;
text-transform: uppercase;
font-size: 38px;
color: #808080;
text-align: center;
}
/* Remove duplicate borders */
.item-2 {
border-left: none;
border-right: none;
}
<h1 class="heading">Lowell</h1>
<div class="container">
<div class="item item-1">
<img src="images/ruler-icon.png">
</div>
<div class="item item-2">
<img src="images/bed-icon.png">
</div>
<div class="item item-3">
<img src="images/bath-icon.png">
</div>
</div>
Add a div with style clear:both after the floated divs inside parent div. This will hopefully fix this issue.
I think this is the css you need. Choose the width according to your needs.
.column-1, .column-2, .column-3
{
width: 30%;
border-right: 3px solid #808080;
height: 52px;
padding: 10px;
display:inline-block;
}
The reason for this is that parent elements are never to contain floated elements. To make this happen, just add overflow:auto; to your main div. That will force the div to contain floated elements that "overflow" the container.
There are other, probably better ways to accomplish the same thing but this is the easiest.
Never, ever add HTML elements to do what CSS can and should do.
I have two divs inside a div. I want the second div to fill up to the bottom of the container. I tried various height: 100%;, height: inherit;, height: auto;, etc. and different values for display css property, but didn't succeed. Please help.
Html:
<div style='height: 100px; width: 100px; background-color: black; border: 3px solid black;'>
<div style='background-color: red;'>
<label>Test</label>
</div>
<div style='height: inherit; background-color: green;'>
</div>
</div>
Fiddle
Note: The second div has some rows and then a footer. I want the rows to be hidden as per the height. But the footer of the second div should be visible.
Another note:
The container is re-sizable (using JQuery Re-size). Hence I do not want to set the height of the second div. That will make it static. I want the second div to have dynamic height. i.e. Expanding yo the bottom of the container, always.
Try This
**overflow:hidden;**
<div style='height: 100px; width: 100px; background-color: black; border: 3px solid black;overflow:hidden;'>
<div style='background-color: red;'>
<label>Test</label>
</div>
<div style='height: inherit; background-color: green;'>
</div>
</div>
Or Else you have to master div height auto and inner keep 100% some content inside.
<div style='height: auto; width: 100px; background-color: black; border: 3px solid black;'>
<div style='background-color: red;'>
<label>Test</label>
</div>
<div style='height: 100%; background-color: green;'>
</div>
</div>
when you do height: inherit;, the target container acquires the height of parent, that's why, your inner green div is taking height:100px and hence it is overshooting.
You should NOT DO overflow:hidden, as it will eat up your lower content.
What you should do is to either give percentage height to both your containers like
<div id="parentDiv" style='height: 100px; width: 100px;
background-color: black; border: 3px solid black;'>
<div id="topDiv" style='background-color: red;height:30%'>
<label>Test</label>
</div>
<div id="lowerDiv" style='height: 70%; background-color: green;'>
</div>
</div>
or use javascript to set height of your containers, something like
$(window).resize(function(){
var _heightT= $('#parentDiv').height();
$('#topDiv').height(_height*0.3);
$('#lowerDiv').height(_height*0.7);
})
I would suggest to give your Parent container a fixed height(deduced according to the window size, through javascript/jQuery), so that it is consistent across all browsers, and your inner containers, a percentage height, or atleast your top container a fixed height, and lower container a min-height and overflow-y:auto
How about something like this:
HTML:
<div id="con">
<div id="top">
<label>Test</label>
</div>
<div id="bottom">sdsdfsdfsdfs sdfs dfsdf sdf sd ff</div>
</div>
CSS:
#con {
height: 200px;
width: 100px;
background-color: black;
border: 3px solid black;
position: relative;
}
#top {
background-color: red;
position: absolute;
width: 100%;
}
#bottom {
top: 0px;
left: 0px;
background-color: #F5F5F5;
width: 100%;
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: green;
}
Take a look and see what you think. (you will have to push down inside to put text etc using padding-top: 20px;
DEMO HERE
Very simple:
<div style='overflow:hidden;height: 100px; width: 100px; background-color: black; border: 3px solid black;'>
<div style='background-color: red;'>
<label>Test</label>
</div>
<div style='height: inherit; background-color: green;'>
</div>
</div>
You could use a percentage based height like you suggested, but the thing is when you set the bottom div to height:100%; that means 100% of the parent div's height which is 100px and it'll go outside the box, instead you could give the top div a 25% height and the bottom div 75% height, like this:
<div style='height: 100px; width: 100px; background-color: black; border: 3px solid black;'>
<div style='height:25%; background-color: red;'>
<label>Test</label>
</div>
<div style='height: 75%; background-color: green;'>
</div>
</div>
Fiddle
When you do height:inherit, it takes the height value from the parent div, which is the same as saying height:100%. But this causes the div to overflow because there is another inner-div child inside the main container div, which is taking a height equal to the default line-height of the label tag. You can try giving the inner div tags separate heights:
HTML:(same as your markup, just adding classes so you don't have to give inline styling)
<div class="p">
<div class="c1">
<label>Test</label>
</div>
<div class="c2"></div>
</div>
CSS:
.p {
height: 100px;
width: 100px;
background-color: black;
border: 3px solid black;
}
.c1 {
height:20%;
background-color: red;
}
.c2 {
height: 80%;
background-color: green;
}
DEMO
You can do this with display:table property in CSS. See more
Add display:table to the wrap div and display:table-row for the children.
Working Demo
UPDATE
According that we don't want to use overflow:hidden
Updated FIDDLE
<div style='height: auto; width: 100px; background-color: black; border: 3px solid black;'>
<div style='background-color: red;'>
<label>Header</label>
</div>
<div style='height: 100%; background-color: green;'>
<label>Body</label>
<p>Some text here</p>
<p>Some text here</p>
<p>Some text here</p>
<p>Some text here</p>
</div>
</div>
i got problem with setting my layout right, elemnts doesn't align way i want to and i'm running out of ideas, or repeat same misteakes.
There is wrapper(green) thats fits its size to page width, container that i want to center (blue) that shrinks or expands depending on page width and then rectangular elements(brown) that i want to center inside container (blue) and allow them to rearrange according to width of container (size and amount is not constant)
HTML
<div id="tiles_wrap">
<div id="tiles">
<div class="tilewrap">
<div class="tilebg">
<div class="ribbon">aaab</div>
</div>
</div>
<div class="tilewrap">
<div class="tilebg">
<div class="ribbon">aaav</div>
</div>
</div>
<div class="tilewrap">
<div class="tilebg">
<div class="ribbon">aaaa</div>
</div>
</div>
<div class="tilewrap">
<div class="tilebg">
<div class="ribbon">bbbv</div>
</div>
</div>
</div>
</div>
CSS
#tiles_wrap {
width: 100%;
display:block;
position: relative;
background-color: rgba(0, 255, 0, 0.3);
float: left;
padding-left:25%;
padding-right:25%;
}
#tiles {
margin: 0 auto;
height: 100%;
display:block;
float: center;
Padding: 40px;
line-height: 0.7em;
font-size: 12px;
background-color: rgba(0, 0, 255, 0.3);
}
.tilewrap {
padding: 5px;
float: left;
}
.tilebg {
height: 55px;
width: 70px;
background-color: brown;
display:block;
position: relative;
float:left;
}
.ribbon {
color: #fff;
padding:2px;
background-color: rgba(255, 0, 0, 0.5);
display:block;
position: absolute;
z-ndex: 22;
}
Thanks in advance fr all help!
You can't use float for this, there is no float: center; so that's one of your problems. Also, absolutely positioning elements tends to fix them to a particular spot, so they're not very good for centering and re-arranging depending on width of container.
You can, however, use display: inline-block; along with text-align: center; to do what you're after.
Also, don't forget that if you set the width of an object to 100%, then add 25% padding on the left and right sides, you are making the total width of that object 150% of its parent (in the normal content-box model.)
http://jsfiddle.net/UQ34L/1/
To get the blue to center, you need to set a width for #tiles, then remove the padding from #tiles_wrap. There is no such thing as float:center, so that is ignored.
Try this
#tiles_wrap {
width: 100%;
display: block;
background-color: rgba(0, 255, 0, 0.3);
float: left;
}
#tiles {
width: 65%;
margin: 0 auto;
Padding: 40px;
font-size: 12px;
background-color: rgba(0, 0, 255, 0.3);}
Try this
JSFiddle
As suggested by others, I've added display: inline-block to get the divs to sit alongside each other. As well as this, I added a wrapper div with id="wrapper" and applied a text-align: center to have the tiles align in the center.
Also I added a div with id="tiles_left" for the left margin div with a width of 30% and removed your "tiles_wrap" div as it is not needed with the changes I made. The "tiles" div with a width of 70%
<div id="tiles_left">
hello
</div>
<div id="tiles">
<div id="wrapper">
<div class="tilewrap">
<div class="tilebg">
<div class="ribbon">aaab</div>
</div>
</div>
<div class="tilewrap">
<div class="tilebg">
<div class="ribbon">aaav</div>
</div>
</div>
<div class="tilewrap">
<div class="tilebg">
<div class="ribbon">aaaa</div>
</div>
</div>
<div class="tilewrap">
<div class="tilebg">
<div class="ribbon">bbbv</div>
</div>
</div>
</div>
I've searched the many similar questions like this, but none of the solutions are working. It should also be noted that I am using twitter bootstrap. I want a bunch of divs to span the entire length of the parent div at the bottom of it. I have tried putting them inside a div that text-align:center and then using float-left inside the gridPics class, and using display: inline-block, text-align :left and nothing seems to do it. The two in the example below are in the exact same spot, and I want them side by side. Here is what I have:
HTML:
<div class="row-fluid">
<div class="span8 offset2 articleContent">
<!-- These are the divs to span across, when it works there would be more than two -->
<div class="gridPics"></div>
<div class="gridPics"></div>
<!-- They will also go over this image -->
<img id="sidePic" src="img/about/aboutHeader_Mid1.png" alt="about">
</div>
<div class="span2"></div>
</div>
CSS:
.gridPics{
position: absolute;
z-index: 1;
width: 10%;
height: 20%;
background: #0000b3;
bottom: 0;
float: left;
}
.articleContent{
position: relative;
box-shadow: 0 0 5px 5px #888;
}
#sidePic{
position: relative;
z-index: -1;
}
Here is where I am doing this, the blue divs would be pics (akin to thumbnails) that can be clicked. I want them to go all the way across:
/ScreenShot2013-01-09at85450PM_zps550e8e4a.png[/IMG]
Here's a fiddle:
http://jsfiddle.net/pureux/Er9eG/
You need a container for your gridPics and have it be absolute positioned (instead of the gridPics) at the bottom. Then float the gridPics inside of the container.
.picContainer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
min-height: 50px;
}
.gridPics {
width: 50px;
height: 50px;
float: left;
display: block;
margin-right: 4px;
margin-top: 4px;
}
Is this what you're trying to do:DEMO
HTML
<div class="row-fluid">
<div class="span8 offset2 articleContent">
<div class="gridPics"></div>
<div class="gridPics"></div>
<div class="clear"></div>
<img id="sidePic" src="img/about/aboutHeader_Mid1.png" alt="about">
</div>
<div class="span2"></div>
</div>
CSS
.gridPics{
width: 10%;
height: 20px;
background: #0000b3;
float: left;
border:solid #FFF 1px;
}
.articleContent{
box-shadow: 0 0 5px 5px #888;
}
#sidePic{
z-index: -1;
}
I am a iPhone developer stuck with some basic CSS properties ;)
I want to show something like this:
This is what I have:
<div class="cell">
<div class="cell_3x3_top">
<div class="cell_3x3_type rounded_left">type</div> <!--UPDATED:2010/09/29-->
<div class="cell_3x3_title rounded_right">title</div><!--UPDATED:2010/09/29-->
</div>
<div class="cell_3x3_content rounded_left rounded_right">content</div><!--UPDATED:2010/09/29-->
</div>
and the css:
div.cell_3x3_top{
height:20%;
margin: 0 0 0 0;
padding: 0 0 0 0;
border: none;
margin-bottom: 1px; /*to compensate space between top and content*/
text-align: center;
vertical-align: middle;
}
div.cell_3x3_type{
width:20%;
float:left;
background-color: inherit;
margin-right: -2px; /*UPDATED:2010/09/29*/
}
div.cell_3x3_title{
width:80%;
float:left;
background-color: inherit;
margin: 0 0 0 0; /* maybe not neccesary*/
padding: 0 0 0 0; /*maybe not neccesary*/
margin-left: -1px; /*UPDATED:2010/09/29 */
}
div.cell_3x3_content{
height:80%;
background-color: inherit;
}
But when I render my content with above code title div seems to be too large and it appears underneath type div, Why is this?
type div is 20% width, title is 80% width so it should be 100% exactly. Is any margin or other metric I am forgetting here?
I have tried to move title div to the left using margin but is still buggy. I wonder what is the correct way of getting something like the picture?
(Not exactly because if you look closer title div is a little bit shorter than it should be. See that its right border is not aligned with content div.)
Thanks in advance.
EDIT: 2010/09/28
This is actually what I want to achieve:
and this is what I have:
Above code (updated a little bit) would work if I wouldn't have bordered divs. Since border width is 1px what I need is to set type div width to 20%-2px (left border + right border = 2px) and title div to 80%-2px
.rounded_left{
border-top-left-radius: 4px 4px;
border-bottom-left-radius: 4px 4px;
border-color:gray;
border-width: 1px;
border-style:solid;
}
(.rounded_right is similar)
This is not related to clear:both property I believe. I tried and didn't had any effect since my content div was good form the beginning.
In short: How can I make a div including its border to be let's say exactly 20% width?
Ignacio
ANSWER:
I realized that a wrapper div around type and title respectively solves the problem. So my answer is kind of like this:
<td class="cell">
<div class="cell_3x3_top bordered">
<div class="cell_3x3_type_container"><div class="cell_3x3_type rounded_left full_height">6</div></div>
<div class="cell_3x3_title_container"><div class="cell_3x3_title rounded_right full_height">title</div></div> </div>
<div class="cell_3x3_content rounded_left rounded_right">content</div>
</td>
I set 20% and 80% in the containers and the borders in the inner div.
You are missing a clearing div. The floating elements do not expand the .cell_3x3_type div as you would expect. Try this instead:
<div class="cell">
<div class="cell_3x3_top">
<div class="cell_3x3_type">type</div>
<div class="cell_3x3_title">title</div>
<div class="cell_3x3_clear"></div>
</div>
<div class="cell_3x3_content">content</div>
</div>
CSS:
div.cell_3x3_clear {
clear: both;
}
The rest remains the same.
EDIT:
A small explanation of what the clear property does: consider a container div that contains only floated elements, like this (using inline CSS for clarity):
<div id="container" style="border: 1px solid green;">
<div style="float: left; height: 30px; width: 30px; border: 1px solid red;"></div>
<div style="float: left; height: 20px; width: 20px; border: 1px solid blue;"></div>
</div>
(source: fii.cz)
The height of the container div is 0 because the floating elements are taken out of the document flow and do not affect the height of their container anymore. The clear: both property on an element "clears" all floats, i.e. makes sure that the element is placed below all floating elements that precede it:
<div style="float: left; height: 30px; width: 30px; border: 1px solid red;"></div>
<div style="float: left; height: 20px; width: 20px; border: 1px solid blue;"></div>
<div style="clear: both; height: 10px; width: 50px; border: 1px solid black;">Cleared</div>
(source: fii.cz)
If you combine the two above examples, you can force the container div to have its height equal to the height of the highest floating element in it:
<div id="container" style="border: 2px solid green;">
<div style="float: left; height: 30px; width: 30px; border: 1px solid red;"></div>
<div style="float: left; height: 20px; width: 20px; border: 1px solid blue;"></div>
<div style="clear: both; height: 0px; border: 1px solid black;"></div>
</div>
(source: fii.cz)