I have JS generated content and want a div EXACTLY around it.
I don't know why, but the div parent is always 100% wide.
I thought I have div width: 100% somewhere, but surprisingly it looks almost the same in jsfiddle:
http://jsfiddle.net/f2BXx/2/
So why the outer div is always 100% wide? And how to fix that? I was trying with display: inline, but it sets width to 0px ;/
CSS:
.outer {
border: solid 1px red;
}
.item {
height: 300px;
width: 400px;
border: solid 1px blue;
}
.allright {
height: 300px;
width: 400px;
border: solid 1px blue;
outline: solid 1px red;
}
HTML:
<p>I don't know where "outer" div 100% width comes from?</p>
<div class="outer">
<div class="item">
<p>Something big!</p>
</div>
</div>
I always thought it'd look like that:
<div class="allright"></div>
I can't set outer div width (width: xxxpx) because all the content is dynamically created.
It sounds like you need to read the Visual Formatting Model.
display: block; causes block-level items to automatically fill their parent container.
CSS is designed in a way that lends itself to the child elements filling their parents, rather than the parents conforming to the children.
div is block element.
Block elements are 100% width of parent element, if width is not specified.
it's taking up all the available space based on it's parent container, exactly what it's supposed to do. If you want it to be a specific width set the width:; of the element.
If you find the w3.org documentation a little bit dry or too technical, here is a more accessible explanation of the CSS box model: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
Related
I am trying to design a responsive web page so I am trying to avoid using pixel values. But sometimes, for example when trying to limit the width of a text containing div, I cannot use percentages since the width of the contianer is not known and going to be determined by the content inside. And due to the way CSS works, I cannot give a width value with reference to the container div higher in the html hierarchy.
So I thought of using vw, but since I am using min-width, max-width values on the body, it will not work properly outside those values. What can I use instead to refer to the body width?
Edit:
Since an example was asked for, I provided below an example whereby percentage did not work. Trying to make the span width 10% of the outermost container with no luck. Here is the jsfiddle link also: https://jsfiddle.net/68ha60p6/
html,body{
width:100%;
height:100%;
padding:0;
margin:0;
}
<div style="width:100%; height:60px;">
<div style="float:right; height:100%;padding-right:1%">
<button style="display:inline-block; height:70%;background-color:green; color:white;border:none; padding:0;">
<span style="display:inline-block; max-width:10%; text-overflow:ellipses;overflow:hidden; max-height:100%;text-align:center;white-space:no-wrap;">John John</span>
</button>
</div>
</div>
I cannot give a width value with reference to the container div higher
in the html hierarchy.
You absolutely can.
Have a look at the example below.
You'll see that the width of the parent container is not explicitly stated (it's determined by the content of the first subcontainer). Regardless, the second subcontainer's width is 50% of its parent's.
div {
margin: 6px;
padding: 6px;
}
.container {
display: inline-block;
border: 1px solid rgb(255,0,0);
}
.subcontainer1 {
border: 1px solid rgb(0,0,255);
}
.subcontainer2 {
width: 50%;
margin: 6px;
border: 1px solid rgb(0,255,0);
}
div p {
line-height: 60px;
}
<div class="container">
<div class="subcontainer1">
<p>I am a long sentence and I will define the width both of this sub-container and of the overall parent container.
</div>
<div class="subcontainer2">
<p>I am half the width of the overall parent container.</p>
</div>
</div>
I have a parent div and child div. The child div width set to 100%.
Both have borders on them of 2px.
What is strange is the left edge of the child div shows up while the right edge seems to be covered up by the parent div.
Changing margin on child div or padding on parent div doesn't seem to do the trick.
Resizing child width to something lower than 100% seems to work but don't want to do that and not sure why it is happening?
FIDDLE: http://jsfiddle.net/Boovius/8armB/2/
HTML
<body>
<div id='parent'>
<div class='child'></div>
</div>
</body>
CSS
#parent {
height: 550px;
width: 400px;
margin: 0 auto;
border: 2px solid
overflow: scroll;
}
.child {
width: 100%;
height: 50px;
border: 2px solid
}
Border is included in width calculations by default. Change (or simply remove) your width or your box-sizing mode:
http://jsfiddle.net/isherwood/8armB/3/
.child {
box-sizing: border-box;
}
http://css-tricks.com/box-sizing/
If you don't change the display-property, divs are rendered as block elements and therefore always fill the whole width of their parent elements. Depends on how realistic you example is, but in that case just remove the width on the child div.
http://jsfiddle.net/8armB/4/
With CSS alone, is it possible to obtain the following example, http://jsfiddle.net/LdJ7t/, without explicity knowing the child element's width before hand?
The final result desired:
parent element scrollable to child element
child element's width set to content
#Parent {
width: 100px;
height:200px;
background: #ccc;
overflow:auto;
padding: .5em;
margin: .5em;
}
#Child {
width:300px;
height:100px;
background:yellow;
}
<div id="Parent">
<div id="Child">
This is a test. This is a test.
</div>
</div>
It looks like display:inline-block; almost works: http://jsfiddle.net/LdJ7t/1/
I think this is possible. I just can't find a solution.
Your inline-block solution is correct - if you put longer words in or an image, the scrollbar will appear. Text is broken on white space by default.
If you don't want text breaking on white space, you can add white-space: nowrap; to the child div like here: http://jsfiddle.net/LdJ7t/2/
I have a content div where all the content is located. this div has a border. I would like to place things inside this div so that this div expands if the content inside is too big. Should the items inside the content div be a "div" or a "p" and what css position should they have?
CSS:
#content{
position: relative;
margin-left: auto;
margin-right: auto;
border: 1px solid #E0E0E0;
min-height: 200px;
width: 1000px;
padding: 0px 0px 80px 0px;
background-color: #fff;
}
When you set width: 1000px; it will prevent the content div from being any wider. I suspect you want min-width: 1000px; instead.
For internal content use p tags if you are creating paragraphs that only use inline html elements. If you are using block level elements then use div tags.
I can't say how you should style your internal elements because I know nothing about your design specs.
Contents of the #content div can be either p or div elements its up to you. The #content div will expand to the height of its content either way unless you have elements inside #content with a float property.
If that is that case you can do something like below to make the #content div expand its height.
<div id="content">
<div style="float:right; border:1px solid red; height:500px;"></div>
<div style="clear:both;"></div>
</div>
The important part here is the latest div with clear:both property which fixes the height of the parent element.
You should still be able to use a DIV. If you use height:auto; that should make it expand based on your content. Also I think you can use min-height:200px; and height:auto; together; With that said. I also agree with mrtsherman, if you set a width or height to a specific pixel it is going to limit you to those constraints.
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>