This fiddle shows my problem.
The output include only 2 yellow boxes, but there could be more. I want the boxes to display horizontally, not vertically as they now display. I have attempted to use display: inline-block to accomplish my goal, but to no avail. How can I get the boxes to display horizontally?
I was able to horiontally center the elements by adding float: left; to .sticky and removing display: inline-block:
.sticky {
float: left;
}
Use display:inline-block for the div with class="element" and remove <div class="reminders"> that you put just before the second <div class="element"
If you don't want to remove elements or make them float, add display: inline-block to both parents: .reminders, .element {display: inline-block}
add float: left to .sticky (and some margin left or/and right):
https://jsfiddle.net/Lcrysuzy/
Related
I have boxes that I want to float left, so they would be aligned side by side. But I have a problem. If I set float: left; I get this:
left aligned
They jump out of parent div (gray div). If I set float: none; I get this: float: none
Boxes stay in div, and div stretches with them, but they are one under another, which I don't like. How would i achieve left aligned boxes inside div?
CSS of the boxes:
.parent {
float: left;
width: 200px;
background-color: white;
border: 1px solid rgb(230,230,230);
margin: 10px;
}
You have to use overflow css rule. In the grey box add following css property:
overflow:hidden;
After applying this property you will get the items inside grey box and they will not fall outside it.
You need to give <div style="clear:both"></div> to inside parent div in last.
<div class="parent">
your code
<div style="clear:both;"></div>
</div>
whenever you use float you need to clear it by assigning clear: both to its parent
I'm struggeling a bit with the sharebuttons for social media (Twitter, Facebook, Google+) because the facebook button is a few pixels more down than the other two.
I have the feeling I tried everything in my knowledge, by adding or removing divs, margin, padding etc.
This is the HTML code:
<div class="sharebuttons">
<div class="sharebutton"><div class="fb-share-button " data-layout="button" data-mobile-iframe="false"></div></div>
<div class="sharebutton">Tweet</div>
<div class="sharebutton"><div class="g-plus" data-action="share" data-annotation="none"></div></div>
</div>
And the only CSS code from my part:
.sharebutton{
display:inline;
}
And the result is this:
You need to vertically align them. Since text is on top I suggest apply this css:
.sharebutton {
display: inline-block;
vertical-align: bottom;
}
this way all buttons will flow to bottom of line and align properly keeping text on top.
You can add just float:left and some width looking for your site:
.sharebutton {
display: inline-block;
float: left;
width:auto;
}
.sharebutton {
display: inline-block;
vertical-align: top; // or bottom as per your needs
}
i'm with some problems here.. I've tried a lot of different fixes for this, but none of them seems to work. I want to align the content of a div in the middle of another div.
I want to use only auto or % values because i want to make the website also for mobile devices.
This is the code i have so far: http://codepen.io/anon/pen/xHpaF/
I want to make those red boxes aligned to the center of the wrap div.
If anyone can help me. Thanks!
Well, first of all, your <div id="content" /> is an ID, not a class. So change your .content in the CSS to #content. Second of all, float throws off the text-align: center;. If you remove that, and set it to display: inline-block;, it should fix your issues:
check it here: http://codepen.io/anon/pen/ncviE/
css changes:
#content {
width:auto;
height:250px;
margin:0 auto;
background:#0C0;
display:table-cell;
text-align:center;
}
.view {
display: inline-block;
float: none;
}
In this gallery the last image should float to the left but it is positioned in the middle. Whats wrong with the code?
This is the whole code CSS.
This is the whole code HTML.
HTML:
<div class="text-block7" >
<img src="gal/thumb/60.png" alt="">
</div>
CSS:
#rightcolumn-12 .text-block7 { width: 239px; height: 190px; display: block; float: left; margin-top: 0px; margin-bottom: 15px;}
Before the 7th div block add:
<div style="clear:left"></div>
this happens because your 4th image is higher, so the 7th image when is floating to the left is slamming against that element.
to prevent this kind of behaviour just define a css rule that applies a clear:left on every 3n + 1 div involved: e.g.
div[class^="text-block"]:nth-child(3n + 1) {
clear: left;
}
Note: the nth-child pseudoclass unfortunately doesn't work on IE8, but if you need to absolutely support that browser you may simply use display: inline-block and vertical-align: top instead of floating elements
I have a div that I would like to have a bottom border.
This can be see at http://jsfiddle.net/R5YN2/
What causes the border to not be placed right at the bottom?
Your container element isn't accounting for the floated elements and is basically collapsing.
Give it the property overflow: auto and it should work:
#recurring-header-wrapper {
display: block;
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
overflow: auto;
}
Demo: http://jsfiddle.net/R5YN2/14/
Also, go easy on the class names. You can have selectors that target classes inside of elements:
#recurring-header-wrapper .label
Which matches only .label elements inside of the recurring-header-wrapper element. No need for huge class names.
If you float things you have to clear as well.
Read this: http://www.positioniseverything.net/easyclearing.html
This is what you're looking for. Add the class .clearfix to your wrapper-div (#recurring-header-wrapper).
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
It is displayed at the bottom (it ends there, the text is overflowing. Check that with overflow:hidden and most of the text disappear). Add a height to the div to make it the size you want.
Short answer: the float:left.
To correct that you can add overflow: auto to #recurring-header-wrapper
the floated divs inside cause this. you can clear them.
http://jsfiddle.net/R5YN2/9/
Here's the quick fix. Basically when you float left the header groups get taken out of the flow unless you clear them with something (an empty div is fine)
<div id="recurring-header-wrapper">
<div class="recurring-header-group">
<div class="recurring-header-label">Label</div>
<div class="recurring-header-item">Item</div>
</div>
<div class="recurring-header-group">
<div class="recurring-header-label">Label</div>
<div class="recurring-header-item">Item</div>
</div>
<div style="clear:both"></div>
</div>
set overflow: hidden on your recurring header wrapper http://jsfiddle.net/R5YN2/16/