I'm trying to create content boxes with each one having different text color, but i'm unable to do it
here is code
.content-box-blue,
.content-box-green, {
margin: 0 0 25px;
overflow: hidden;
padding: 20px;
}
.content-box-blue {
color: #0000FF;
background-color: #d8ecf7;
border: 1px solid #afcde3;
}
.content-box-green {
color: #088A08;
background-color: #d9edc2;
border: 1px solid #b2ce96;
}
.content-box-blue,.content-box-green, { you have used comma before { brackets thats why css is not working .
CSS :
.content-box-blue,
.content-box-green {
margin: 0 0 25px;
overflow: hidden;
padding: 20px;
height: 100px;
width: 200px;
}
.content-box-blue {
color: #0000FF;
background-color: #d8ecf7;
border: 1px solid #afcde3;
}
.content-box-green {
color: #088A08;
background-color: #d9edc2;
border: 1px solid #b2ce96;
}
**HTML:**
<div class="content-box-blue">
This text box is
</div>
<div class="content-box-green">
This text box is
</div>
Related
This question already has answers here:
Make container shrink-to-fit child elements as they wrap
(4 answers)
Closed 1 year ago.
.container {
display: flex;
border: 5px solid blue;
height: 200px;
flex-wrap:wrap;
width: fit-content;
.div-1 {
border: 5px solid red;
width: 230px;
}
.div-2 {
border: 5px solid green;
width: 200px;
}
.div-3 {
border: 5px solid green;
width: 200px;
}
.div-4 {
border: 5px solid green;
width: 200px;
}
.div-5 {
border: 5px solid green;
width: 200px;
}
.div-6 {
border: 5px solid green;
width: 200px;
}
.div-7 {
border: 5px solid green;
width: 400px;
}
.div-8 {
border: 5px solid green;
width: 400px;
}
}
<div class="container">
<div class="div-1">I'm 230 px wide</div>
<div class="div-2">I'm take up what is left in the view port!</div>
<div class="div-3"></div>
<div class="div-4"></div>
<div class="div-5"></div>
<div class="div-6"></div>
<div class="div-7"></div>
<div class="div-8"></div>
</div>
I want to set the width of flex-container to be equal to the width of flex-items, so that there is no remaining empty space at the end..
Attached Code for reference.
Here I would like to fix width of the container to be equal to width of first 6 divs combined.
.container {
display: inline-flex;
border: 5px solid blue;
height: 200px;
width: fit-content;
flex-wrap: wrap;
.div-1 {
border: 5px solid red;
width: 230px;
}
.div-2 {
border: 5px solid green;
width: 200px;
}
.div-3 {
border: 5px solid green;
width: 200px;
}
.div-4 {
border: 5px solid green;
width: 200px;
}
.div-5 {
border: 5px solid green;
width: 200px;
}
.div-6 {
border: 5px solid green;
width: 200px;
}
.div-7 {
border: 5px solid green;
width: 400px;
}
.div-8 {
border: 5px solid green;
width: 300px;
}
}
.next-line {
height: 100px;
border: 5px solid orange;
}
<div class="container">
<div class="div-1">I'm 230 px wide</div>
<div class="div-2">I'm take up what is left in the view port!</div>
<div class="div-3"></div>
<div class="div-4"></div>
<div class="div-5"></div>
<div class="div-6"></div>
<div class="div-7"></div>
<div class="div-8"></div>
</div>
<div class="next-line">
I'm the next div element!
</div>
https://codepen.io/prashantkumarsahu/pen/WNZRXdB
When you use display: flex; in the container's style, and the container hasn't owned width, the container's width will be fixed on children's width.
If your container has a fixed width, and you want children to grow and to occupy the whole container width, you should use the flex-grow:1; property in your children's styles.
If you want to read more about flex-grow I suggest you developer.mozilla.org and css-tricks.com
Here is the Codepen link.
.container {
display: flex;
border: 5px solid blue;
height: 200px;
flex-wrap:wrap;
}
.div-1 {
border: 5px solid red;
width: 230px;
flex-grow:1;
}
.div-2 {
border: 5px solid green;
width: 200px;
flex-grow:1;
}
.div-3 {
border: 5px solid green;
width: 200px;
flex-grow:1;
}
.div-4 {
border: 5px solid green;
width: 200px;
flex-grow:1;
}
.div-5 {
border: 5px solid green;
width: 200px;
flex-grow:1;
}
.div-6 {
border: 5px solid green;
width: 200px;
flex-grow:1;
}
.div-7 {
border: 5px solid green;
width: 400px;
}
.div-8 {
border: 5px solid green;
width: 400px;
}
.next-line {
height: 100px;
border: 5px solid orange;
}
<div class="container">
<div class="div-1">I'm 230 px wide</div>
<div class="div-2">I'm take up what is left in the view port!</div>
<div class="div-3"></div>
<div class="div-4"></div>
<div class="div-5"></div>
<div class="div-6"></div>
<div class="div-7"></div>
<div class="div-8"></div>
</div>
Modify .container css
.container {
display: flex;
/* width: fit-content; */
...
So that div-1 stretches the width of the container.
I have two buttons in my template like so:
I'm trying to ensure they remain symmetrical in size (height and width) over smaller screens. Yet, as screen width decreases, this happens:
How do ensure the Foo button is the same height as the Bar Foo Bar button even over smaller screen sizes? Looking for the simplest, purely CSS-based solution.
My current CSS looks like this:
<style>
div.tab {
overflow: hidden;
background-color: white;
text-align:center;
display:inline-block;
width:95%;
max-width:400px;
padding:5px;
}
div.tab button {
background-color: #eeeeee;
float: left;
padding: 0.5em;
border: none;
width:49.5%;
}
div.tab button:hover{
border-bottom: 2px solid #ffa726;
color:#fb8c00;
}
</style>
<div class="tab">
<button>Foo</button>
<button style="float:right;border-bottom: 2px solid #ffa726;color:#fb8c00;background-color:#fff3e0;"><b>Bar Foo Bar</b></button>
</div>
Using display:flex in div.tab results in this:
You can achieve that by using display: flex:
div.tab {
overflow: hidden;
background-color: white;
text-align: center;
display: inline-block;
width: 95%;
max-width: 400px;
padding: 5px;
display: flex; /*here*/
}
div.tab button {
background-color: #eeeeee;
float: left;
padding: 0.5em;
border: none;
width: 49.5%;
}
div.tab button:hover {
border-bottom: 2px solid #ffa726;
color: #fb8c00;
}
<div class="tab">
<button>Foo</button>
<button style="float:right;border-bottom: 2px solid #ffa726;color:#fb8c00;background-color:#fff3e0;"><b>Bar Foo Bar</b></button>
</div>
Giving that you are using links as child elements, the solution is display-table:
div.tab {
overflow: hidden;
background-color: white;
text-align: center;
width: 95%;
max-width: 400px;
padding: 5px;
display: table;
}
div.tab a {
display: table-cell;
width: 1%;
height: 100%;
}
div.tab a button {
padding: 0.5em;
border: none;
vertical-align: middle;
width: 98%;
background-color: #eeeeee;
display: inline-block;
height: 100%;
}
div.tab button:hover {
border-bottom: 2px solid #ffa726;
color: #fb8c00;
}
<div class="tab">
<a href="#/">
<button>Foo</button>
</a>
<a href="#/">
<button style="border-bottom: 2px solid #ffa726;color:#fb8c00;background-color:#fff3e0;"><b>Bar Foo Bar</b></button>
</a>
</div>
Text overflowing beyond the DIV while scrolling
How can prevent the text from exceeding the DIV box while scrolling?
What are the changes that I need to change?
.trending {
width: 50%;
float: left;
padding-top: 6px;
}
.trending-box {
margin-left: 5px;
background-color: #e9ebee;
color: #4b4f56;
}
.trending-box h3 {
text-align: center;
padding: 3px 3px 3px 3px;
}
.trending-align {
background-color: palegreen;
padding: 3px 3px 3px 3px;
}
.trending-content {
background-color: #111;
width: 100%;
}
<div class="trending">
<div class="trending-box">
<h3>Top Trending</h3>
<div class="trending-align">
<div class="trending-content">
Some random text
</div>
</div>
</div>
</div>
.trending {
width: 50%;
float: left;
padding-top: 6px;
}
.trending-box {
margin-left: 5px;
background-color: #e9ebee;
color: #4b4f56;
}
.trending-box h3 {
text-align: center;
padding: 3px 3px 3px 3px;
}
.trending-align {
background-color: palegreen;
padding: 3px 3px 3px 3px;
}
.trending-content {
background-color: #111;
width: 200px;
height: 100px;
overflow: scroll;
}
<div class="trending">
<div class="trending-box">
<h3>Top Trending</h3>
<div class="trending-align" >
<div class="trending-content" >
Some random text Some random text Some random text Some random text Some random text Some random text Some random text Some random text
</div>
</div>
</div>
you can use CSS overflow Property
overflow: scroll;
try this - http://jsfiddle.net/MadhawaMB/rJy94/41/
.trending-content {
background-color: #111;
width: 200px;
height: 100px;
overflow: scroll;
}
I don't get what you mean by scroll
But possibly you mean to extra wrap the text inside the div
, here the solution for that
just include
word-wrap: break-word;
.trending {
width: 50%;
float: left;
padding-top: 6px;
}
.trending-box {
margin-left: 5px;
background-color: #e9ebee;
color: #4b4f56;
}
.trending-box h3 {
text-align: center;
padding: 3px 3px 3px 3px;
}
.trending-align {
background-color: palegreen;
padding: 3px 3px 3px 3px;
}
.trending-content {
word-wrap: break-word; //here
background-color: #111;
width: 100%;
}
<div class="trending">
<div class="trending-box">
<h3>Top Trending</h3>
<div class="trending-align">
<div class="trending-content">
Some random textdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
</div>
</div>
</div>
</div>
I would like to make number 1 to have blue background and red text but this code doesn't work. What am I missing?
Thanks!
#testtest
{
background-color: white;
border-width: 1px;
border-style: solid;
border-color: #DDDDDD;
text-align: center;
line-height:35px;
}
#testtest span.saa
{
color: yellow;
background.color: #F0F0FF;
padding: 8.25px;
margin-left: 5px;
}
#testtest span.sss
{
color: red;
background-color: blue;
padding: 8.25px;
margin-left: 5px;
}
<div id="testtest" >
<span class="sss">1</span>
<span class="saa">2</span>
<span class="saa">3</span>
<span class="saa">26</span>
<span class="saa">-></span>
</div>
You have an unwanted colon after span.sss! try:
#testtest span.sss
{
color: red;
background: blue;
padding: 8.25px;
margin-left: 5px;
}
I want to place a white border around the slider like this >> .
I tried using .coin-slider img { border: 2px solid white;} , but it didn't work.
Coin-slider link >> Coin-slider official site
HTML:
<div id='coin-slider'>
<img src='images/slideshow1x.png' />
<span>
Description for img01
</span>
<img src='images/slideshow2x.jpg' />
<span>
Description for img01
</span>
<img src='images/slideshow3x.jpg' />
<span>
Description for img01
</span>
<img src='images/slideshow4x.jpg' />
<span>
Description for img01
</span>
</div>
CSS:
.coin-slider { overflow: hidden; zoom: 1; position: relative; }
.coin-slider img { border: 2px solid white;}
/*.coin-slider a{ text-decoration: none; outline: none; border: none; } */
.cs-buttons { font-size: 0px; padding: 10px; float: left; }
/*.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }*/
.cs-active { background-color: #B8C4CF; color: #FFFFFF;}
.cs-title { width: 545px; padding: 10px; background-color: #000000; color: #FFFFFF; }
.cs-prev,
.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }
In your HTML, coin-slider is the id of the div, and not class, whereas in your CSS you are referring to .coin-slider everywhere.
Change <div id='coin-slider'> to <div class='coin-slider'> in your HTML and everything should work fine.
Here is a demo.
White Border for the Coin-Slider can be set by adding the style
border: 2px solid white;
to the Cascading Stylesheet 'coin-slider-style.css' as
.coin-slider {overflow:hidden; zoom:1; position:relative; border:2px solid white;}