hey i have a user info div that have user pic ,user name , user bio divs , now i want to user pic to left side and Name & bio is other side ,
Html
<div class="user-info">
<div class="user-pic">
<img src="" class="u-pic"/>
</div>
<div class="user-name">Jon Doe</div>
<div class="user-bio">I am a english teacher</div></div>
Jsfiddle
After doing this all divs have same height but i want name div to be in top and bio div should in bottom of name div .
thanks
Remove float property from user-name class
.user-info {
width: 500px;
height: 100px;
border: 1px solid #DFDFDF;
box-shadow: 0px 1px 1px #aaa;
float: left;
padding:15px
}
.user-pic {
float: left;
width: 80px;
height: 80px;
border: 1px solid #DFDFDF;
margin-right:15px;
background:blue;
}
.user-name {
//float: left;
font-size: 19px;
color: #333;
margin-right:15px;
}
.user-bio{
float: left;
font-size: 19px;
color: #333;
}
Related
I am using ngFor for displaying a list of items which are separated by a horizontal dashed line as follows:
<div *ngFor="let comment of comments;let lastItem = last;">
<div class="comment-box">
<div class="comment-author">{{comment.createdBy}}</div>
<div class="creation-date">{{comment.createdOn}}</div>
<div class="comment-text">{{comment.text}}</div>
</div>
<div class="dashed-line-box" *ngIf="!lastItem">
<hr class="new1">
</div>
</div>
.dashed-line-box {
position: relative;
background-color: #ffffff;
width: 320px;
height: 16px;
border-style: solid;// to outline the container box
border-width: thin;
}
hr.new1 {
position: absolute;
margin-top: 8px;
border-top: 1px dashed;
}
I can see rectangles for each dashed-line-box entry, but they dont contain horizontal like I am expecting.
What am I missing here?
I think you want a dashed border style in <hr>
hr.new1 {
position: absolute;
margin-top: 8px;
border-top: 1px dashed blue;
width: 100%;
}
or if you want a dashed border on outer div try below code
.dashed-line-box {
position: relative;
background-color: #ffffff;
width: 320px;
height: 16px;
border-bottom: 1px dashed green;
}
css property border-style: solid; from class .dashed-line-box is putting the box in the last line;To get a horizontal bar, you need to remove position:absolute from the class hr.new1;
relevant css:
p {
font-family: Lato;
}
.dashed-line-box {
position: relative;
background-color: #ffffff;
width: 320px;
height: 16px;
/* border-style: solid;*/
border-width: thin;
}
hr.new1 {
margin-top: 8px;
border-top: 1px dashed;
}
working stackblitz here
Why you need hr when you can achieve this using border bottom property. Just add one class to parent div and use border bottom.
.box {
border-bottom: 1px dashed;
}
<div class="box" *ngFor="let comment of comments;let lastItem = last;">
<div class="comment-box">
<div class="comment-author">{{comment.createdBy}}</div>
<div class="creation-date">{{comment.createdOn}}</div>
<div class="comment-text">{{comment.text}}</div>
</div>
</div>
This question already has answers here:
Vertically center two divs inside a wrapper (with dynamic content and content below the wrapper)
(4 answers)
Closed 7 years ago.
I have multiple boxes (items) with an item number and a description. I want to vertical align my item number regardless of the description height (using only HTML and CSS).
See this image for more info:
<div class="item">
<div class="item-number">1</div>
<div class="item-description">Text placeholder</div>
</div>
As you can see I have multiple boxes and the description text can have different lengths, so I can't absolute position my item number relative to the top.
Any one got any suggestions on how to achieve this?
you should position your number absolutely in order to achieve this. You could also minimalize markup by using a pseudo element, allowing you to do this with a single element.
I have also used a data-attr in order to allow you to dynamically alter the number within the div if you so wish.
Something like:
div {
width: 200px;
border: 5px solid lightgray;
box-shadow: 5px 5px 10px dimgray;
margin: 20px;
padding: 20px;
padding-left: 30px;
position: relative;
}
div:before {
content: attr(data-pointNum);
position: absolute;
top: 50%;
left: -5px;
box-sizing: border-box;
height: 40px;
width: 40px;
transform: translate(-50%, -50%);
text-align: center;
line-height: 30px;
border-radius: 50%;
border: 5px solid tomato;
background: white;
box-shadow: 5px 5px 10px dimgray;
}
<div data-pointNum="1">some text</div>
<div data-pointNum="2">some moretext
<br/>spanning multiple
<br/>lines</div>
Demo: http://jsfiddle.net/UI_Designer/xzmzpL4g/1/
.item{
border:1px solid #000;
padding:20px;
margin-left:20px;
position:relative;
margin-bottom:20px;
}
.item-number{
position: absolute;
left:-10px;
width:20px;
height:20px;
border:1px solid #ccc;
border-radius:50%;
text-align:center;
background:#FFF;
top: 40%;
transform: translate(-20%,0);
}
you can try this
$(document).ready(function() {
$('.item-number').css('top', ($('.item').height() / 2) + 'px');
});
.item-description {} .item {
border: 1px solid #000;
width: 150px;
padding-left: 20px;
}
.item-number {
position: absolute;
left: 5px;
width: 20px;
height: 20px;
border: 1px solid #ccc;
border-radius: 50%;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
<div class="item-number">1</div>
<div class="item-description">Text placeholder Text placeholder Text placeholder Text placeholder</div>
</div>
and this is demo
https://jsfiddle.net/0xf5hvej/
of course you will need more styling to achieve what you need but this is the basic
Trying to display a list of upcoming events, showing the date(s), an icon, and a brief description. All of these should line up side by side, like columns, but when the description wraps, it falls down to the next line. This is probably insanely simple, but I've tried various combinations of float and inline-block with no success.
<div class="events">
<ul class="list-unstyled">
<li>
<div class="event-date">Jun 16 -
<br />Jun 27</div><i class="glyphicon glyphicon-star">a</i>
<div class="event-text">Opening Day for Faculty and Staff</div>
</li>
<li>
<div class="event-date">Sep 10 -
<br />Oct 08</div><i class="glyphicon glyphicon-star">b</i> <div class="event-text">Coffee with a Cop, 7:45 a.m. # Cafeteria Courtyard</div></li>
<li>
<div class="event-date">Mar 12</div><i class="glyphicon glyphicon-ban-circle">c</i> <div class="event-text">Labor Day: Campus Closed</div></li>
</ul>
.list-unstyled {
list-style: none outside none;
padding-left: 0;
}
.events li {
border-bottom: 1px solid #4188d6;
margin-bottom:10px;
}
.event-date {
background-color: #74a2c2;
border-radius: 3px;
color: #ffffff;
display:inline-block;
font-weight: bold;
margin: 0px 10px 10px 10px;
padding: 5px;
width: 65px;
vertical-align:top
}
.event-text {
vertical-align:top;
display:inline;
border:1px solid green
}
i {
display:inline-block;
vertical-align:top;
border:1px solid red
}
http://jsfiddle.net/d4h2A/1/
Using your existing HTML (good as is), try the following CSS:
.list-unstyled {
list-style: none outside none;
padding-left: 0;
}
.events li {
border-bottom: 2px solid #4188d6;
margin-bottom:10px;
overflow: auto;
}
.event-date {
background-color: #74a2c2;
border-radius: 3px;
color: #ffffff;
font-weight: bold;
margin: 0px 10px 10px 10px;
padding: 5px;
width: 65px;
float: left;
}
.event-text {
overflow: auto;
border: 1px dotted gray;
}
i {
float: left;
vertical-align:top;
border:1px solid red;
margin-right: 10px;
}
See demo: http://jsfiddle.net/audetwebdesign/y54Zb/
To allow for a fluid width of .event-text, start by using float: left for .event-date and i (optinally, add a right margin as needed).
To contain the floated elements within the li blocks, use overflow: auto.
Finally, apply overflow: auto for .event-text to keep the text from wrapping around the floated elements.
The net result is that as you shrink the window width, the text will start wrapping at the left edge next to the icon. As you expand the window, the text will simply stay on a single line for a wide enough window (use max-width if this is an issue).
You might want to set a min-width for the text block depending on your layout design.
I am making a little layout width exactly 6 divs, and I tried various times to align it with float align, clear:both and changing height/width, but without success. I want something like this image: http://i.stack.imgur.com/j1jxX.png
HTML source:
<div id="description">
<div class="itemDescription"><!--Item 1-->
<div class="imageDescription"></div>
<div class="textDescription">
<div class="titleDescription">Encontre pessoas</div>
<div class="detailDescription">Encontre facilmente pessoas com um buscador inteligente</div>
</div>
</div>
<div class="itemDescription"><!--Item 2-->
<div class="imageDescription"></div>
<div class="textDescription">
<div class="titleDescription">Encontre pessoas</div>
<div class="detailDescription">Encontre facilmente pessoas com um buscador inteligente</div>
</div>
</div>
CSS source:
#description {
width: 96%;
background: rgb(244, 244, 0);
}
.itemDescription {
padding: 8px;
border: solid 1px red;
}
.imageDescription {
float: left;
height: 72px;
width: 20%;
background-image: url(http://addons.opera.com/media/extensions/75/86675/1.0-rev2/icons/icon_64x64.png);
background-position: center center;
background-repeat: no-repeat;
border-right: solid 3px black;
}
.textDescription {
float: left;
width: 70%;
border: solid 3px blue;
}
.titleDescription {
border: solid 3px brown;
}
.detailDescription {
border: solid 3px black;
padding: 10px;
}
here is my JSFiddle: http://jsfiddle.net/5xhQk/
Thanks too all you
You could also use table to get what you want but if you really want to use div, you need to use float in every div. Something like this: http://jsfiddle.net/5xhQk/1/
#description{
float: left;
width: 100%;
}
.itemDescription{
float: left;
width: 100%;
height: 72px;
}
.imageDescription{
background: blue;
float: left;
width: 20%;
height: 100%;
border: 1px solid black;
}
.textDescription{
float: left;
width: 70%;
height: 100%;
border: 1px solid black;
border-left: 0;
}
.titleDescription{
float: left;
width: 100%;
border-bottom: 1px solid black;
}
.detailDescription{
float: left;
width: 100%;
}
Oh and I dont understand why in your picture it is width 20% and 70%, what are u going to do with the rest 10%?
Let me see if i got it, u want to align the imageDescription and textDescription in the itemDescription
Try somethign like:
HTML:
<div class="itemDescription">
<div class="imageDescription ">
Your image
</div>
<div class="cl"> </div>
<div class="textDescription">
some header
some paragraph
</div>
</div>
CSS:
.cl{
clear:both;
}
.itemDescription {
width: something;
}
.imageDescription {
float: left;
width: something;
}
.textDescription {
float: right;
width: something;
}
I'm using relative widths:
<style>
#ldiv {
height: 400px;
width: 75%;
background-color:#fff;
color:#ccc;
border: 1px solid #F2F2F2;
float: left;
}
#rdiv {
vertical-align: top;
float: left;
width: 25%;
}
</style>
<div>
<div id="ldiv">Left</div>
<div id="rdiv">Right</div>
</div>
With this code, #rdiv doesn't stay beside #ldiv.
If I use margin-right: -2px; in #ldiv, the two divs stay side by side, but overlap slightly.
I know the problem is caused by the border, but how can I make it fit?
write like this:
#ldiv {
height: 400px;
background-color:#fff;
color:#ccc;
border: 1px solid #F2F2F2;
overflow:hidden;
}
#rdiv {
vertical-align: top;
float: right;
width: 25%;
}
HTML
<div>
<div id="rdiv">Right</div>
<div id="ldiv">Left</div>
</div>
Check this http://jsfiddle.net/aYteE/
OR
You can use box-sizing property for this.
Check this http://jsfiddle.net/aYteE/2/
use a super div and position the inner divs with position:relative and float:left. Avoid giving width to the second div because border will make it go over "100%".
#container {
width:100%;
}
#ldiv {
height: 400px;
width: 75%;
position:relative;
float:left;
background-color:#fff;
color:#ccc;
border: 1px solid #F2F2F2;
float: left;
}
#rdiv {
vertical-align: top;
position:relative;
float:left;
}
<div id="container">
<div id="ldiv">Left</div>
<div id="rdiv">Right</div>
</div>
Hi I did small changes thats it. Friend please check it.
ldiv {
float:left;
height: 400px;
width: 75%;
background-color:#545149;
color:#ccc;
border: 1px solid #F2F2F2;}
rdiv {
float:left;
padding:10px 10px 10px 10px;
}