I have 2 nested divs and outer one has width:100%
<div id="#outer" style="width:100%; border:1px">
<div id="#inner" style="width:100%; border:1px; margin:4px">
something inside ...
</div>
</div>
But in this case inner div exceeds width of outer by 8px (margins).
How to make inner div to get width of outer div minus 8px margin?
P.S. All styles are in separate classes in my case, here I putted CSS into style attributes just for simplification.
Taking away the width on the inner div should work, width: auto; will work with margins, and expand to the maximum horizontal area:
<div id="#outer" style="width:100%; border: solid 1px red;">
<div id="#inner" style="border:solid 1px green; margin:4px">
something inside ...
</div>
</div>
Here are some styles that work if you remove the ones directly on the elements. I used auto on the inner CSS and a margin-right = 8px. To make it easier to see I made the inner green and the outer black.
#outer
{
width: 100%;
border: 1px solid black;
}
#inner
{
width: auto;
border: 1px solid green;
margin-right: 8px;
}
Related
I'm trying to get a parent div tag to hold n children div tags such that they are all on the same line, yet grouped together in the center. For example:
Here the children are blue, and the parent is red.
Here are the things I've tried:
Making blue divs display:inline to get them on the same line. Problems: doesn't display even with its width and height both set to 10px.I tried adding , but it only was a couple pixels wide.
Making blue divs float:left. Problems: Have to programmatically resize red parent to child contents since the divs are floated and then center in its parent to get what I want. There should be a solution that doesn't involve javascript.
For IE6 and IE7 compatibility you might have to add zoom:1; and *display:inline; to your child CSS
jsFiddle
.parent {width:100%;border:1px solid red;text-align:center;}
.child {width:15%;display:inline-block;border:1px solid blue;}
<style>
.container {
width: 100%;
padding: 0;
text-align: center;
border: 1px solid red;
}
.inner {
display: inline-block;
margin: 0 5px;
border: 1px solid blue;
}
</style>
<div class="container">
<div class="inner">
one
</div>
<div class="inner">
two
</div>
<div class="inner">
three
</div>
</div>
Stick the blue divs in a container div. Find their widths (margin and padding included) and give the container div that width. Then set the container div's margin to 0 auto, stick it in the red div and you should be fine.
Try to use display: inline-block;:
.child {
display: inline-block;
...
}
http://jsfiddle.net/mupuR/
Some html:
<div style="height: 300px">
<div id="inner">
<div id="title">
...
</div>
<div id="content">
....
</div>
<div>
..another div
</div>
</div>
</div>
I want my inner div height to be not greater than parent div's and if it is greater then content div should have scroll, but if it is smaller it should be the same size with it's content.
I've tried to set inner's max_height=100%, but I can't make my content have scroll.
I want to do it without js
UPD: I do not know main div's height (300px is not constant)
UPD2: My main div has "max-height: 100%", so I do not know exact value
Demo:
http://jsfiddle.net/kzfRk/7/
Not sure I understand, but if your scroll bars are not appearing try:
#inner{overflow-y:scroll;}
Is this what you had in mind? (colours are just for ease of viewing) See live here.
css
.container{
height: 300px;
overflow: hidden;
border: 1px solid #000;
}
#inner{
max-height:300px;
overflow-y: auto; border: 1px solid #f00;
}
#title{ background-color: #eed;}
#content{background-color: #fee;}
html
<div class='container'>
<div id="inner">
<div id="title">
...
</div>
<div id="content">
....
</div>
<div>
..another div
</div>
</div>
</div>
Do you have a live example? It's difficult to work out what you are trying to do.
Do you want the parent div to fill the screen and the content to scroll withing it? If so, give your parent div a height of 100% and try applying the following style to your inner div:
height:100%; min-height: 100%; overflow:auto;
You set your height then use overflow to control the scrolling.
#inner{max-height:100%;overflow-y:scroll;}
Example: http://jsfiddle.net/calder12/drC3L/ Change the size of the outer div to anything you want, if there is too much content the inner div will scroll.
You need to set the inner div maximum height the same as the root div height. Using your fiddle, copy and paste the CSS below into your CSS file and it will work...
.container{
max-height: 100%;
border: 1px solid #000;
}
.inner{
max-height: 100px;
overflow-y: auto; border: 1px solid #f00;
}
.root{
height: 100px;
border: 1px solid;
}
I have a problem which I do not understand.
If I use percentage in width, I would expect that elements calculate borders, margins or paddings within their size (in percentage).
But in fact those values are added to their size which I asume is wrong.
Is my expectation wrong?
The bellow example shows the issue. The both "divs" "left" and "right" I expect to be in a single line. If I remove "border" it works as expected.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
border: 1px solid black;
width: 100%;
overflow: auto;
}
.left {
border: 1px solid black;
width: 20%;
float: left;
}
.right {
border: 1px solid black;
width: 80%;
float: left;
}
</style>
</head>
<body>
<div class="center">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
What you can do to fix this issue is to use box-sizing. See http://jsfiddle.net/Marwelln/YYkxK/
box-sizing:border-box
That's totally normal. It's not what you might expect at first, but CSS works that way.
Even without percentages:
#width {
width: 100px;
padding: 0 20px;
}
This #width div will occupy 140px. Works the same for percentages.
So you might need inner divs to achieve what you want.
<div class="left">
<div class="inner">
</div>
</div>
<div class="right">
<div class="inner">
</div>
</div>
.inner { padding: 10px; }
.right .inner { border-left: 1px solid #ccc; }
Padding or Border always adds to an elements size, inside out.
Margin never adds to size but adds space outside the element.
Percentages or set values don't matter. The above is always true.
Reviewing the box model may help ---> HERE
When you use percentage as width (or height) values, these are the percentage of the width (or height) of the parent block element (containing block).
In super modern browsers you can use calc() to fix this: calc(80% - 2px). And yes, it is normal. If you set the width to 100px and border to 150px what would happen then if border wasnt added?
I have a box that has the div class box_1 assigned to it.
Now i want to give this class a width but also make it expandable.
If i just try to give it a value of auto, It will just expand to the end of the screen. thats not what i want. So say i give it a width of 4 inches but the content inside the div requires more space (dynamic content), it will need to be expanded. any ideas on how i could make it expandable (only when it needs to be expanded) and also give it a 'default width'?
You can use the CSS propety min-width for this.
You can do it like this:
.box_1{
min-width: 4in;
}
Now the div would take up 4 inches by default if the content fits within it, and expand if needed.
Update :
Looking around i found this How to make div not larger than its contents?
So what you need is to use following css:
.box_1{
display: inline-block;
min-width: 4in;
}
This sets the minimum width to a specific amount and converts the element to inline-block. But as per the post linked above this does not work in IE 7/8, for that you would need to change the div to span.
Try it out here:
div => http://jsfiddle.net/TdNHs/
span => http://jsfiddle.net/TdNHs/1/
.box_1{
min-width: 0px !important;
}
it will get the small as possible and also expandable
ti will be at 0px, but.. hey, what's your default width anyway?
Update
http://jsfiddle.net/tbUUt/1/
I just used the content inside te expandable div some boxes, but you can remove them one by one and the div will resize.
#box_1{
border: 1px solid red;
display: inline-block;
}
<div id="box_1">
<div style="border:1px solid blue; width: 50px; height:50px;float:left;"></div>
<div style="border:1px solid blue; width: 50px; height:50px;float:left;"></div>
<div style="border:1px solid blue; width: 50px; height:50px;float:left;"></div>
<div style="border:1px solid blue; width: 50px; height:50px;float:left;"></div>
<div style="border:1px solid blue; width: 50px; height:50px;float:left;"></div>
</div>
I am floating a couple divs inside a container div & the first div has a border on the right. It works correctly WITHOUT the border, but when I add the border it all messes up & the text inside the container on the right displays itself under the border from the other div.
To show you what I mean here is a picture:
Here is my code:
<div style="margin: 0px auto; width: 500px; border: 1px solid #000;">
<div style="width: 500px; border-bottom: 1px solid #000;">
<div style="float: left; width: 250px;">Resolution/Megapixels</div>
<div style="float: right; width: 250px;">Average Quality Size/Best Quality Size</div>
<div style="clear: both;"></div>
</div>
<div style="width: 500px; border-bottom: 1px solid #000;">
<div style="float: left; width: 250px; border-right: 1px solid #000;">0.5 megapixels</div>
<div style="float: right; width: 250px;">3x5 inches/NA</div>
<div style="clear: both;"></div>
</div>
</div>
Edit:
Please disregard. Worked it out as soon as I posted this.
You're border is making the box too wide. Need to set the left div (with the border) to 249 so that it adds up to 250px with the border.
it is because adding a boarder to an element will add the border width to the elements width so your border is making the "3x5 inches" is actually 251px wide forcing it down as it can't fit next to a 250px width element in a 500px container, just reduce one of the 250px divs by 1px to 249px
NVM... I'm a fool. Realized right after I posted this I had to decrease the first div's size by 1 because of the border size.