I have a problem doing something but it's difficult to explain it.
I have a dynamic list of divs - 3,5 or 10 for example. Every div should be next to the other on one line. That's easy of course, but here is the problem. All divs are in a parent div with width: 200px for example. All 5 child divs have width of 30, 100, 50, 200 and 40 pixels for example. So all divs can't be on one line, some of them should move on the next line or maybe on a third line. That's also works at the moment.
My problem is that I want divs on every line to be appended to the right of the parent div.
Here is an example:
<div class="parent">
<div class="child">Test</div>
<div class="child">ok</div>
<div class="child">Very very long text</div>
<div class="child">Long text</div>
<div class="child">adsdas</div
</div>
.parent {
width: 200px;
overflow: auto;
background-color: #ccc;
}
.child {
float: left;
border: 1px solid #000;
}
http://jsfiddle.net/xy2goa3e/
I want Test, ok and Very very long text to be appended to the right.
Also Long text and adsdas to be appended to the right and everything should be dynamic.
Thanks in advance!
Use following css solved your issue:
.parent {
width: 200px;
overflow: auto;
background-color: #ccc;
text-align:right;
}
.child {
display: inline-block;
padding:0;
margin:0;
border: 1px solid #000;
}
Use display: inline-block; of child and Give text-align:right; to parent.
Check Fiddle.
You need to add
.parent {
display:inline;
}
http://jsfiddle.net/xy2goa3e/6/
Changing the float of your .child class from left to right seems to fix the issue - unless I misunderstand something?
Updated fiddle: http://jsfiddle.net/xy2goa3e/3/
Related
I know that this happens, but would like clarification as to why, as I'm trying to get a better understanding of the float mechanic
Given this HTML
<div class="wrapper">
<div class="inner first">1</div>
<div class="inner second">2</div>
<div class="inner third">3</div>
</div>
And this CSS
.wrapper {
width: 500px;
height: 500px;
margin: 100px auto;
border: 1px solid black;
}
.inner {
border: 1px solid black;
box-sizing: border-box;
}
.first, .second {
float: left;
width: 300px;
height: 300px;
}
.third {
width: 200px;
height: 200px;
float: right;
}
The third div does not float all the way to the top right, but aligns with the second div
I know that this happens but I would like a more specific explanation as to why (based on what rule)
Good question, I have seen some people having difficulty understanding this. As per your question, I feel you want to align '3' to the top-right in the box. Your inner is 500 * 500, and your first and second is 300*300, since it cannot fit total of 600, the second one will go below first one. Then there is a space of 200 for third one. It will take next 200 space (next to second one) and the space above is not utilized. To get desired output, what you want is shift 3 up as shown below so that the space of 200 in the top right is utilized first.
May be this can help you:
<div class="wrapper">
<div class="inner third alg">3</div>
<div class="inner first">1</div>
<div class="inner second ">2</div>
</div>
CSS code:
.wrapper {
width: 500px;
height: 500px;
margin: 100px auto;
border: 1px solid black;
}
.inner {
border: 1px solid black;
box-sizing: border-box;
}
.first, .second {
float: left;
width: 300px;
height: 300px;
}
.alg{
text-align: right;
}
.third {
width: 200px;
height: 200px;
float: right;
}
I hope this makes things more clear to you now. If not comment below, I can explain with some more examples.
That's because the float rules say
The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.
Since there is not enough space at the right of .first, .second is placed below. But then .third can't be placed above .second, even if it fits in the available space left by .first.
This is because of the page flow order. When you float an element you are not completely removing it from the flow order of the page but instead specifying that it should position itself to the left or the right of an element. By floating div three to the right you are not removing it from flow entirely like when you position a div absolutely.
In your example div one and two's net width is wider than the parent wrapper. This means they cannot rest inline so they stack. Div three positions to the right of the element that comes before it (div two) but is still influenced by the flow order and sits below div one.
I have 2 inner divs inside an outer div, and I want to make the outer div to automatically fit to the width of the inner divs. Is that possible?
body {
font-size: 0;
}
#outer {
border: 1px solid black;
}
.inner {
font-size: 12px;
display: inline-block;
border: 1px solid red;
}
<div id='outer'>
<div class='inner'>text1</div>
<div class='inner'>text2</div>
</div>
Your outer div is a block-level element. You need to make it an inline-level element. Inline elements automatically take the size of the content it contains. In terms of the question you've asked, just setting :
display: inline-block
on your outer div will do the trick. See the code snippet below for the demo :
body {
font-size: 0;
}
#outer {
border: 1px solid black;
display: inline-block;
}
.inner {
font-size: 12px;
display: inline-block;
border: 1px solid red;
}
<div id='outer'>
<div class='inner'>
text1
</div>
<div class='inner'>
text2
</div>
</div>
Hope this helps!!!
Add "display: table;" to the #outer css:
For example:
#outer {
border: 1px solid black;
display: table;
}
using display: table is less intrusive as using inline
If you add position:absolute; or float:left; to #outer it will size to the two inner div's. For this instance, I would use the float. Floats are generally better for content that might change or expand/shrink with edits over time whereas absolute positioning should be used outside of the document flow or structure of the document, like a nav bar.
Edit: If you don't need other elements to flow around the outer div the display:inline-block method posted below will work, but if you have elements you want to flow around #outer then float:left would be the way to go. Say you have #outer as 50% of the width and want something else on the other half of the page using display:inline-block will put other elements below #outer.
CodePen link to show difference
Very basic CSS question. Given the code shown in http://jsfiddle.net/danwoods/65X7X/ why don't the child divs (the colored blocks) fit into the container element?
CSS from fiddle
.container {
width: 360px;
height: 50px;
border: 1px solid black;
}
.container div {
width: 120px;
height: 100%;
display: inline-block;
}
.one {
background: blue;
}
.two {
background: green;
}
.three {
background: red;
}
Thanks in advance,
Dan
Because inline elements are sensitive to white space. You can remove them so the HTML looks like:
<div class="container">
<div class="one"></div><div class="two"></div><div class="three"></div>
</div>
jsFiddle example
Or float the divs left:
.one,.two,.three {
float:left;
}
jsFiddle example
Or use HTML comments to eat up the white space:
<div class="container">
<div class="one"></div><!--
--><div class="two"></div><!--
--><div class="three"></div>
</div>
jsFiddle example
You have to float them left:
http://jsfiddle.net/65X7X/2/
.container div {
width: 120px;
height: 100%;
display: inline-block;
float: left;
}
Hope this helps.
Its not a bug. You can see here why it happens and how you can overcome the problem.
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
While putting literally no spaces between the divs in your code, or using HTML comments both work equally well, there is a better solution. In my opinion, the most elegant solution, by which I mean the way which does not involve having to mess up the look and readability of your code, is to add this line of CSS:
body>.container{font-size:0;}
If your body tag is not the parent of .container, replace body with whatever the parent is. This line basically says that the styles will apply to the .container class, but only that specific class. Not the child elements of .container. So by applying a font size of 0, you eliminate the gaps made by it, thereby bringing everything into alignment.
http://jsfiddle.net/65X7X/6/
Following my code:
HTML:
<div>aaaaaaaaaaaaaaa
<span>test</span>
</div>
CSS:
div{
width: 60px;
border-bottom: 1px solid red;
word-break:break-all;
}
span{
float: right
}
I would get this result: http://oi41.tinypic.com/2py25w1.jpg
I would like the text right-floated should not have to get out the div, so it must go to a new line inside the div when needed, as in the code that I posted.
In this case, for example, there is no need to let go of the text in a new line, because the text fits on the right of the text: http://jsfiddle.net/3kRan/2/
Set the overflow on your div to hidden like so:
div{
width: 60px;
border-bottom: 1px solid red;
word-break:break-all;
overflow: hidden;
}
Your contents are overflowing when the span tries to float. This will allow your span to stay within its parent container.
This answer depends on your ability to wrap your text in an element, such as p. The ending result would be:
<div><p>aaaaaaaaaa</p>
<span>test</span>
</div>
div{
width: 60px;
border-bottom: 1px solid red;
word-break:break-all;
height: 100%;
overflow: auto; /* fix to clear the parent */
}
p {
padding:0;
margin:0;
}
span{
float: right
}
Updated fiddle: http://jsfiddle.net/3kRan/5/
I have nested divs like so:
<div class="first">
<div class="second">
<div class="third"></div>
</div>
</div>
The third div contains dynamic content - so I don't know it's dimensions.
What I want is the second div to take the width of the third div and not of the first div which is a lot bigger.
So in this demo, I want the border to enclose the green square.
Is this possible with css only? if so, how?
Thanks.
Put a float: left; in the second class. That should do the trick.
.second {
float: left;
}
or
.second {
display: inline-block; //not working on ie7
}
Actually div is a block level element so you can give the display:inline-block to second div and than it will take the third div width & height vic-versa...
CSS
.first
{
width: 500px;
height: 500px;
background: yellow;
}
.second
{
border: 5px solid blue;
display:inline-block;
}
.third
{
min-width: 100px;
min-height: 100px;
background: green;
}
DEMO