The block size must not be greater than necessary.
I need to avoid the space to the right of the red line...
.item {
display: flex;
align-items: center;
}
.item-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: green;
margin-right: 20px;
}
.item-text {
outline: 1px solid green;
font-size: 20px;
max-width: 100px;
}
<div class="item">
<div class="item-icon"></div>
<div class="item-text">lorem a morem</div>
</div>
The problem you're having is simply how CSS works when wrapping text.
You can avoid the problem by adding a <br> tag where you want the break to occur.
Something like this:
.item {
display: flex;
align-items: center;
}
.item-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: green;
margin-right: 20px;
}
.item-text {
outline: 1px solid green;
font-size: 20px;
max-width: 100px;
}
<div class="item">
<div class="item-icon"></div>
<div class="item-text">lorem a<br>morem</div>
</div>
Here's a more detailed explanation: Make container shrink-to-fit child elements as they wrap
Use word-break property, like:
.item-text {
word-break: break-all;
}
Have a look at the snippet below:
.item {
display: flex;
align-items: center;
}
.item-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: green;
margin-right: 20px;
}
.item-text {
outline: 1px solid green;
font-size: 20px;
max-width: 100px;
word-break: break-all;
}
<div class="item">
<div class="item-icon"></div>
<div class="item-text">lorem a morem</div>
</div>
Hope this helps!
Related
I really don't know what I'm doing wrong here. I want the image inside the box to stay centered when the window shrinks. Furthermore, I would have thought that align-items: center; would work, but apparently not. The colors are only relevant for me, so I understand what's going on. I don't know if there is a solution for this either, but I hope so. And please ignore the naming and order of the individual classes, I couldn't do better ...:)
.megadiv {
max-width: 1600px;
margin: auto;
text-align: center;
}
.centerbox {
display: flex;
justify-content: space-between;
}
.left {
width: 64%;
background-color: red;
justify-content: space-between;
border: 2px solid gray;
display: flex;
}
.insideleft {
width: 20%;
background-color: yellow;
align-items: center;
text-align: center;
align-content: center;
}
.insideright {
width: 78%;
background-color: purple;
float: right;
padding-top: 2%;
text-align: left;
border-left: 2px ridge #ffa54f;
padding-left: 2%;
padding-bottom: 1%;
}
.picture {
width: 80%;
border-radius: 1%;
margin-top: 10%;
margin-bottom: 8%;
}
.right {
width: 34%;
border: 2px solid gray;
height: 20px;
}
h7 {
color: rgb(0, 153, 158);
font-size: large;
font-family: sans-serif;
}
.textpart {
margin-bottom: 0.5%;
}
<div class="megadiv">
<div class="centerbox">
<div class="left">
<div class="insideleft">
<h20>
<a href="">
<img class="picture" src="https://images-na.ssl-images-amazon.com/images/I/71hi8fWdX2L.jpg"> </a>
</h20>
</div>
<div class="insideright">
<h7>Headline</h7><br>
<h4>
<div class="textpart">Authors</div>
<div class="textpart">Views <a class="" href="">Chapter 2</a></div>
<div class="textpart">Genres: Action - Adventure - Comedy</div>
<div class="textpart">Rating: ⭐⭐⭐⭐⭐</div>
</h4>
</div>
<div class="right">
wawaeaweew
</div>
</div>
</div>
h4 and h20 are empty
You're pretty close to getting the image vertically aligned as you wanted. Try this out, and see if this works the way you would like:
.megadiv {
max-width: 1600px;
margin: auto;
text-align: center;
}
.centerbox {
display: flex;
justify-content: space-between;
}
.left {
width: 64%;
background-color: red;
justify-content: space-between;
border: 2px solid gray;
display: flex;
}
.insideleft {
display: flex;
width: 20%;
background-color: yellow;
align-items: center;
text-align: center;
align-content: center;
}
.insideright {
width: 78%;
background-color: purple;
float: right;
padding-top: 2%;
text-align: left;
border-left: 2px ridge #ffa54f;
padding-left: 2%;
padding-bottom: 1%;
}
.picture {
width: 80%;
border-radius: 1%;
margin-top: 10%;
margin-bottom: 8%;
}
.right {
width: 34%;
border: 2px solid gray;
height: 20px;
}
h7 {
color: rgb(0, 153, 158);
font-size: large;
font-family: sans-serif;
}
.textpart {
margin-bottom: 0.5%;
}
<div class="megadiv">
<div class="centerbox">
<div class="left">
<div class="insideleft">
<a href="">
<img class="picture" src="https://images-na.ssl-images-amazon.com/images/I/71hi8fWdX2L.jpg"> </a>
</div>
<div class="insideright">
<h7>Headline</h7><br>
<h4>
<div class="textpart">Authors</div>
<div class="textpart">Views <a class="" href="">Chapter 2</a></div>
<div class="textpart">Genres: Action - Adventure - Comedy</div>
<div class="textpart">Rating: ⭐⭐⭐⭐⭐</div>
</h4>
</div>
<div class="right">
wawaeaweew
</div>
</div>
</div>
I saw you used align-items: center; in the .insideleft CSS selector which is for aligning a container's children to the center like you want, you'll just want to make this a flexbox to make this work. To do this, simply add display: flex; to the .insideleft selector like in the example. I also removed the <h20> tag from the HTML as this is not valid or necessary.
As for the image shrinking down when the screen width is shrinked - this is because you're using percentages for the widths for all the containers and the image. If you want the image to stop shrinking after a certain point, you can add min-width: 80px; /* (this can be any number of pixels) */ to your .picture selector to make the image stop shrinking once it gets to a certain width of pixels.
Flexbox is super useful for position elements in CSS and I'd recommend looking into this more to have a better understanding. Check out this link here if you'd like an overview of the different flexbox CSS properties.
I am not 100% sure on your intent - Here I changed the class names a bit for clarity and adjusted the markup for a left-middle-right
Not a huge fan of % for padding and margin sizing myself (em feels more clear since it is based on the current font size)
Not strictly needed but I added the containing element class in a few places in CSS for clarity example: .left-pane .picture-container
.page-container {
max-width: 1600px;
text-align: center;
}
.container-box {
display: flex;
align-content: space-between;
}
.container-box .left-pane {
width: 20em;
display: flex;
align-items: center;
justify-content: center;
background-color: #FF0000;
border: 2px solid gray;
}
.left-pane .picture-container {
width: 30%;
background-color: yellow;
align-items: center; /* vertical */
align-content: center; /* horizontal */
}
.left-pane .picture-container .picture {
width: 80%;
border-radius: 1%;
margin-top: 10%;
margin-bottom: 8%;
}
.container-box .middle-pane {
width: 70em;
background-color: #FFDDDD;
padding-top: 2%;
padding-left: 2%;
padding-bottom: 1%;
border-left: 2px ridge #ffa54f;
}
.middle-pane .headline {
color: rgb(0, 153, 158);
font-size: 1.5em;
font-family: sans-serif;
margin-bottom: 1em;
background-color: #eeeeee;
}
.middle-pane .textpart {
margin-bottom: 0.5em;
}
.container-box .right-pane {
height: 20px;
border: 2px solid gray;
}
<div class="page-container">
<div class="container-box">
<div class="left-pane">
<div class="picture-container">
<div>
<a href="">
<img class="picture" src="https://images-na.ssl-images-amazon.com/images/I/71hi8fWdX2L.jpg"> </a>
</div>
</div>
</div>
<div class="middle-pane">
<div class="headline">Headline</div>
<h4>
<div class="textpart">Authors</div>
<div class="textpart">Views <a class="" href="">Chapter 2</a></div>
<div class="textpart">Genres: Action - Adventure - Comedy</div>
<div class="textpart">Rating: ⭐⭐⭐⭐⭐</div>
</h4>
</div>
<div class="right-pane">
wawaeaweew
</div>
</div>
</div>
I have a small div with fixed width and height, inside i have text, that could be probably wrapped and icon
All i need is to keep icon as close as possible to text, but if text is wrapped it will have extra space inside it
Example at JsFiddle
HTML
<div class="wrapper">
<div class="title">
Total elements
</div>
<div class="icon"></div>
</div>
Css
wrapper {
display: flex;
align-items: center;
justify-content: flex-start;
height: 50px;
width: 100px;
}
.title {
border: 1px solid green;
}
.icon {
border: 1px solid red;
width: 8px;
height: 8px;
}
You can use CSS Grid system:
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 0em;
height: 50px;
width: 100px;
}
SOLUTION 1:
Well. To answer your question, you can straight ahead apply width to the .title.
.wrapper {
display: flex;
align-items: center;
justify-content: flex-start;
height: 50px;
width: 100px;
}
.title {
border: 1px solid green;
width: 58px;
}
.icon {
border: 1px solid red;
width: 8px;
height: 8px;
}
<div class="wrapper">
<div class="title">
Total elements
</div>
<div class="icon"></div>
</div>
SOLUTION 2:
But I would suggest that you use float instead of flex model with the below solution
.wrapper {
height: 50px;
font-size: 0px;
}
.title {
border: 1px solid green;
height: 50px;
line-height: 50px;
}
.icon {
border: 1px solid red;
width: 8px;
height: 8px;
}
.title, .icon {
display: inline-block;
vertical-align: middle;
font-size: 16px;
}
<div class="wrapper">
<div class="title">
Total elements
</div>
<div class="icon"></div>
</div>
<div class="wrapper">
<div class="title">
Total elements
</div>
<div class="icon"></div>
</div>
<style type="text/css">
.wrapper
{
}
.title {
border: 1px solid green;
display: inline-block;
max-width: 60px;
vertical-align: middle;
}
.icon
{
border: 1px solid red;
width: 8px;
height: 8px;
display: inline-block;
}
</style>
HTML:
<div id="wrap">
<div id="block1"></div>
<div id="block2"></div>
</div>
CSS:
div#wrap{
margin-top: 3em;
border: solid 1px black;
text-align: center;
}
div#wrap *{
display: inline-block;
width: 12.5em;
margin-top: 1em;
height: 8em;
}
div#wrap *:not(:last-child){
margin-right: 8em;
}
#block1{
background: orange;
}
div#wrap #block2{
background: magenta;
}
These 2 blocks are supposed to be centered in responsive design mode. When the screen is wide enough to have 2 blocks in a row, the code works. But when I narrow the screen down, the top block is shifted to the left because of the margin:
fiddle
Is it possible to fix this without media queries?
Edit
I tried flex-box:
div#wrap{
margin-top: 3em;
border: solid 1px black;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
fiddle2
A solution is to use flex and justify-content:space-around and remove margin:
div#wrap {
margin-top: 3em;
border: solid 1px black;
justify-content:space-around;
display: flex;
flex-wrap: wrap;
}
div#wrap * {
display: inline-block;
width: 12.5em;
margin-top: 1em;
height: 8em;
}
#block1 {
background: orange;
}
#block2 {
background: magenta;
}
<div id="wrap">
<div id="block1"></div>
<div id="block2"></div>
</div>
If you use a container with negative margin, you don't need to vary the margin for the endpoints of the rows at different breakpoints and you can just go with inline-block. I set font-size to zero in the container so I can calculate my widths using percents without worrying about white space.
div#wrap {
margin-top: 3em;
border: solid 1px black;
padding: 20px;
text-align: center;
}
.block {
display: inline-block;
width: 12.5em;
margin: 20px;
height: 8em;
font-size: 16px;
}
.block-container {
margin: -20px;
font-size: 0;
}
#block1 {
background: orange;
}
#block2 {
background: magenta;
}
<div id="wrap">
<div class="block-container">
<div class="block" id="block1"></div>
<div class="block" id="block2"></div>
</div>
</div>
I want "About This Page" and "Around the web" to be horizontally aligned.
Also, open to any suggestions for improving this snippet of code. I just want to have a responsive / simple two column layout behind a wide colored background.
.footer-above {
width: 100%;
height: 200px;
background-color: #aaa;
padding-top: 30px;
padding-bottom: 30px;
color: white;
font-size: 20px;
}
.footer-links,
.built-with {
display: inline-block;
max-width: 40%;
height: 100%;
border: 2px solid black;
}
.container {
margin: 0 auto;
width: 500px;
height: 100%;
}
<div class="footer-above">
<div class="container">
<div class="built-with">
<h3>ABOUT THIS PAGE</h3>
<p> Made with HTML5Boilerplate</p>
</div><!--built-with-->
<div class="footer-links">
<h3>AROUND THE WEB</h3>
</div><!--footer-links-->
</div><!--container-->
</div><!-- footer-above -->
I would recommend using flexbox for this, which can be achieved by simply adding:
.container {
display: flex;
align-items: center;
justify-content: center;
}
If you want to have both boxes occupy the same height, you'll need a fixed height on .footer-links and .built-with. I've gone with 150px in the following example:
.footer-above {
width: 100%;
height: 200px;
background-color: #aaa;
padding-top: 30px;
padding-bottom: 30px;
color: white;
font-size: 20px;
}
.footer-links,
.built-with {
display: inline-block;
max-width: 40%;
height: 150px;
border: 2px solid black;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
<div class="footer-above">
<div class="container">
<div class="built-with">
<h3>ABOUT THIS PAGE</h3>
<p> Made with HTML5Boilerplate</p>
</div><!--built-with-->
<div class="footer-links">
<h3>AROUND THE WEB</h3>
</div><!--footer-links-->
</div><!--container-->
</div><!-- footer-above -->
Flexbox has support in every browser apart from Internet Explorer (though it's coming to IE as well). If you'd like to support Internet Explorer as well, you can use vertical-align: middle along with display: inline-block, as is demonstrated in this answer.
Hope this helps! :)
Simply use flex. Read about it here
.footer-above {
width: 100%;
height: 200px;
background-color: #aaa;
padding-top: 30px;
padding-bottom: 30px;
color: white;
font-size: 20px;
}
.footer-links,
.built-with {
display: inline-block;
max-width: 40%;
height: 100%;
border: 2px solid black;
}
.container {
margin: 0 auto;
width: 500px;
height: 100%;
display: inline-flex;
}
<div class="footer-above">
<div class="container">
<div class="built-with">
<h3>ABOUT THIS PAGE</h3>
<p> Made with HTML5Boilerplate</p>
</div><!--built-with-->
<div class="footer-links">
<h3>AROUND THE WEB</h3>
</div><!--footer-links-->
</div><!--container-->
</div><!-- footer-above -->
Use table-cell as display property
.footer-links,
.built-with {
display: table-cell;
max-width: 40%;
height: 100%;
border: 2px solid black;
}
I think , it'll horizontally aligned these boxes
this is based off of obsidian ages answer since it wasn't updated to match my exact question.
I edited .footer-above to 1400px since width:100% with code doesn't scale as viewport width changes.
Also, it should be align-items: flex-start; on container class, since i want a baseline at the top of parent div
.footer-above {
width: 1400px;
height: 200px;
background-color: #aaa;
padding-top: 30px;
padding-bottom: 30px;
color: white;
font-size: 20px;
}
.footer-links,
.built-with {
display: inline-block;
width: 40%;
height: 150px;
border: 2px solid black;
}
.container {
margin: 0 auto;
width: 960px;
display: flex;
align-items: flex-start;
justify-content: center;
}
<div class="footer-above">
<div class="container">
<div class="built-with">
<h3>ABOUT THIS PAGE</h3>
<p> Made with HTML5Boilerplate</p>
</div><!--built-with-->
<div class="footer-links">
<h3>AROUND THE WEB</h3>
</div><!--footer-links-->
</div><!--container-->
</div><!-- footer-above -->
I am working on a webpage and the idea is that there are boxes at the bottom
of the page with some text on it. So making a box is not that hard,
but my question is: How can you make the boxes like this that I drew:
How can you make/arrange the boxes like on the link I provided. My attempts at making it the same has thus far failed, the boxes aren't appearing or it looks very messy.
So far I have this:
.div1 {
width: 500px;
height: 100px;
border-radius: 25px;
padding: 15px;
box-sizing: border-box;
background: #73B7DB;
margin-left: 5%;
color: #fff;
}
.div2 {
width: 200px;
height: 100px;
border-radius: 25px;
padding: 15px;
box-sizing: border-box;
background: #73B7DB;
color: #fff;
margin-left: 5%;
}
.container2 {
float: left;
margin: 0 auto;
width: 100%;
display: flex;
}
<div class="container2">
<div class="div1">Title!</div>
<br>
<div class="div2">Title!</div>
</div>
You can put them in a flex wrapper and define the containers themselves also as flex containers with flex-direction: column as shown below.
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.wrapper {
display: flex;
width: 100%;
}
.container1,
.container2 {
display: flex;
flex-direction: column;
}
.container1 {
width: 70%;
}
.container2 {
width: 30%;
}
.div1 {
width: 90%;
height: 100px;
border-radius: 25px;
padding: 15px;
background: #73B7DB;
margin-left: 5%;
color: #fff;
margin-bottom: 10px;
}
.div2 {
width: 90%;
height: 160px;
border-radius: 25px;
padding: 15px;
background: green;
color: #fff;
margin-left: 5%;
margin-bottom: 10px;
}
<div class="wrapper">
<div class="container1">
<div class="div1">Title!</div>
<div class="div1">Title!</div>
<div class="div1">Title!</div>
<div class="div1">Title!</div>
<div class="div1">Title!</div>
</div>
<div class="container2">
<div class="div2">Title!</div>
<div class="div2">Title!</div>
<div class="div2">Title!</div>
<div class="div2">Title!</div>
<div class="div2">Title!</div>
</div>
</div>
isn't flex-direction: column; he need to use flex-wrap:wrap; in container 2, beacause when you use display:flex; , flexbox dont respect the width of the elements, then you need to apply the property flex-wrap:wrap;. i'll recommend you use porcentege instead pixels
.div1,.div2 {
width: 100%;
height: 100px;
border-radius: 25px;
padding: 15px;
box-sizing: border-box;
background: #73B7DB;
margin-left: 5%;
color: #fff;
}
.container2 {
float: left;
margin: 0 auto;
width: 68%;
display: flex;
flex-wrap:wrap;
}
<div class="container2">
<div class="div1">Title!</div>
<br>
<div class="div2">Title!</div>
</div>