how to move the defie div left and the sales order div right......
i gave float property but not working.....
i wanted one div to touch extremely left and another div to move to the right....
providing my code below.....
http://jsfiddle.net/zbyLy/3/embedded/result/
<div style="padding-left: 41px; padding-top: 10px; float:left;">
<a class="" href="#">
<img alt="change" class="defieLogo" src="http://www.defie.co/designerImages/defie_logo_only.png">
</a>
<p style="margin-top: 5px; margin-bottom: 0px;">47657 Lakeview Blvd, Fremont CA 94538</p>
<p>Tel: 510-657-8981 <span style="padding-left: 18px;">wwww.abcdfg.com</span></p>
</div>
<div style="border: 1px solid red; width: 300px; float:left;">
<p style="color: #14486b; font-size: 18px; font-family: arial; font-wieght: bold; ">Sales Order</p>
<p style=>Customer No. ABC01</p>
<p style=>sales Order No. 100001</p>
<p style=>Est. Ship Date 2/24/2013</p>
</div>
<div style="border: 1px solid red; width: 300px; float:right;">
demo :http://jsfiddle.net/zbyLy/
Related
Dears,
I am making a name card and the codes are below:
I want to align the last two spans "STUDIO ICONIC" and "info#studioiconic.net" on the same line, however it is always appeared that the email span comes after like the picture show. Is possible to basically adjusted something to achieve that? or is there something i do it wrong? If possible i don't want to use grip or flexbox...Thanks.
<!DOCTYPE html>
<html lang="en">
<body style="border: 2px solid green; width: 500px; height: 270px;">
<div >
<img src = "../smile1.jpg"
style="margin-left: 50px;
margin-top: 20px;
float: left;
width: 150px;
height: 150px;">
<p style="margin-left: 300px;">
<B>ODEN QUEST</B>
<br>
<span><em>Creative Director</em></span>
</p>
<p style="margin-left: 300px;">
<span>T +1 408 456 7890</span>
<br>
<span>M +1 408 456 8956</span>
</p>
<p style="margin-left: 300px;">
<span>1234 Main Street</span>
<br>
<span>Sanita Clara, CA 95126</span>
</p>
<br style="clear:both;">
<span style="margin-left: 65px; display: inline;">STUDIO ICONIC</span>
<span style="margin-left: 300px; display: inline;">info#studioiconic.net</span>
</div>
</body>
</html>
The best way for layout is flex. About the inline style, it is highly recommended that don't use it. instead, use classes for your styling.
.wrapper{
display:flex;
}
.image-container{
margin-left: 50px;
margin-top: 50px;
width: 150px;
height: 150px;
border:2px solid gainsboro;
}
.image{
width:100%;
}
.right-side{
display:flex;
flex-direction:column;
margin-left:100px;
}
.info{
display:flex;
}
.s1{
padding-left: 65px;
}
.s2{
margin-left:120px;
}
<div class="wrapper">
<div class="image-container">
<img class="image" src = "../smile1.jpg" alt="smile face">
</div>
<section class="right-side">
<p>
<b>ODEN QUEST</b>
<br>
<span><em>Creative Director</em></span>
</p>
<p>
<span>T +1 408 456 7890</span>
<br>
<span>M +1 408 456 8956</span>
</p>
<p>
<span>1234 Main Street</span>
<br>
<span>Sanita Clara, CA 95126</span>
</p>
</section>
</div>
<div class="info">
<span class="s1">STUDIO ICONIC</span>
<span class="s2">info#studioiconic.net</span>
</div>
For detection only, in the code that you wrote, you should change display and margin-left of your span.(span by default is display:inline)
<div >
<img src = "../smile1.jpg"
style="margin-left: 50px;
margin-top: 20px;
float: left;
width: 150px;
height: 150px;">
<p style="margin-left: 300px;">
<B>ODEN QUEST</B>
<br>
<span><em>Creative Director</em></span>
</p>
<p style="margin-left: 300px;">
<span>T +1 408 456 7890</span>
<br>
<span>M +1 408 456 8956</span>
</p>
<p style="margin-left: 300px;">
<span>1234 Main Street</span>
<br>
<span>Sanita Clara, CA 95126</span>
</p>
<br style="clear:both;">
<span style=" margin-left:65px;">STUDIO ICONIC</span>
<span style="margin-left:110px;">info#studioiconic.net</span>
</div>
I'm creating a messenging website that look like Facebook Messenger as follow. The problem is that when user send a message that is shorter than 13 characters then the message box wrapped around will become longer than the message due to the sender's name above it.
Image of the problem
Here is the code:
<img src="/images/phatdeptrai.jpg" style="width: 28px;border-radius: 50%;float: left;clear: both;margin-left: 7px;margin-right: 7px;position: relative;top: 38px;">
<div style="float: left;max-width: 45%;">
<div style="font-size: .6875rem;color: #65676b;margin-left: 13px;margin-top: 10px;">Hoàng Phát đẹp trai</div>
<div style="background-color: #e4e6eb;border-radius: 20px;padding: 7px 10px 7px 10px;margin-top: 2px;">
<div style="color: black;">'.$row['body'].'</div>
</div>
</div>
Change the inner div into a span that is display: inline-block;. And move the styles of the outer div to the span. You can leave the margin.
<img src="/images/phatdeptrai.jpg" style="width: 28px;border-radius: 50%;float: left;clear: both;margin-left: 7px;margin-right: 7px;position: relative;top: 38px;">
<div style="float: left;max-width: 45%;">
<div style="font-size: .6875rem;color: #65676b;margin-left: 13px;margin-top: 10px;">Hoàng Phát đẹp trai</div>
<div style="margin-top: 2px;">
<span style="display: inline-block; padding: 7px 10px 7px 10px; color: black; background-color: #e4e6eb;border-radius: 20px;"> sas</span>
</div>
I am writing a chat room message template. I used a text-truncate class for long message ellipse. But It is not working in my code.
<div style="display: flex; background-color: beige; font-size: 14px; width: 10%;">
<!-- favorite-->
<div>
<img src="./images/ic-mentor.png" style="border-radius: 15px; border: 1px solid #dddddd; width: 75px; height: 75px;"/>
</div>
<div style="flex-grow: 1;">
<div class="clearfix">
<img src="./images/ic-mentor.png"/>
<span>
TEST_USER
</span>
<span>
<!-- | -->
<!-- Characters -->
</span>
<span style="float:right">
PM 01:16
</span>
</div>
<div class="text-truncate">
adssasdaasdsadsaasdadsadssdasdadsaadsadssadasasddassad
</div>
</div>
</div>
Above code is my sample code. I want to write a working at small browser size with truncate class. But my code is not working text truncate.
I don't want to set width. I want to make flexible template, If I set width, then it does not use in small size browser
I don't want to overflow contents.
You need to set the width of the div that's containing the overflowing content. Else truncate class will not produce ellipses.
Try this code:
<div style="display: flex; background-color: beige; font-size: 14px; width: 10%;">
<!-- favorite-->
<div>
<img src="./images/ic-mentor.png" style="border-radius: 15px; border: 1px solid #dddddd; width: 75px; height: 75px;"/>
</div>
<div style="flex-grow: 1;">
<div class="clearfix">
<img src="./images/ic-mentor.png"/>
<span>
TEST_USER
</span>
<span>
<!-- | -->
<!-- Characters -->
</span>
<span style="float:right">
PM 01:16
</span>
</div>
<div class="text-truncate" style="width: 300px;">
adssasdaasdsadsaasdadsadssdasdadsaadsadssadasasddassad
</div>
</div>
</div>
Note: I've added inline-styles for now.
I'm solved this problem myself as follows:
<div style="display: flex; background-color: beige; font-size: 14px; width: 10%;">
<!-- favorite-->
<div>
<img src="./images/ic-mentor.png" style="border-radius: 15px; border: 1px solid #dddddd; width: 75px; height: 75px;"/>
</div>
<div class="text-truncate" style="flex-grow: 1;">
<div class="clearfix">
<img src="./images/ic-mentor.png"/>
<span>
TEST_USER
</span>
<span>
<!-- | -->
<!-- Characters -->
</span>
<span style="float:right">
PM 01:16
</span>
</div>
adssasdaasdsadsaasdadsadssdasdadsaadsadssadasasddassad
</div>
</div>
I just remove the text-truncate div tag and then put parent div tag.
I'm new to html/css and I'm trying to do an adaptive header for the website. I'm using padding-right with 5% for divs, but las div always goes to a new line and the parent div don't want to expand. I want parent div expand depending on the text in child divs. Also when I'm using padding in px, all works properly, but it loses adaptive part.
What am I doing wrong?
With padding in percents
With padding in pixels
HTML and CSS
button{
height:34px;
width:100%;
font-weight:bold;
border:none;
background-color:#fc592d;
color:#ffeded;
border-radius:4px;
}
<div style="width: 100%; background-color: rgb(44, 62, 80); float: left;">
<div style="width: 47.36%; height: auto; margin: auto;">
<div style="display: inline-block; float: left; padding-bottom: 4%; padding-top: 4%;">
<div style="display:inline-block; padding-right:5%;">
<img src="images/icon1.png" alt="farkops">
<a class="href" href="#">One thing</a>
</div>
<div style="display:inline-block; padding-right:5%;">
<img src="images/icon2.png" alt="pricep">
<a class="href" href="#">Second</a>
</div>
<div style="display:inline-block; padding-right:5%;">
<img class="href" src="images/icon3.png" alt="otzivi">
<a class="href" href="#">Three</a>
</div>
<div style="display:inline-block;">
<img src="images/icon4.png" alt="works">
<a class="href" href="#">Fourth thing</a>
</div>
</div>
<div style="float: left; display: inline-block; margin-top: 1.24%; margin-left: 2%;">
<div style="">
<p style="margin: 0px; padding-bottom: 8px; font-weight: bold; font-size: 3vh;"><span>7 (905)</span> 639-29-03</p>
</div>
<div style="">
<button>Call</button>
</div>
</div>
</div>
</div>
UPD1:
When I add one new div, the previous one fits just right (the parent div expands as I want), but the new one goes to new line.
How do I both bring the "July" and the "2016" in the line, with the font-size differences and the "2016" being aligned right?
<div style="position: relative; width: 10%">
<span style="font-size: 14px">July</span><span style="font-size: 20px; right: 0; position: absolute;">2016</span>
<hr style="margin-top: 5px;">
</div>
Do you mean they should be aligned the same way? You can use vertical-align: bottom to get them aligned on the line, or middle to align them centered with each other.
<div style="position: relative;display:inline-block;">
<span style="font-size: 14px;display:inline-block;vertical-align:bottom;">July</span> <span style="font-size: 20px; display:inline-block;vertical-align:bottom;">2016</span>
<hr style="margin-top: 5px;">
</div>
remove:
position: absolute;
top:0;
Replace it by:
float: right;
Fiddle
HTML
<div style="position: relative; width: 25%">
<span style="font-size: 14px">July</span><span style="font-size: 20px;float:right;">2016</span>
<hr style="margin-top: 5px;">
</div>