The problem is no matter what is inside chat_ttc it will always be 300px.
Snippet:
.chat_ttc {
max-width: 300px;
word-break: break-word;
background: #e5e5e5;
margin-left: 70px;
position: relative;
border-radius: 15px;
border-bottom-left-radius: 0px;
padding: 4px;
padding-left: 6px;
letter-spacing: 0.6;
}
<div class="froma_tc">
<div class="chat_ttc">D</div>
</div>
yaa its because div is block element and it takes 100% of the width
as you have given max-width as 300px width will be always 300px
if you want to take some valid width make div as inline-block
check this snippet
.chat_ttc {
max-width: 300px;
display:inline-block;
word-break: break-word;
background: #e5e5e5;
margin-left: 70px;
position: relative;
border-radius: 15px;
border-bottom-left-radius: 0px;
padding: 4px;
padding-left: 6px;
letter-spacing: 0.6;
}
<div class="froma_tc">
<div class="chat_ttc">D</div>
</div>
Hope this helps
Related
I'm trying to stick an image to div block in CSS. I couldn't move 'image' using margin... What can I do? Advice is appreciated. Thank you.
What I want to implement
.bottalk {
background-color: white;
height: 100px;
width: 200px;
margin-top: 20px;
margin-left: 280px;
border-radius: 1.5em;
}
.bottalk p {
padding-top: 5px;
padding-left: 15px;
}
.bot .bottalkwhite {
height: 40px;
margin-left: 250px;
margin-top: 0px;
}
.bottalk button {
background-color: yellow;
color: purple;
padding: 5px 5px;
border: none;
margin-left: 50px;
box-shadow: 3px 3px 2px #666666;
}
<div class="col-6 bot">
<div class="bottalk">
<p>Ready to get started?</p>
<button>Let's talk</button>
</div>
<img src="./img/bottalk.png" alt="bottalk" class="bottalkwhite" />
</div> </div>
Current view
Please ignore the background color: I snipped it from the second image!
I have moved the position of the image inside the div with class bottalk, then I absolutely positioned the image, then all you need to do is to set the top and left position based on the image, (Cropped the image online so please ignore the quality of the output), So now you can position this anywhere. Also I have added background-color:pink to the body to show the image, please ignore this too.
So to summarize. I set the parent div element with class bottalk as position:relative and the child image with class bottalkwhite to position:absolute so that it can be positioned inside the parent. Position absolute will take the position relative to the immediate parent with position:relative, I hope I made my summary clear.
body{
background-color:pink;
}
.bottalk {
position: relative;
background-color: white;
height: 100px;
width: 200px;
margin-top: 20px;
margin-left: 280px;
border-radius: 1.5em;
}
.bottalk p {
padding-top: 5px;
padding-left: 15px;
}
.bot .bottalkwhite {
height: 40px;
position: absolute;
top: 80%;
left: -30px;
}
.bottalk button {
background-color: yellow;
color: purple;
padding: 5px 5px;
border: none;
margin-left: 50px;
box-shadow: 3px 3px 2px #666666;
}
<div class="col-6 bot">
<div class="bottalk">
<p>Ready to get started?</p>
<button>Let's talk</button>
<img src="https://i.stack.imgur.com/7i9bY.gif" alt="bottalk" class="bottalkwhite" />
</div>
</div> </div>
You can use the position: relative; and adjust the values of the top and left properties， like the follow code：
.bottalk {
position: relative;
left: -5px;
top: 10px;
background-color: white;
height: 100px;
width: 200px;
margin-top: 20px;
margin-left: 280px;
border-radius: 1.5em;
}
.bottalk p {
padding-top: 5px;
padding-left: 15px;
}
.bot .bottalkwhite {
height: 40px;
margin-left: 250px;
margin-top: 0px;
}
.bottalk button {
background-color: yellow;
color: purple;
padding: 5px 5px;
border: none;
margin-left: 50px;
box-shadow: 3px 3px 2px #666666;
}
<div class="col-6 bot">
<div class="bottalk">
<p>Ready to get started?</p>
<button>Let's talk</button>
</div>
<img src="./img/bottalk.png" alt="bottalk" class="bottalkwhite" />
</div> </div>
In order to put a image into a exact position relative to its ancestor, you can set position property to absolute then using left-right-top-bottom properties, you can determine its exact position. like this:
.bottalkwhite{
position: absolute;
left: 250px;
top: 0px;
}
though in such a particular css rule definition using id selector instead of class selector sounds more appropriate.
Use position:relative on the wrapper element of the image and position the image via position: absolute, left: 0 and bottom: 0 in the bottom-left corner. Then adjust it's position via transform: translate, to get the desired effect.
Note: I moved the image into the div.botttalk container to position it relative to its parent.
Like this:
body {
background: #715886;
font-family: Open Sans, Arial, sans-serif;
}
.bottalk {
background-color: white;
width: 200px;
margin-top: 20px;
margin-left: 100px;
border-radius: 8px;
padding: 24px 16px;
position: relative;
text-align: center;
color: #715886;
}
.bottalk .bottalkwhite {
position: absolute;
left: 0;
bottom: 0;
height: 40px;
color: white;
transform: translate(-100%, 100%) translate(16px, -16px);
}
.bottalk h4 {
line-height: 1;
margin: 0 0 24px 0;
}
.bottalk button {
cursor: pointer;
color: #715886;
display: inline-block;
background-color: #fbcb33;
font-weight: bold;
padding: 0 32px;
border: none;
line-height: 40px;
font-size: 14px;
box-shadow: 0px 1px 2px #666666;
}
<div class="col-6 bot">
<div class="bottalk">
<h4>Ready to get started?</h4>
<button>Let's talk</button>
<img src="https://i.imgur.com/oeUdlld.png" alt="bottalk" class="bottalkwhite" />
</div>
</div>
From below code,
.shoppingform {
width: 400px;
height: 800px;
background: #7CB9E8;
/* url(some img)*/
padding-left: 15px;
padding-top: 10px;
color: white;
font-size: 12px;
font-weight: bold;
border-radius: 5px;
}
.customercardtype {
border: 1px solid white;
color: black;
font-weight: normal;
padding: 10px 2px 5px 5px;
background: #B284BE;
width: 90%;
border-radius: 5px;
position: relative;
height: 8%;
margin-top: 5px;
}
.customercardtype .formlabel {
display: block;
height: 20%
}
.customercardtype .cardtypecontainer {
position: absolute;
width: 100%; /* Any problem here? */
top: 40%;
height: 50%;
border: 1px solid red;
}
<form class="shoppingform" action="someaction.php" method="get" enctype="multipart/form-data">
Step3: Card details
<div class="customercardtype">
<label class="formlabel">Cardtype:</label>
<div class="cardtypecontainer">
</div>
</div>
</form>
I would like to understand,
Why inner div container overflows?
This is because the width of an element is actually width + left padding + right padding + left border + right border.
As your width is 100% and additional to this will push it over 100%, making it overflow its parent.
If you use box-sizing: border-box, that will fix this issue.
That's a quick summary, lots more in depth info here: https://css-tricks.com/box-sizing.
The reason it overflows is because position absolute visually speaking, positions your element outside the normal flow of the site. This is intentional and powerful if you use it correctly. However in your case, the parent container of cardtypecontainer was not taking control of the absolute positioned element, therefore it overflowed outside its container.
Then, I changed cardtypecontainer to have relative position, which will work as you intended it to, because relative position does not change the intended layout of the element. For your case it means, cardtypecontainer will stay within the bounds of its parent container.
.shoppingform {
width: 400px;
height: 800px;
background: #7CB9E8;
/* url(some img)*/
padding-left: 15px;
padding-top: 10px;
color: white;
font-size: 12px;
font-weight: bold;
border-radius: 5px;
}
.customercardtype {
border: 1px solid white;
color: black;
font-weight: normal;
padding: 10px 2px 5px 5px;
background: #B284BE;
width: 90%;
border-radius: 5px;
position: relative;
height: 8%;
margin-top: 5px;
}
.customercardtype .formlabel {
display: block;
height: 20%
}
.customercardtype .cardtypecontainer {
position: relative;
margin-top: 10px;
width: 100%;
height: 50%;
border: 1px solid red;
}
<form class="shoppingform" action="someaction.php" method="get" enctype="multipart/form-data">
Step3: Card details
<div class="customercardtype">
<label class="formlabel">Cardtype:</label>
<div class="cardtypecontainer">
</div>
</div>
</form>
I have a PHP script that runs a completion progress bar. I want to display the percentage next to the bar...this should be the easy part. But for some reason, I can't get the percentage to display NEXT to the bar instead of UNDER it.
https://jsfiddle.net/
HTML
<div id="progress_bar_container">
<div id="progress_bar_background">
<div id="progress" style="width: <?php echo $progress_bar_width; ?>px;">
</div>
</div>
<div style="text-align: left; display: inline-block;">
<?php echo $completed_lc_percentage . "%"; ?>
</div>
</div>
CSS
#progress_bar_container {
width: 220px;
height: 20px;
}
#progress_bar_background {
display: block;
background-color: #eaeaea;
width: 200px;
height: 20px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
}
#progress {
display: block;
background: #a8c25d;
height: 20px;
width: 0px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
}
You need to make sure that the container is wide enough to hold the two children elements inside, or you can use white-space:nowrap.
Make both children elements to display:inline-block, see the demo follows.
#progress_bar_container {
width: 220px; /*or increase the value*/
height: 20px;
white-space: nowrap; /*added*/
}
#progress_bar_background {
/* display: block; */
display: inline-block; /*added*/
background-color: #eaeaea;
width: 200px;
height: 20px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
}
#progress {
display: block;
background: #a8c25d;
height: 20px;
width: 0px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
}
<div id="progress_bar_container">
<div id="progress_bar_background">
<div id="progress"> </div>
</div>
<div style="text-align: left; display: inline-block;">n%</div>
</div>
You need to float the progress_bar_background left, and then widen the width of the progress_bar_container to allow the percentage div to sit next to it. Here's an example of this working:
https://jsfiddle.net/b69ep74e/
You might want to push the progress percentage div down a pixel or two to line it up, and the width of the progress div should be a percentage.
That's because the #progress_bar_background doesn't have display: inline-block and the #progress_bar_container has a fixed width. That fixed width doesn't let space to the text.
Remove the width of #progress_bar_container or increase it. Add display: inline-block to #progress_bar_background and it should work fine.
https://jsfiddle.net/2qn9eecr/
It is because you're #progress_bar_container's allowance space is very little the percentage can't fit in the space NEXT to the bar and you also have to add a float:left; in your #progress_bar_background css.
#progress_bar_container {
width: 300px;
height: 20px;
}
#progress_bar_background {
display: block;
float:left;
background-color: #eaeaea;
width: 200px;
height: 20px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
}
#progress {
display: block;
background: #a8c25d;
height: 20px;
width: 0px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
}
<div id="progress_bar_container">
<div id="progress_bar_background">
<div id="progress" style="width: 100px;">
</div>
</div>
<div style="text-align: left; display: inline-block;">
50%
</div>
</div>
I have two div elements. Second is inside in first element.
In second I display some text. For second div I set height to auto and when I put more text in div height is greater. Also I set height for first div to auto, but first div has always same height.
How I can set height of DIV to be dependable of number of text rows?
<div class="first-div">
<div class="second-div">
</div>
</div>
.first-div {
background-color: #f5f5f5;
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
border-radius: 6px;
border: 1px solid #b8b8b8;
text-align: justify;
padding: 4px 4px 4px 4px;
word-wrap: break-word;
height: auto;
min-height: 75px;
}
.second-div {
width: 30%;
float: right;
font-size: 9px;
height: auto;
}
Add overflow:hidden to .first-div.
You may want to check out this question: How does CSS 'overflow:hidden' work to force an element (containing floated elements) to wrap around floated elements?
Demo 1
add overflow: auto to outer div (.first-div)
css
.first-div {
background-color: #f5f5f5;
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
border-radius: 6px;
border: 1px solid #b8b8b8;
text-align: justify;
padding: 4px 4px 4px 4px;
word-wrap: break-word;
height: 100%;
min-height: 75px;
overflow:auto; /* added */
}
.second-div {
width: 30%;
float: right;
font-size: 9px;
height: auto;
}
Demo 2
or you can add div to the html and set its style as clear: both
css
.clear {
clear: both;
}
html
<div class="first-div">
<div class="second-div"></div>
<div class="clear"></div>
</div>
You can remove the min-height from your .first-div and apply overflow: hidden check out the fiddle, I think this is what you want.
In the .second-div you can change the height with min-height. In the fiddle I have it at 300px.
http://jsfiddle.net/wcnbq9xc/
this is my first post here. I don't know how to explain my problem because I don't really know what is causing my CSS code to break. It would be easier to show you in a photo.
So I have a div tag and input and div child elements inslide. One of the div is static 32px x 32px and I am calculating its width with calc(100% - 32px), but when scaling some pixels aren't filled with the input.
Here's a photo of the problem: http://imgur.com/TkRFLde
This occurs when the zoom is not divisible by 100. For example it breaks on 110%, 150% and 175%. But it is right when the zoom is 100%, 200%, 300%...
Heres my code:
<div class="search">
<input type="text" value="Search" class="search-text" />
<div class="search-icon" ></div>
</div>
CSS:
.search {
height: 32px;
width: 250px;
}
.search-text{
float:left;
width: calc(100% - 55px) !important;
display: inline-block !important;
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
margin: 0;width: 196px;
}
.search-icon{
display: inline-block !important;
background-color: #ACB6BE;
height: 30px;
width: 31px;
float:right;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
border: 1px solid #acb6be;
}
input[type=text] {
border-radius: 5px;
border: 1px solid #acb6be;
min-width: 180px;
color: #acb6be;
padding: 0 10px;
height: 30px;
background-color: #fff;
font-weight: 600;
}
Or jsfiddle: http://jsfiddle.net/39VDR/1/
The problem happens because when you zoom, your values will not be integer anymore. This means that rounding will take place and the outer container (.search) will be 1px larger than you would expect.
You can remove the float:right on the .search-icon and it will work ok.
You can see it here:
http://jsfiddle.net/39VDR/4/
.search-icon{
display: inline-block;
background-color: #ACB6BE;
height: 30px;
width: 31px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
border: 1px solid #acb6be;
font-size:12px;
vertical-align: top;
}
Still, as mentioned, you can remove the !important if you just add more specificity to your selectors.