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/
Related
OK, so here is my problem,
I need to have four DIVs in one line. The First three are float:left and the fourth one is float:right. The container has a specified width.
I need the third div to fill all the space from the second div that is floated to the left, to the fourth div that is floated right.
EDIT: DIVs #1, #2 and #4 have dynamic width as well... They have a certain padding and the content defines the width.
Why not turn the question on its head, and establish how to create the layout you want- in which case, likely the simplest approach would be:
Demo Fiddle
HTML
<div class='table'>
<div class='cell'>fit</div>
<div class='cell'>fit</div>
<div class='cell'>expand</div>
<div class='cell'>fit</div>
</div>
CSS
.table {
display:table;
width:100%; /* <-- will make the divs align across the full browser width */
height:50px;
}
.cell {
display:table-cell;
border:1px solid red;
width:1%; /* <-- will make 1, 2, 4 only fit their content */
}
.cell:nth-child(3) {
width:100%; /* <-- will make 3 expand to the remaining space */
}
Solution Using Floated Elements
Here is one way of doing this using floats.
Arrange your HTML as follows:
<div class="panel-container">
<div class="panel p1">Panel 1 - and a word</div>
<div class="panel p2">Panel 2 - Done. </div>
<div class="panel p4">Panel 4 - End!</div>
<div class="panel p3">Panel 3</div>
</div>
and apply the following CSS:
.panel-container {
width: 600px;
border: 1px dotted blue;
overflow: auto;
}
.panel {
background-color: lightgray;
padding: 5px;
}
.p1 {
float: left;
}
.p2 {
float: left;
}
.p3 {
background-color: tan;
overflow: auto;
}
.p4 {
float: right;
}
The trick is to place the floated elements (.p1, .p2. .p4) ahead of the in-flow content (.p3).
Use overflow: auto on the parent container to keep the floated child elements from affecting the layout outside of the parent element.
I added overflow: auto on .p3 so that the padding gets included within the containing block.
See fiddle at: http://jsfiddle.net/audetwebdesign/9G8rT/
Comments
The one disadvantage of this approach is that the order of the content is altered, that is, .p3 appears after .p4 in the code order.
Another side effect, which may be desirable in a responsive design, is that the child elements will wrap onto 2 or more lines as the parent container width gets smaller.
If you need to retain the content order in the HTML code, the CSS table-cell solution is a good alterantive.
The table-cell solution will keep the child elements on a single line regardless of the width of the parent container.
One final advangtage of the floated element solution is that it is more backward compatible than a CSS table-cell solution, but as we move forward, this is becoming less
of a compelling argument.
This question already has answers here:
How to match width of text to width of dynamically sized image/title?
(2 answers)
Closed 2 years ago.
Say, a parent div has two child divs, one containing text, the other containing an image of known (but variable) width & height.
I would like
the width of the first child (image-containing) div to shrink to fit the width of the image (this i can do)
the parent div (of unspecified width) to shrink to fit the width of the image-containing div (this is ok too)
the text-containing second child div (also of unspecified width) to match the parent div's width irrespective of the quantity of text it contains (this is where it gets tricky).
I have a working version that does what I want until the quantity of text in the second child pushes the parent div's width wider than that of the image.
Here's my code:
css:
#container{border:1px solid #f00;display:inline-block;}
#child1{border:1px solid #0f0;}
#child2{border:1px solid #00f;}
img {border:1px solid #000;}
html:
<div id="container">
<div id="child1"><img src="//www.google.com/logos/2012/Teachers_Day_Alt-2012-hp.jpg" width="300" height="116"></div>
<div id="child2">Lorem ipsum dolor sit amet.</div>
</div>
and here's a jsfiddle:
http://jsfiddle.net/BmbAS/1/
you can see where it's going wrong by clicking the 'lengthen/shorten text' link to increase the quantity of text
tldr - i want all the divs to be the same width which is equal to the width of the image
ps. modern browser solution only necessary
See this edited version of your jsFiddle.
Here's what's added to the CSS:
#container {
display: table-cell;
}
#child1 {
display: table-row;
width: 1px;
}
#child2 {
display: table-cell;
width: 1px;
}
The answer provided by #Chris leads me to the following, great solution of my case, where I need to fit the container div only to the first child element (and leave the rest child elements to auto fit to the container's width):
div.container {
width: fit-content;
max-width: 100%;
margin: 16px auto;
display: table;
}
div.inner-primary {
display: block;
}
div.inner-rest {
margin-top: 8px;
display: table-caption;
caption-side: bottom;
}
<div class="container">
<div class="inner-primary"><div style="width:200px; border:1px dotted #ccc; border-radius:4px; padding: 4px;">This is the main element that drives the width of the container.</div></div>
<div class="inner-rest">This is the first of the rest divs that fit automatically to the container...</div>
<div class="inner-rest">This is the second element...</div>
</div>
If you're willing to use a little javascript (jQuery in this example), you could set the width of the text div with the width of the image div.
Try adding $("#child2").css({'width': $('#child1').width()}); to the end of the JS in your fiddle, or check out the fork here: http://jsfiddle.net/VXEMu/
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 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
Can you force a container DIV height to accomodate two floated div children? Is there a fancy trick I can use to do that? I am trying to make two equally sized divs inside the parent div. I would like them to appear side by side with a little whitespace between them. Child2 tends to pop out and go below Child1. Note Child2 contains a table. Should I be floating?
HTML:
<div id="parent">
<div id="child1"></div>
<div id="child2">
<table><tr><td>content</td></tr></table>
</div>
</div>
CSS:
div#parent
{
background-color: #C6E4E0;
border: solid 3px #017E6F;
font-family: Arial;
font-size: 10pt;
font-weight: bold;
padding-left: 5px;
padding-right: 5px;
width:99%;
}
div#parent div
{
width:49%;
float:right;
padding:3px;
}
div#parent div:first-child
{
float:left;
}
This is not a clearfix issue guys, his problem is that his two floated divs are not appearing side by side.
First of all, you do not need to set the width of the parent div, divs are block elements which means they automatically adjust their width to take up the full width of their parent (in this case, presumably the parent of div#parent is the body).
Because you are setting the width explicitly AND giving it padding, it can potentially extend BEYOND the body. That doesn't really matter, but if you apply this same knowledge to the child floated divs and you can see why the right one might get bumped down to the bottom.
First, if you are explicitly setting the widths of the divs to a percentage, you do not need to add padding. Because you are dealing with percentage widths, it is better to add padding to the content of the divs rather than the divs themselves, because padding is ADDED to the width. Therefore, if you added 10px padding to a div that had a 49% width in a 100px parent, it would have a width of 49px + 10px + 10px (2 sides) for a total calculated width of 69px.
Since you didn't post your markup and content or which browser you are testing in, I can't say exactly why the div is being bumped down. There are two likely possibilities.
You are using IE, which allows tables to extend beyond its parent div which will cause breakage. Try explicitly setting the table width to a percentage of its parent or something like that.
The 49% width + padding = greater than [parent-width] - [left-div-width]. This will cause it to get bumped down because the left div and right div are too wide for the parent width.
I use the clearfix class.
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
/** html .clearfix {height: 1%;}*/
.clearfix {
display: block;
}
/* End hide from IE-mac */
then just use the class in every floated-element container.
#container { width:200px; }
.floated { width:100px; float:left; }
.clear { clear:both; }
<div id="container">
<div class="floated">A</div>
<div class="floated">B</div>
<div class="clear"></div>
</div>
I am not a fan of clear: both;, I rather do this in Jonathan Sampsons example:
#container { width:200px; overflow: hidden; }
.floated { width:100px; float:left; }
<div id="container">
<div class="floated">A</div>
<div class="floated">B</div>
</div>
By the way, you want
div#parent > div { float:left; }
instead of
div#parent div:first-child { float:left; }
which is still not IE6 friendly, but it will float both child DIVs.