If I have a container, with several nested divs :
<div class="beat-container" id="beat-container-1">
<div id="1-1">
<div class="beat" id="beat-1-1">
I am a beat View<br>
</div>
</div>
<div id="1-2">
<div class="beat" id="beat-1-0">
I am a beat View<br>
</div>
</div>
<div id="1-3">
<div class="beat" id="beat-1-0">
I am a beat View<br>
</div>
</div>
</div>
and I use float on all but the last child, I get the functionality I need, where they are side by side. Adding float:left to the final one prevents the enclosing parent container from wrapping all the children, and it loses its height.
If I add it to all them, then try to add a :last-child it still doesn't work.
How do I get the divs to be inline, and have the parent border still wrap them.
The container height should be dynamic, so no specific height attributes or JS.
CSS:
.beat-container {
border: 1px solid orange;
padding: 5px;
margin: 5px;
}
.beat {
display: inline-block;
border: 1px solid purple;
float: left;
}
.beat :last-child {
float: none;
}
/* .beat :not(:last-child) {
display: inline-block;
border: 1px solid purple;
float: left;
} */
Fiddle
I hope I have understood your questions correctly.
You can add overflow: auto; to .beat-container then it will wrap the content.
.beat-container {
border: 1px solid orange;
padding: 5px;
margin: 5px;
overflow: auto;
}
http://fiddle.jshell.net/g3L3w/2/
If you want to use the last-child selector to target the last div with .beat you have to target the parent of .beat as all .beat are both first-child and last-child of the parent in your current structure.
e.g. .beat-container > div:last-child > .beat
You can go with a less qualified selector for your example but in a bigger context it would probably be what you want.
http://fiddle.jshell.net/g3L3w/4/
Related
I have two divs on a page. Div #1 is floated left and contains an image and some text. The text in div #2 wraps around it nicely, as I expect. But when there's a blockquote with some styling in div #2, the styling extends into div #1. This isn't what I want.
I'm sure I'm missing something super basic, but I can't figure out what it is.
In this sample, I don't want the red going into the gray.
.floatl {
float: left;
height: 200px;
width: 100px;
background: #CCCCCC;
opacity: 0.5;
margin-right: 2px;
}
blockquote {
border-bottom: 3px solid red;
border-top: 3px solid red;
}
<div class="floatl"></div>
<div>
<p>This is some text here.</p>
<blockquote>This is a quote.</blockquote>
</div>
I'm looking to either a) get div #2's non-text content to respect div #1 or b) discover another way to float div 1 to the left.
Thanks for your help!
Wrap the divs in a new div and apply display:flex so it will become the flexbox container.
.new-wrapper {
display: flex;
}
Your main content, which is now a flex item along with the .float1 div, will want to shrink up. I gave the content div a class and told it to grow to fill the rest of the flex container:
.main-content {
flex-grow: 1;
}
Remove the float and now you are good.
.new-wrapper {
display: flex;
}
.floatl {
height: 200px;
width: 100px;
background: #CCCCCC;
opacity: 0.5;
margin-right: 2px;
}
.main-content {
flex-grow: 1;
}
blockquote {
border-bottom: 3px solid red;
border-top: 3px solid red;
}
<div class="new-wrapper">
<div class="floatl"></div>
<div class="main-content">
<p>This is some text here.</p>
<blockquote>This is a quote.</blockquote>
</div>
</div>
I have an inline-block element that I want to put a border-bottom on, but when the text inside that element wraps to the next line, it puts the border on the bottom of both lines of text, instead of just the bottom of the element.
Heres a demo:
http://codepen.io/Tiger0915/pen/azpeVY
And here's the pertinent SCSS:
div {
width: 150px;
text-align: center;
span {
border-bottom: 20px solid rgba(0,0,0,0.3);
}
}
How do I get it to only put the border on the bottom of the element?
Reason I have to use display: inline-block and can't just use display: block:
I need text to be able to wrap to a new line, as the screen size is
small
I can't specify a defined width on the span, it needs to change width based on whether or not the text can fit on 1 or multiple lines (depends on screen width)
The span needs to be text-align: center within the div
I changed your SCSS to this and it worked fine for me:
div {
width: 150px;
text-align: center;
span {
display: inline-block;
border-bottom: 20px solid rgba(0,0,0,0.3);
}
}
Just add display: inline-block; to the span like you said. By default, <span> elements are display: inline; not display: inline-block;.
You can wrap the span in a div and assign the border-bottom to the div.
add a wrapper div
<div>
<div class='wrap'>
<span>
This is a long sentence.
</span>
</div>
</div>
assign border-bottomis SCSS
div {
background: rgba(0,0,0,0.1);
width: 150px;
margin: 100px auto;
padding: 20px;
text-align: center;
div {
padding: 0;
border-bottom: 20px solid rgba(0,0,0,0.3);
span {
font-size: 24px;
}
}
}
Here is a working codepen.
Is this standard CSS behavior?
How does one get the container to wrap around the button?
http://jsfiddle.net/frank_o/yepw7oLw/
CSS:
.button {
background: grey;
padding: 10px 20px;
}
.test {
border: 1px solid black;
}
HTML:
<div class="test">
<a class="button">Test</a>
</div>
This is happening because your a.button element is currently being displayed as inline. Margin and Padding values applied to the top and bottom of inline elements don't impact elements around it, because the browser doesn't want to affect the flow.
To fix this, add display: inline-block to the a.button element.
This will force the browser to treat it as block for all rules regarding styling, and treat it as inline for placement on the page.
Add
display: block;
to .button
Generally I wouldn't recommend adding padding to an anchor <a> tag.
Add the padding and other styles to a <div> instead, with the anchor encompassing that div: JSFiddle
New HTML:
<div class="test">
<a href='#'>
<div class='button'>Test</div>
</a>
</div>
EDIT: in my JSFiddle example above, the width of the grey button defaults to 100% of the container, but you can change this if required by adding a width value to the .test div.
Try adding
display: block;
as suggested and add a width to the button so it is not the full length of your div, e.g:
body {
padding: 20px;
}
.button {
display: block;
width: 4%;
background: grey;
padding: 10px 20px;
}
.test {
border: 1px solid black;
}
Example: http://www.homeroe.com/homeroe.com/newHome/pulpaForum/test.php
Why is that the table div is going out from its container whenever I add padding?
Is there any work around for this problem?
<style>
.foroContainer {
width: 700px;
margin-left: auto;
margin-right: auto;
background: yellow;
}
.foroContainer .table{
display: table;
width: 100%;
padding: 8px;
border: 1px solid #a9a9a9;
margin-bottom: 1em;
}
.foroContainer .row{
display: table-row;
}
.foroContainer .cell{
display: table-cell;
}
#right.cell{
text-align: right;
border-top: 1px solid #a9a9a9;
}
}
</style>
<div class="foroContainer">
<div class="table">
<div class="row">
<div class="cell">asdasdasdas</div>
</div>
<div class="row">
<div id="right" class="cell">asdasdas | asdasdsad | asdasdasdas</div>
</div>
</div>
Alternatively, you could try altering the box-sizing property, either for every element on the page, or just that one container. E.g. for each element on the page, you would write:
* { box-sizing: border-box; }
This will alter the default box model that the browser uses so that width of the element is not changed, padding or not.
The hierarchy of encapsulation in CSS is:
margin - border - padding
When you are adding padding to an object you practically alter it's width.
If something is 100px in width and you add padding:10px it's width will become 120px (100 + 10 padding-left + 10 padding right)
This is the reason that your container is pushed over (it's width:100%) a good way would be another container internal to your table with width:100% but the table without width.
The div inside another div picture and code below. Because there will be text and images of the parent div. And red div will be the last element of the parent div.
<div style="width: 200px; height: 150px; border: 1px solid black;">
<div style="width: 100%; height: 50px; border: 1px solid red;">
</div>
</div>
This is one way
<div style="position: relative;
width: 200px;
height: 150px;
border: 1px solid black;">
<div style="position: absolute;
bottom: 0;
width: 100%;
height: 50px;
border: 1px solid red;">
</div>
</div>
But because the inner div is positioned absolutely, you'll always have to worry about other content in the outer div overlapping it (and you'll always have to set fixed heights).
If you can do it, it's better to make that inner div the last DOM object in your outer div and have it set to "clear: both".
A flexbox way.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* not necessary, just to visualize it */
.parent {
height: 500px;
border: 1px solid black;
}
.parent div {
border: 1px solid red;
}
<div class="parent">
<div>Images, text, buttons oh my!</div>
<div>Bottom</div>
</div>
Edit:
Source - Flexbox Guide
Browser support for flexbox - Caniuse
Make the outer div position="relative" and the inner div position="absolute" and set it's bottom="0".
Here is another pure CSS trick, which doesn't affect an elements flow.
#parent {
min-height: 100vh; /* set height as you need */
display: flex;
flex-direction: column;
background: grey;
}
.child {
margin-top: auto;
background: green;
}
<div id="parent">
<h1>Positioning with margin</h1>
<div class="child">
Content to the bottom
</div>
</div>
You may not want absolute positioning because it breaks the reflow: in some circumstances, a better solution is to make the grandparent element display:table; and the parent element display:table-cell;vertical-align:bottom;. After doing this, you should be able to give the the child elements display:inline-block; and they will automagically flow towards the bottom of the parent.
Note : This is by no means the best possible way to do it!
Situation :
I had to do the same thign only i was not able to add any extra divs, therefore i was stuck with what i had and rather than removing innerHTML and creating another via javascript almost like 2 renders i needed to have the content at the bottom (animated bar).
Solution:
Given how tired I was at the time its seems normal to even think of such a method however I knew i had a parent DOM element which the bar's height was starting from.
Rather than messing with the javascript any further i used a (NOT ALWAYS GOOD IDEA) CSS answer! :)
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-ms-transform:rotate(180deg);
Yes thats correct, instead of positioning the DOM, i turned its parent upside down in css.
For my scenario it will work! Possibly for others too ! No Flame! :)
Here is way to avoid absolute divs and tables if you know parent's height:
<div class="parent">
<div class="child"> Home
</div>
</div>
CSS:
.parent {
line-height:80px;
border: 1px solid black;
}
.child {
line-height:normal;
display: inline-block;
vertical-align:bottom;
border: 1px solid red;
}
JsFiddle:
Example
You may not want absolute positioning because it breaks the reflow: in some circumstances, a better solution is to make the grandparent element display:table; and the parent element display:table-cell;vertical-align:bottom;. After doing this, you should be able to give the the child elements display:inline-block; and they will automagically flow towards the bottom of the parent.
<div style="position: relative;
width: 200px;
height: 150px;
border: 1px solid black;">
<div style="position: absolute;
bottom: 0;
width: 100%;
height: 50px;
border: 1px solid red;">
</div>
</div>
<div style="width: 200px; height: 150px; border: 1px solid black;position:relative">
<div style="width: 100%; height: 50px; border: 1px solid red;position:absolute;bottom:0">
</div>
</div>