I have a chat widget that I am adding some styling to. However I am having difficulty making the "user" chat bubbles align to the right of the screen.
When I use float right, with float left(for the other side) the divs no longer position correctly, in that they seem to just go to the right of the relative divs.
I would like it to also be able to append div's that will cause the overflow-y to create a scroll bar. Which without the float is already working as expected.
Below is the current version in a jsbin.
http://jsbin.com/utulay/1/edit
TLDR; trying to get the .chat-bubble-user divs to align to right of screen without float.
if you don't want use floats, just try with inline-block, like so:
#chatWindow {
text-align: right;
}
.chat-bubble-user {
display: inline-block;
text-align: left;
}
JsBin (tested on Fx20): http://jsbin.com/awimev/2/edit
You can use float:right on the user messages and put a clearfix div after each one:
http://jsbin.com/utulay/2/edit
<div class="chat-bubble-user">
<div class="chat-bubble-glare-user"></div>
<p>I have a question about kittens?</p>
<div class="chat-bubble-arrow-border-user"></div>
<div class="chat-bubble-arrow-user"></div>
</div>
<div class="clearfix"></div>
CSS
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
.clearfix {
display: block;
}
it has been a problem for sometime until.
You only have to use
text-align:right;
display-inline:block;
all in the parent member;
Related
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
}
Currently I'm working on a project that needs me to have 2 div's side by side. This isn't such of a problem, except I want the parent div to auto resize properly when one of the subdivs becomes larger.. here comes the problem..
When one is larger than the other it pushes the other to the bottom of the parent div.. my question is; how am I able to fix this?
To see my problem in action: http://jsfiddle.net/zygnz/508/
Thanks!
Just updated your Fiddle with the solution:
http://jsfiddle.net/zuul/zygnz/511/
CSS
.right, .left {
float: left;
}
.clear {
clear: both;
}
.container div {
display: block;
}
HTML
<div id="container">
.
.
.
<div class="clear"></div>
</div>
hey try adding this to your css on the "div.left":
float: left;
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/
I know this is a question asked 12324 times probably, but I still can't find any reliable answers :/
Here is a sample code:
http://tinkerbin.com/c0wqtfSa
The wrap should take auto height depending on the float image, but how? :/
Thanks a lot!!!
ps, I can't add any extra div like "clear:both", it should be a solution only with css
Try adding
Overflow: auto;
to your wrapper div, example here: http://tinkerbin.com/pxFxaNX2
Add a <div style="clear:both"></div> after your < p >
You need to clear after a floating element...
So:
<div class="wrap">
<div class="imagefloat"></div>
<p>sldkjfn asdhbf sdjlbhgls dhjbfg ljdshbfgl jsdbfgljh dsgf sgf</p>
<div style="clear:both"></div>
</div>
Use clear:both like below:
<div class="wrap">
<div class="imagefloat"></div>
<p>sldkjfn asdhbf sdjlbhgls dhjbfg ljdshbfgl jsdbfgljh dsgf sgf</p>
<div style="clear:both;"></div>
</div>
You just need to set overflow as well as width on your wrap div, e.g.
overflow:hidden
You should use the clearfix workaround. Read this: http://www.webtoolkit.info/css-clearfix.html
The css you need is:
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
Then just add the clearfix class to your "wrap" div
A very easy and quick fix it to make the wrap div also float. This will make it automatically change it size to all floated elements within in, so:
.wrap {
float:left;
border:1px solid #000;
width: 500px;
padding: 20px;
}
Whether this is an option for your project depends on the rest of the layout.
I have a line of text that I'm wanting to position a small graphic next to, within a full screen liquid layout. I have it working, but I'm not sure why.
The html:
<div class="wrapper">
<div class="image_container">
<img src="some_valid_url">
</div>
<div class="text">Zachary</div>
</div>
The CSS (written in sass, if you're curious about the nesting):
.wrapper {
text-align: right;
float: left;
width: 10%;
word-wrap: breakword;
}
.image_container {
margin-left: 2px;
float: right;
img {
height: 20px;
width: 20px;
vertical-align: top;
}
}
.text {
overflow: hidden;
}
What this is supposed to do is place the small graphic and the text on a single line, and the graphic be just to the right of the text. And it works, but only if the image_container div is above the text div. Flip them around and the image now sits below the text. Why is that?
It has to do with div.text being a block level element and not interacting with the floated .image_container.
When .image_container is before div.text in the markup it floats to the right and then because div.text isn't cleared or floated, it essentially ignores .image_container and goes on the same vertical line.
However when .image_container is after div.text, which is taking up 100% of the available horizontal space (because it's block level), it respects this and floats to the right, just below it.
If you put borders around both your elements, it should become clear what's happening.
It isn't really the HTML that matters, but the CSS. CSS float's still treat elements like a blocks-- a floating block element. An element with a float will basically keep one foot on the ground, where its block position is, but the rest floats in the air. CSS floats don't act like position absolutes, which totally pops it out of its block position and makes it float.
I believe the issue is your text-align in the wrapper. Text-align will actually align elements within the div as well, so if your text is listed first, text and image are going to be pushed to the right. You could probably fix this by adding "float: left" to your text class.
i have made a custom solution, it work even you put image container below or up to text
<div class="wrapper clearfix">
<div class="image_container">
<img src="http://www.netbsd.org/images/download-icon-orange.png" />
</div>
<div class="text">Zachary</div>
</div>
.image_container,.text{
float:left;
line-height:40px;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
you can see its working demo
let me know if something else is required.