I have chat message div which floats left and right but I when the reply is more than one lines then div falls down.
Please check my codepen div falling down
I want this output:
Don't let your bubble float, instead use a left margin.
http://codepen.io/anon/pen/grddmW
edit: I updated the code. The same goes for the right floating bubbles, of course.
.message .bubble {
background: #f0f4f7;
font-size: 16px;
padding: 12px 13px;
border-radius: 5px 5px 5px 0px;
color: #717070;
position: relative;
margin-left: 160px;
}
#chat-messages div.message.right .bubble {
border-radius: 5px 5px 0px 5px;
margin-right: 160px;
max-width: 79%;
text-align: right;
}
In both cases, no floating, but a margin to the left / to the right.
Related
Here is the jsfiddle for reference: http://jsfiddle.net/4devvjyv/1/
I'm trying to get the "Section" box to go above the gray line so that it looks like the "Section" box is centered around the line. But negative margins are not pushing the box above the line.
.divider {
margin-top: 6px;
border-top: 2px solid gray;
font-size: 10px;
position: relative;
}
.divider-text {
position: relative;
border: 1px solid black;
background-color: white;
display: inline-block;
padding: 0px 5px;
margin-top: -200px;
}
The divider is the line, and the divider-text is the "Section" box. I put a margin-top of 6px for the divider just so I wouldn't mess up the spacing between the two content because I would like the "Section" box to be 6px above the line and 8px below the line.
Does anyone know why it's not working? I tried playing around with a negative left margin and the "Section" box behaved as it should.
Updated your jsfiddle
Use top: -20px instead of margin-top:-200px. I've use -20px because -200px will float way high and cannot be seen.
.divider-text {
position: relative;
border: 1px solid black;
background-color: white;
display: inline-block;
padding: 0px 5px;
top: -20px;
}
another solution would be
.divider-text {
position: absolute;
border: 1px solid black;
background-color: white;
display: inline-block;
padding: 0px 5px;
margin: -20px; // making it center.
}
releasing the element from it's parent element (position: absolute) will make the element float, does following the negative margin.
The element is still under its parent element so any floating styles will not go beyond its parent element unless you free it by, float, position:absolute, or display:block. But display block does not actually release the element from its parent but moves it to the next. -- need anyone's input on this though.
My weebly landing page has a section at the top with half of it as text and the other half as an image. The problem is that there is always a gap to the right of the image and whatever is to its right. For example, if the image is "float: right" there will be a gap between the image and the border (banner?). If I flip flop the image and text and do "float: left" for the image there will be a gap between the image and the text box. I've tried changing the widths of just about everything, as well as the paddings of the image and text.
Attached is an image with the picture on the left. You will see the gap between the image and text. Thanks in advance.
Edit: apparently I can't post images yet.
#bannerleft {
float: right;
width: 466px;
height: 288px;
padding: 0px 15px;
background: url(banner-left.png);
border: 0px #222 solid;
border-right: none;
}
#bannerleft h2 {
color: #fff;
font-size: 28px;
padding: 0px 0px;
line-height: 1;
}
#bannerleft p {
padding: 8px 0px;
line-height: 130%;
}
#bannerleft .wsite-button {
margin: 3px;
}
#banner-right {
float: left;
width: 490px;
height: 268px;
padding: 0px 0px 0px 0px;
}
I'm try to display two rows of six columns and have them shrink when the browser window shrinks. The original css displays number of columns depending on the image size, each image floating left, so for different screen sizes I end up with large spaces.
.ngg-albumoverview {
overflow: hidden;
margin-top: 1px;
margin-left: 0px;
width: 100%;
clear:both;
display:block !important;
}
.ngg-album {
float:left;
height: 100%;
padding: 0px;
margin-bottom: 0px;
border: 0px solid #fff;
}
/* IE6 will ignore this , again I hate IE6 */
/* See also http://www.sitepoint.com/article/browser-specific-css-hacks */
html>body .ngg-album {
overflow:hidden;
padding: 0px;
margin-bottom: 0px;
border: 0px solid #cccccc;
}
.ngg-album {
overflow: hidden;
padding: 0px;
margin-bottom: 0px;
border: 0px solid #cccccc;
}
.ngg-albumtitle {
text-align: left;
font-weight: bold;
margin:0px;
padding:0px;
font-size: 1.4em;
margin-bottom: 0px;
}
.ngg-thumbnail {
float: left;
margin-bottom: 10px;
margin-right: 2px;
text-align: center;
font-weight:bold;
background-color:#0F0F0F;
-webkit-border-radius: 0px 0px 8px 8px;
-moz-border-radius: 0px 0px 8px 8px;
border-radius: 0px 0px 8px 8px
}
.ngg-thumbnail img {
background-color:#A9A9A9;
border:0px solid #1D1D1D;
display:block;
margin:4px 0px 4px 5px;
padding:4px;
position:relative;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width:200px;
}
.more {
width: 100%;
background-color:#0F0F0F;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px
}
.ngg-thumbnail:hover {
background-color: #333333;
}
.ngg-thumbnail img:hover {
background-color: #FFFFFF;
}
.more:hover {
background-color: #333333;
}
.ngg-description {
text-align: center;
}
When I add this css to .ngg-albumoverview it displays six columns ok and shrinks them, but the second image is placed under the first, instead of alongside, with the third image alongside the first.
columns:100px 6;
-webkit-columns:100px 6; /* Safari and Chrome */
-moz-columns:100px 6; /* Firefox */
CSS columns are just segregations of the page and flow the same as the rest of the page. Your images are laid out like this:
[1][3][5]
[2][4][6]
because the flow of a page goes top to bottom and expands as necessary depending on element widths.
Your images will not be in the order you want unless you remove the columns and replace it with a responsive grid. If you want the images to appear like:
[1][2][3]
[4][5][6]
you need to adjust your .ngg-thumbnail widths to be a percentage (that incorporates the margin, border and padding spacing in between and adds up close to 100% between 3 of them), float them to the left and give your .ngg-thumbnail img a max-width: 100%; and height: auto;. Be sure to float the .ngg-thumbnail parent element and not the img or they will be removed from the document flow and not line up with the grid unless you perfectly size everything (and you don't want that).
Almost forgot - make sure you add a clear: left; on the 4th image if your widths don't add up to 100% so it starts on a new line by default. You can select the 4th image with:
.ngg-thumbnail img:nth-of-type(4);
Here is a good resource for you if you'd like an enjoyable way to learn more about this.
I am not able to align my div named #time horizontally with another div named .content.
Click here for a live version of the website - https://dl.dropbox.com/u/73176512/InteractiveGuide/index.html
The time div is not aligning with the content div. Code can be viewed by right clicking and viewing source. Or I can paste it here if requested.
I am floating the #time div right.
Change your code with this,
.upper {
border-radius: 20px 20px 20px 20px;
float: left;
min-width: 1048px;
padding: 10px 0;
}
.content {
background-color: #FFF9EC;
border: 1px solid white;
border-radius: 20px 20px 20px 20px;
box-shadow: 5px 5px 10px 5px gray;
float: left;
margin: 10px 0;
min-width: 1024px;
padding: 10px;
}
Thanks...
Please remove padding Left and Right form .content
Thanks
Safder Jaffri
here is the solution enjoy just give your upper class min-width to 1070px
.upper
{
float:left;
padding: 10px;
border-radius: 20px 20px 20px 20px;
min-width: 1070px;
}
Add a negative right margin to #time, this way:
#time {
margin-right: -40px;
}
Give the #time div a margin-right of -22px (I just eyeballed this so check for sure)
I am adding an image that acts like a bullet for a li:
.top_right li {
float: left;
width: 7em;
line-height: 100%;
background: url(images/thumbs.png) no-repeat top 4px left;
border-bottom: solid 1px #222;
margin-right: 1em;
padding: 5px 0 5px 1.3em
}
Any ideas why thumbs.png does not show in IE 8 and 7?
Here's a working demo. I had to remove the top 4px left in the bakcground property for the image to show.
You have to either specify top left or Xpx Ypx, can't mix them up :).