I want the long text written in Span should wrap and it should be justified. The text should not come under the Icon.
Following is the code I am using,
<style>
.widgets_div .text_div {
display: inline-block;
margin-left: 10px;
}
.widgets_div .icon_div {
display: inline-block;
margin-left: 15px;
}
</style>
<div class="widgets_div">
<div class="icon_div">
<span><i class="fa fa-calendar"></i></span>
</div>
<div class="text_div">
<span>Upcoming Events This Is A Very Long Text Which May Wrap Into The Browser According to the width of the Browser But I am Not Sure how much your browser width will be so I am keep on writing this Dummy text so that at some point of time this whole useless text will be wrapped and my purpose will be fulfill</span><br>
<span>Description</span>
</div>
</div>
Change you CSS Like
.widgets_div .text_div {
display: inline-block;
margin-left: 10px;
width:calc(100% - 60px);
vertical-align:middle;
}
.widgets_div .icon_div {
display: inline-block;
margin-left: 15px;
width:30px;
vertical-align:middle;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="widgets_div">
<div class="icon_div">
<span><i class="fa fa-calendar"></i></span>
</div>
<div class="text_div">
<span>Upcoming Events This Is A Very Long Text Which May Wrap Into The Browser According to the width of the Browser But I am Not Sure how much your browser width will be so I am keep on writing this Dummy text so that at some point of time this whole useless text will be wrapped and my purpose will be fulfill</span><br>
<span>Description</span>
</div>
</div>
Another solution without the vertical align,
.widgets_div .text_div {
display: inline-block;
margin-left: 25px;
margin-top: -20px
}
.widgets_div .icon_div {
display: inline-block;
margin-left: 15px;
}
<div class="widgets_div">
<div class="icon_div">
<span><i class="fa fa-calendar"></i></span>
<div class="text_div">
<span>Upcoming Events This Is A Very Long Text Which May Wrap Into The Browser According to the width of the Browser But I am Not Sure how much your browser width will be so I am keep on writing this Dummy text so that at some point of time this whole useless text will be wrapped and my purpose will be fulfill</span><br>
<span>Description</span>
</div>
</div>
</div>
Related
I've run into some CSS positioning issues. After reading some other questions, I have been unable to find my exact issue or anything that I can identify that would indicate how I could resolve my issue.
I have an undefined number of rows of data that need to follow the same structure. The structure is as follows:
A colored icon on the left
Undefined length of text on the right
So far I have the following result which I am happy with in regards to single line text:
When I have the text extend beyond a single line however, I end up with the following result:
I need to make it so that my text is always aligned vertically with my icon, so that the middle of the text lines up with the middle of the icon. The only fixed values I have are for the widths of my icons. I unfortunately can't fix the width of the text div as it needs to expand as the window expands.
I have got the following structure to create the images presented:
<div class="row">
<div class="iconDiv">
<div class="circle"></div>
</div>
<div class="informationDiv">
<span class="information"></span>
</div>
</div>
.row {
clear: left;
}
.iconDiv {
float: left;
margin-left: 10px;
}
.informationDiv {
display: inline-block;
float: left;
padding-top: 3px; /*How I am currently aligning my text vertically to center of icon*/
}
I have tried using box-sizing just incase this was pushing the div to the next line but it didn't seem to help. I've also tried setting the height of the div but again no luck. The truth is that CSS is not my strong point and that I can miss what the real reason behind a problem is. If there are any resources anyone would recommend in particular to assist with this side of positioning, that would be fantastic. Additionally if the way that I am containerising (surely that is a word) things is not recommended, I am more than open to changing that.
If this is too difficult without using fixed values, then I could alternatively make it so that the icon remains towards the top of the row, and the text continues to descend as it grows, with the top of the text being aligned close ot the top of the icon. This is definitely not the preference however.
Thanks you all in advance!
You can simplify this down to one flex parent and two children. Vertical alignment with flexbox is hassle-free.
Demo
.row {
display: flex;
align-items: center;
}
.row {
margin-bottom: 1.2em;
}
.circle {
border-radius: 50%;
width: 40px;
height: 40px;
margin-right: 15px;
flex-shrink: 0;
}
.circle.high-pri {
background-color: #ea9999;
}
.circle.medium-pri {
background-color: #f9cb9c;
}
.circle.low-pri {
background-color: #b6dca8;
}
<div class="row">
<div class="circle high-pri"></div>
<span class="information">High priority - No issues here</span>
</div>
<div class="row">
<div class="circle medium-pri"></div>
<span class="information">High priority - No issues here but slightly longer text</span>
</div>
<div class="row">
<div class="circle low-pri"></div>
<span class="information">High priority - No issues but much longer text than first expected, which is definitely okay, see?</span>
</div>
I am not quite sure how you are generating the circle, Is it an icon or an image? When you are using an icon. You can symply create something like this:
<p><img class="circle">Undefined text</p>
I think this won't break the line. And always keep it in front.
Also. You should probably not use padding-top on the text for aligning it in the middle of the circle. Use line-height.
For example:
When your circle is 30 px high. Use line-height: 30px; This will always keep it centered next to the circle and works better than padding regarding to responsiveness.
You're not far off.
Given your current CSS, the best way to achieve this is to not float .informationDiv. Set it to display: block and then give it a margin-left. The floated element will then sit inside the margin.
Like this...
.circle {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: red;
}
.row {
clear: left;
}
.iconDiv {
float: left;
margin-left: 10px;
}
.informationDiv {
display: block;
margin-left: 40px;
}
<div class="row">
<div class="iconDiv">
<div class="circle"></div>
</div>
<div class="informationDiv">
<span class="information">A very long sentence that wraps. A very long sentence that wraps. A very long sentence that wraps. A very long sentence that wraps. A very long sentence that wraps. A very long sentence that wraps. A very long sentence that wraps. </span>
</div>
</div>
I have come up with a solution for your issue by using css flexbox.
Working demo : https://codepen.io/shubhamYerawar/pen/xBZWLX.
.container {
display: flex;
flex-direction: column;
}
.container__row {
display: flex;
flex-direction: row;
align-items: center;
}
.icon {
width: 20px;
height: 20px;
border-radius: 50%;
margin: 10px;
}
.red {
background: red
}
.green {
background: green;
}
<div class="container">
<div class="container__row">
<div class="icon red">
<!-- here your icon or image will go -->
</div>
<div class="text">Text</div>
</div>
<div class="container__row">
<div class="icon_container">
<div class="icon green">
<!-- here your icon or image will go -->
</div>
</div>
<div class="text">
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged.
</div>
</div>
<div class="container__row">
<div class="icon red">
<!-- here your icon or image will go -->
</div>
<div class="text">Text</div>
</div>
</div>
Hope this helps you.
Why does Vertical-align not work on the element I am trying to align? But works if I align other elements around it?
I have read few articles on vertical align, which state that it was created to align tables or inline elements.
Hence I set all my elements as inline-block, in the code.
When I try to vertical-align the menu links, it does relatively nothing.
If I try to align 1 box to the left or right of menu links it will push down the menu.
But if I vertical-align both boxes at once, the text gets aligned.
What does this happen, how am I supposed to use vertical-align, or am I not supposed to use it anymore?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FlexPractice</title>
<link rel="stylesheet" href="practiceflex.css">
</head>
<body>
<nav class="container">
<div class="logo">
<div class="box" id="box1"> </div>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Our mission</li>
<li>Services</li>
<li>About Us</li>
<li>Leave a comment</li>
</ul>
</div>
<div class="profilepic">
<div class="box" id="box2"> </div>
</div>
</nav>
</body>
</html>
html,body{
padding:0px;
margin:0px;
}
.box{
width: 48px;
height:50px;
background: red;
}
.menu > ul > li{
text-decoration: none;
display:inline;
margin-right:20px;
}
.container
{
display:inline-block;
/* vertical-align: middle;*/
}
.container * {
display:inline-block;
/* vertical-align: middle;*/
}
/*
#box1{
vertical-align: middle;
}
#box2{
vertical-align: middle;
}*/
https://jsfiddle.net/curiousproger/gurmL8f9/
Refer to MDN docs vertical-align. One use case is indeed for table-cells, the other is, as stated on MDN:
To vertically align an inline element's box inside its containing line box (emphasis mine)
This means 2 things:
vertical-align will only affect elements with display: inline or display: inline-block
the line-height property of the parent, and of any children may greatly influence the resulting alignments of all elements involved.
With extra levels of nesting, line-height being important for text alignment and line breaks, vertical-align is best used for inline content like paragraph text, images, icons, footnote references etc. For vertically centering block-level elements (like a navigation) it is much safer to use display: flex; align-items: center; on the parent
For illustration purposes of potential problems I included some test cases below.
[id^="case"] { border: 1px solid; height: 50px; }
code { display: inline-block; }
.box {
display: inline-block;
width: 32px;
height: 32px;
background: red;
vertical-align: middle;
}
#case-2, #case-3 {
line-height: 50px;
}
#case-3 code {
line-height: 100px;
vertical-align: middle;
}
#case-3 .box {
line-height: 20px;
vertical-align: middle;
}
<h2>vertical-align tests</h2>
<div id="case-1">
<span class="box"></span>
<code>#case-1</code>
<span class="box"></span>
</div>
<div id="case-2">
<span class="box"></span>
<code>#case-2</code>
<span class="box"></span>
</div>
<div id="case-3" style="line-height: 0;">
<span class="box"></span>
<code>#case-3</code>
<span class="box"></span>
</div>
<h2>Flexbox</h2>
<div id="case-4" style="display: flex; align-items: center;">
<span class="box"></span>
<code>#case-3</code>
<span class="box"></span>
</div>
The vertical alignment default setting (i.e. if you don't define anything else) is baseline, which is the baseline of the last line of text inside an element. If there is no text, it's the bottom border instead.
In this variation of your fiddle the first box (no text) is aligned to the baseline of the text elements by its bottom border, in the other box (containing text now) the last text line is aligned to the other text elements:
https://jsfiddle.net/x3q0v5ab/
Note: I didn't change the CSS, i only put some text into the second block.
So if you use a vertical-align setting other than baseline, use the same on both blocks.
I have the following fiddle: http://jsfiddle.net/stpra123/7cap7o7s/7/
#my_input flows outside of the cell. I need #my_input to fill up the entire width - no more, no less. (Setting #my_input's width to something less than 100% could correct the issue but on some screen sizes but depending on the screen size it doesn't guarantee that it will always line up well). Is there another way to make #my_input fit better?
HTML
<div class="site-body">
<div class="site-center">
<div class="cell">
<div class="col width-fill">
<div class="container">
<form>
<input id="my_input" value="I am a bit messed up!" />
<i class="fa fa-calendar"></i>
</form>
</div>
</div>
</div>
<div class="cell">
<div class="col width-fill text">
This is some text that goes directly below #my_input and the widths need to match otherwise
everything kind of looks funny.
</div>
</div>
</div>
</div>
CSS
.cell{
border: 1px solid red;
height: 50px;
}
.container{
position: relative;
width: 100%;
}
#my_input{
margin-top: 10px;
width: 100%;
}
.fa-calendar{
position: absolute;
right: 4px;
top: 18px;
}
Just add box-sizing:border-box on the input:
#my_input{
margin-top: 10px;
width: 100%;
box-sizing:border-box;
}
And it will not go outside.
I am trying to make these blocks of info the same size regardless of the number of words each one holds. As seen in the example, when one block has less text than the other, one gets a bit smaller and the other remains a different size.
Now my question is, How do I achieve having these blocks the same size regardless of its content or image? I am also going to use another pair right below them.
Here is the CSS code:
/***********All containers**************/
.bottomContainers{
position: absolute;
margin-left: 0%;
display: inline-box;
}
/**********Small Containers*************/
.container{
max-width: 30%;
max-height: 30%;
margin-top:5%;
margin-bottom: 5%;
margin-left: 10%;
padding-left: 2%;
padding-right: 2%;
padding-bottom: 2%;
background-color: #ecf0f1;
color: grey;
display: inline-block;
/*display: inline-block;*/
border-radius: 5px;
border-bottom: 2px solid grey;
}
Here is the HTML code:
<div class="bottomContainers" role="moreInfo">
<!--Small Inner Containers for Information-->
<div class="container" id="firstContainer">
<br />
<center><img src="img/map.png"></center>
<br>
<article>
Some random text is in this block, It doesnt size like the next one
</article>
</div>
<div class="container" id="firstContainer">
<br />
<center><img src="img/money.png"></center>
<br>
this is another block which also doesnt scale to the other block regardless of text inside of it
</div>
What did I possibly do wrong here ?
I am heavily refactoring your original code in this solution. If this is a static width website then having static width cells won't be a problem. If you want this solution to be responsive you will have a lot of issues with it:
http://jsfiddle.net/VET6x/1/
I positioned the image and its corresponding text using absolute. Again that will work with a static layout, once it goes responsive there will be problems.
<div class="bottomContainers">
<div class="container">
<div>
<img src="http://placekitten.com/g/80/80" />
</div>
<div>
Some random text is in this block, It doesnt size like the next one
</div>
</div>
<div class="container">
<div>
<img src="http://placekitten.com/g/80/80" />
</div>
<div>
This is another block which also doesnt scale to the other block regardless of text inside of it
</div>
</div>
</div>
.bottomContainers { overflow:hidden; }
.container {
width:200px;
height:200px;
float:left;
position:relative;
margin:5% 5%;
padding:2%;
background-color: #ecf0f1;
color: grey;
border-radius: 5px;
border-bottom: 2px solid grey;
}
.container > div { position:absolute; bottom:10px; }
.container > div:first-child { position:absolute; top:10px }
If it were me I would find someway to avoid static height cells.
Here is one solution that may work for you:
Demo Fiddle
I changed up your code a bit. Using the center tag is frowned upon, also it looks like the br tags were there for spacing, which could be done with margin. I ended up giving .container a specified height, the main drawback in that being if the window is sized down too far the overflow text will be hidden.
HTML:
<div class="bottomContainers" role="moreInfo">
<div class="container" id="firstContainer">
<img src="http://www.placehold.it/100x100">
<p>
Some random text is in this block, It doesnt size like the next one
</p>
</div>
<div class="container" id="firstContainer">
<img src="http://www.placehold.it/100x100">
<p>
this is another block which also doesnt scale to the other block regardless of text inside of it
</p>
</div>
</div>
CSS:
.container{
// your current styles here
overflow: hidden;
height: 200px;
display: block;
float: left;
}
.container img {
display: block;
margin: 10px auto 0px;
}
This is a quick fix, but setting an explicit height on the objects will have them all be the same height. This requires some playing around with the best size and such but it will fix your problem. I'm curious how a professional would fix this problem.
Some other things with your code. Centering the <img> using HTML is discouraged, use css instead. Also, where are the <br> tags and why are some closed but some aren't?
Maybe you can use display:table;, display:table-row; and display:table-cell;. This way, your div will act like column of a table. They will stay at the same height.
Take a look at this jsfiddle!
I have a simple HTML structure (jsfiddle):
<li>
<div class="buttons">
<img src="done.png">
</div>
<div class="owners">
Даня Абрамов и Саша Васильев
</div>
<div class="text">
трали-вали трали-вали трали-вали трали-вали
</div>
</li>
buttons, owners and text have display: inline-block.
This looks fine when text is fairly small:
However, as the text grows, inline-block elements extend and eventually fall over the line:
This is ugly, and I would like to avoid that.
What I want to achieve instead is this:
When the text is too large to fit inside the element, I want it to be wrapped by lines.
I tried setting float: left on the elements, but couldn't get it working.
What's the proper way to do this with HTML and CSS (no tables)?
The exact result you desire can be achieved if you use floats instead of display: inline-block.
See: http://jsfiddle.net/thirtydot/CatuS/
li {
overflow: hidden;
}
.buttons, .owners {
float: left;
}
.text {
overflow: hidden;
padding-left: 4px;
}
You have to specify some max-width with percentage:
<li>
<div class="buttons" style="max-width:10%;">
<img src="done.png">
</div>
<div class="owners" style="max-width:30%;">
Даня Абрамов и Саша Васильев
</div>
<div class="text" style="max-width:60%;">
трали-вали трали-вали трали-вали трали-вали
</div>
</li>
<!-- 10+30+60 = 100% -->
There is a very nice flexbox solution if you have the browser support:
/* flexbox additions */
ul li {
display: flex;
}
.buttons {
flex-shrink: 0;
}
.owners {
flex-shrink: 0;
margin-right: 6px;
}
/* original CSS (inline-block is technically no longer necessary) */
.buttons {
display: inline-block;
}
.owners {
display: inline-block;
}
.text {
display: inline-block;
}
/* the rest is visual styling */
ul li {
line-height: 1.5em;
padding: 12px 8px 12px 8px;
margin-bottom: 12px;
margin-top: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
font-size: 15px;
background-color: #DBEAFF;
min-height: 23px;
}
.buttons {
min-width: 13px;
vertical-align: top;
margin-top: 3px;
margin-bottom: -3px;
}
.buttons a {
padding: 13px 9px 5px 9px;
}
<ul>
<li>
<div class="buttons">
<img src="http://clstr.org/static/images/tick.png">
</div>
<div class="owners">
<a>Даня Абрамов</a>
</div>
<div class="text">short text
</div>
</li>
<li>
<div class="buttons">
<img src="http://clstr.org/static/images/tick.png">
</div>
<div class="owners">
<a>Даня Абрамов</a>
</div>
<div class="text">longer text longer text longer text longer text longer text longer text longer text longer text longer text
</div>
</li>
<li>
<div class="buttons">
<img src="http://clstr.org/static/images/tick.png">
</div>
<div class="owners">
<a>Даня Абрамов</a> и <a>Саша Васильев</a>
</div>
<div class="text">
longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text
longer text longer text longer text longer text longer text longer text
</div>
</li>
<li>
<div class="buttons">
<img src="http://clstr.org/static/images/tick.png">
</div>
<div class="owners">
<a>Даня Абрамов</a> и <a>Саша Васильев</a>
</div>
<div class="text">
трали-вали трали-вали трали-вали трали-вали
</div>
</li>
</ul>
I think you need to set max-width with different display mode.
li {overflow:hidden;}
li div { float:left; }
.button{ max-width: 10%;}
.owners{ max-width: 20%;}
.text{ max-width: 70%;}
See the new result here
BTW, if you use inline-block, the owners part won't stay on top.
I modified the code to fit your requirement. :)
FYI, li {overflow:hidden;} is a way to make a container to encompass its floated children.