I have some html content with following structure:
<div class="message-container">
<p class="message-value">someVal</p>
<div class="message-attribute">someUsername</div>
<div class="message-attribute">11-09-2017 12:30</div>
</div>
So, I want to scale my message-container up when it gets long values in message.value and scale it down as far as possible to min-width in the other way.
I also wan't to specify max-width for this props.
I've done this:
.message-container {
resize: both;
margin: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 2px;
color: #ffffff;
border-radius: 20px;
min-width: 100px;
max-width: 400px;
width: auto;
height: auto;
background-color: #80CBC4;
}
.message-value {
resize: both;
float: left;
max-width: 380px;
word-wrap: break-word;
height: auto;
}
.message-attribute {
padding-left: 50px;
width: 150px;
display: block;
color: #607D8B;
}
and message-username and message-datetime has fixed width.
Finally, I'm alsways getting max-width in my message-container even when it has free space to cut it down
https://jsfiddle.net/Lwrpegqe/
As you can see in jsfiddle width is too long with following content it could be shorter
Main purpose to resize block automatically
See the solution.
.message-container {
resize: both;
margin: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 2px;
color: #ffffff;
border-radius: 20px;
min-width: 100px;
max-width: 400px;
width: auto;
height: auto;
background-color: #80CBC4;
}
.message-value {
resize: both;
float: left;
max-width: 380px;
word-wrap: break-word;
height: auto;
display: inline;
}
.message-attribute {
padding-left: 50px;
width: 150px;
display: inline;
color: #607D8B;
}
https://jsfiddle.net/Lwrpegqe/2/
Add display: inline-block; to your .message-container
Inline elements only take up the space of the content. A div is always a block element unless specified.
Give width and height in percentage (%).
Hope it will work for you.
.your-class {
width:100%;
height:100%;
}
just use w-100 in bootstrap 4 to fit to 100% width of container element
Related
I have two containers, one has a width of 30% and the other has a width of 70% however they are not inline, instead one moves lower and by passes the other container as seen in the screenshot below how can i fix this?
main {
background-color: #f2f2f2;
padding: 10px;
float: right;
width: 70%;
}
aside {
text-align: center;
background-color: #c4c4c4;
overflow: hidden;
float: left;
width: 30%;
}
Here is the Screenshot
http://prntscr.com/jdsy9b
Thanks
Try giving .main box-sizing: border-box;
.main {
box-sizing: border-box;
background-color: #f2f2f2;
padding: 10px;
float: right;
width: 70%;
}
This way you tell the browser to account for padding, you can read more about it in the docs.
The padding actually increases the box width and height
Here i removed the padding and added some height just to see the boxes.
.main {
background-color: #f2f2f2;
height:100px;
float: right;
width: 70%;
}
.aside {
text-align: center;
background-color: #c4c4c4;
overflow: hidden;
float: left;
height:100px;
width: 30%;
}
<div class="main"></div>
<div class="aside"> </div>
I'm having problems centering an image between two float-aligned pictures.
I can't add margin-left to the image in the middle. I would like it to stay centered on resizing.
My code:
#skjirt {
display: inline;
margin-left: auto;
margin-right: auto;
float: flex;
height: 400px;
width: 400px;
border: 3px solid #662C49;
margin-top: 20px;
}
#skjirt1 {
display: inline;
float: left;
margin-left: 20px;
height: 400px;
width: 400px;
border: 3px solid #662C49;
margin-top: 20px;
}
#skjirt2 {
display: inline;
float: right;
height: 400px;
width: 400px;
border: 3px solid #662C49;
margin-top: 20px;
margin-right: 20px;
}
#imageWrap {
width: 100%;
height: auto;
margin-top: 100px;
}
If you want to make the image blocks display in the middle then instead of aligning them using float, just center them by applying the text-align:center to the #imageWrap container. Also change your display:inline to display:inline-block so that the img or any other element inside the boxes conform and adjust to the parent width and height.
Below is a sample code using your classes and I modified it with the suggested solution.
P.S. The suggested solution also makes the boxes to be responsive. :)
https://codepen.io/Nasir_T/pen/wqjKoa
I'm new to CSS and I am trying to scaled 2 pictures, which are in the same class, to the same perecentage: height: x% and width: y%, however they are not coming out the same size. If it matters, I did not set the size in my HTML file either. Here is what I got:
.BlogBoxes {
font-size: 20px;
text-align: justify;
border-style: solid;
border-width: 3px;
width: 70%;
height: 30%;
margin: 20px 1000px 20px 10px;
padding: 10px 10px 50px 30px;
background-color: #FFCEB7;
}
.BlogBoxes img {
float: right;
width: 25%;
height: 80%;
padding-left: 10px;
padding-top: 70px;
}
Here is a screenshot, if it helps
You need to apply the width you are after to a parent element of the image, and then set the image to have a max-width of 100%.
So in your case you want the image to take up 25% of '.BlogBoxes', so we'll create a new div inside that '.img-container', and then place the img inside of that.
.BlogBoxes div.img-container {
float: right;
width: 25%;
/*height: 80%; // forget height this is not necessary */
padding-left: 10px;
padding-top: 70px;
}
.BlogBoxes div.img-container img {
max-width: 100%;
height: auto;
display: block;
}
I have a main div with the class of .features, inside this div I have two boxes each one with a height set to 160px and different widths. There's a myterious padding between the end of the two boxes and the main div as seen in the screenshot below:
The padding is about 5px - I would like to remove this padding if possible. I tried adding margin: 0; and padding: 0; to the main div as well as to the two inner boxes but it didn't work.
Here is the html for this section of the page:
<div class="features">
<div class="list-items"></div>
<div class="screenshot-box"></div>
</div>
The css:
.features {
width: 980px;
margin: auto;
margin-top: 25px;
background-color: lightblue;
}
.list-items {
width: 280px;
height: 160px;
display: inline-block;
background-color: red;
}
.screenshot-box {
width: 583px;
height: 160px;
float: right;
padding-bottom: 0;
display: inline-block;
background-color: red;
}
This actually has nothing to do with padding or margin. If we look at the computed style example, we'll see that the height of the element itself is 164px:
This is happening because your inner elements are set to display as inline-block. This means they're affected by font-size, and ultimately the font-size is causing the height of the parent element to be greater than the height of the inner elements.
There are two fixes:
Specify a font-size of 0 on your .features element, and then reset this within the inner elements (by giving them a font-size of 16, or whichever your default size is).
.features {
width: 980px;
margin: auto;
margin-top: 25px;
background-color: lightblue;
font-size: 0;
}
.list-items {
width: 280px;
height: 160px;
display: inline-block;
background-color: red;
font-size: 16px;
}
.screenshot-box {
width: 583px;
height: 160px;
float: right;
padding-bottom: 0;
display: inline-block;
background-color: red;
font-size: 16px;
}
<div class="features">
<div class="list-items"></div>
<div class="screenshot-box"></div>
</div>
Give your .features element a height of 160px itself to match its children. With this the browser doesn't have to calculate what the height should be itself.
.features {
width: 980px;
margin: auto;
margin-top: 25px;
background-color: lightblue;
height: 160px;
}
.list-items {
width: 280px;
height: 160px;
display: inline-block;
background-color: red;
}
.screenshot-box {
width: 583px;
height: 160px;
float: right;
padding-bottom: 0;
display: inline-block;
background-color: red;
}
<div class="features">
<div class="list-items"></div>
<div class="screenshot-box"></div>
</div>
Just make font-size as 0 for .features, and it will take full width. Here is your fiddle.
.features {
width: 980px;
margin: auto;
margin-top: 25px;
background-color: lightblue;
font-size: 0;
/*Just make font size as 0*/
}
.list-items {
width: 280px;
height: 160px;
display: inline-block;
background-color: red;
}
.screenshot-box {
width: 583px;
height: 160px;
float: right;
padding-bottom: 0;
display: inline-block;
background-color: red;
}
<div class="features">
<div class="list-items"></div>
<div class="screenshot-box"></div>
</div>
You could also just ditch the display: inline-block on both child elements and set float: left on .list-items and display: table on .features (code example). Added benefit that without hardcoded parent div height, the parent div will expand to fit child content.
#james donnelly has already given you an accurate and concise explanation to the cause.
I have a div box that I would like at a min-height: 33px; and word-wrap to increase the height, when greater than that height. Here's a fiddle that does work http://jsfiddle.net/PzfF7/! Any reasons it does this locally with only height:33px; :
& (fiddle style)
<div class="outerDiv">
<div class="messages">
<div class="topMessage">
new message that is really long and should be on multiple lines as this continues on to the next line and so on and so forth
</div>
</div>
<div class="comments">
<div class="comment">Here's a comment</div>
</div>
</div>
For whatever reason, setting the min-height: 33px; does not work, only height: 33px;.. And word-wrap or overflow-y: auto; (less preferable) don't work at all..
.outerDiv {
width: 260px;
}
.messages {
float: left;
min-width: 100%;
max-width: 100%;
min-height: 33px;
border: 1px solid #999;
display: table;
padding: 1%;
font-size: 12.9px;
}
.topMessage {
display: table-cell;
vertical-align: middle;
padding-left: 2%;
font-size: 12.9px;
}
.comments {
float: left;
min-width: 100%;
max-width: 100%;
height: 33px;
border: 1px solid #000;
padding: 1%;
display: table;
}
.comment {
display: table-cell;
vertical-align: middle;
padding-left: 2%;
padding-right: 2%;
font-size: 12.9px;
}
As #ChristianVarga pointed out: "Do you have line-height: 0 anywhere on your local copy?"
An inherited line-height: 0; was the interfering style.