CSS+ HTML (Insert picture in the right corner) - html

Question

#font-face {
font-family: Droid Sans;
src: url('../fonts/DroidSans-webfont.eot');
src: local("Droid Sans"), url('../fonts/DroidSans-webfont.woff');
}
#font-face {
font-family: Jenna Sue;
src: local("Jenna Sue"), url('JennaSue-webfont.ttf');
}
#font-face {
font-family: News Cycle;
src: local("News Cycle"), url('NewsCycle-Regular.ttf');
}
html {
height: 100%;
}
* {
margin: 0;
padding: 0;
}
/* tell the browser to render HTML 5 elements as block */
article, aside, figure, footer, header, hgroup, nav, section {
display:block;
}
body {
font: normal .85em 'Droid Sans', arial, sans-serif;
background: #434434;
color: #E6EEB0;
padding-bottom: 40px;
}
p {
padding: 0 0 20px 0;
line-height: 1.5em;
}
img {
border: 0;
}
h1, h2, h3, h4, h5, h6 {
font: normal 400% 'Jenna Sue', arial, sans-serif;
color: #222;
margin: 0 0 0px 0;
padding: 20px 0 5px 0;
}
h1 {
color: #C0CB77;
}
h2 {
font: normal 220% 'Jenna Sue', arial, sans-serif;
color: #FFF;
margin: 0;
padding: 0 0 8px 0;
}
h3 {
font: normal 125% 'trebuchet ms', arial, sans-serif;
}
h4, h5, h6 {
margin: 0;
padding: 0 0 5px 0;
font: normal 110% arial, sans-serif;
color: #999;
line-height: 1.5em;
}
h5, h6 {
font: italic 95% arial, sans-serif;
color: #888;
padding-bottom: 15px;
}
h6 {
color: #362C20;
}
a, a:hover {
outline: none;
text-decoration: underline;
color: #FFF;
}
a:hover {
text-decoration: none;
color: #FFF;
}
ul {
margin: 2px 0 22px 17px;
}
ul li {
list-style-type: circle;
margin: 0 0 0 0;
padding: 0 0 4px 5px;
}
ol {
margin: 8px 0 22px 20px;
}
ol li {
margin: 0 0 11px 0;
}
#main, header, #logo, nav, #site_content, footer {
margin-left: auto;
margin-right: auto;
}
#main {
width: 950px;
margin: 20px auto 0 auto;
}
header {
width: 950px;
height: 105px;
}
#logo {
width: 220px;
float: left;
height: 100px;
background: transparent;
padding: 0 0 10px 10px;
}
#logo h1 {
font: normal 400% 'Jenna Sue', arial, sans-serif;
padding: 40px 0 0 17px;
color: #FFF;
}
#logo h1 a {
color: #FFF;
text-decoration: none;
}
#logo h1 a:hover {
color: #FFF;
text-decoration: none;
}
nav {
height: 26px;
width: 720px;
margin: 1px auto 0 auto;
float: right;
padding: 35px 0 0 0;
}
#site_content {
width: 950px;
overflow: hidden;
margin: 4px auto 0 auto;
padding: 0;
background: #565747;
border-top: 0;
border-bottom: 0;
}
#sidebar_container {
float: right;
width: 450px;
padding: 0;
height: 450px;
}
#content {
text-align: justify;
width: 444px;
padding: 0 0 5px 30px;
margin: 0;
float: left;
}
#content ul {
margin: 2px 0 5px 0px;
}
#content ul li {
list-style-type: none;
background: transparent url(../images/bullet.png) no-repeat left center;
margin: 0 0 0 0;
padding: 2px 0 2px 28px;
line-height: 1.5em;
}
#blog_container h4 {
font: normal 250% 'Jenna Sue', arial, sans-serif;
margin: 0 0 15px 0;
padding: 5px 0;}
#blog_container h4.select {
width: 475px;}
.blog {
background: url(../images/calendar.png) no-repeat;
width: 54px;
height: 46px;
float: left;
margin: 0 15px 0 0;
}
.blog h2 {
font: normal 90% arial, sans-serif;
text-shadow: none;
text-align: center;
margin: 0;
padding: 4px 0 0 0;
color: #FFF;
}
.blog h3 {
font: 130% arial, sans-serif;
text-shadow: none;
margin: -19px 0 0 0;
text-align: center;
color: #222;
}
footer {
width: 950px;
font: 109% 'Droid Sans', arial, sans-serif;
height: 75px;
padding: 17px 0 5px 0;
text-align: center;
background: #6F7640;
}
footer p {
padding: 0 0 10px 0;
}
footer a, footer a:hover {
color: #E6EEB0;
text-decoration: none;
}
footer a:hover {
color: #E6EEB0;
text-decoration: underline;
}
/* form styling */
.form_settings {
margin: 0;
}
.form_settings p {
padding: 0 0 10px 0;
}
.form_settings span {
padding: 5px 0;
float: left;
width: 170px;
text-align: left;
}
.form_settings input, .form_settings textarea {
padding: 4px;
width: 252px;
font: 100% arial, sans-serif;
border: 0;
border-bottom: 1px solid #C0CB77;
background: transparent;
color: #E6EEB0;
}
.form_settings .submit {
font: 140% 'News Cycle', arial, sans-serif;
border: 0;
width: 100px;
margin: 0 0 0 162px;
height: 30px;
padding: 0 0 6px 0;
cursor: pointer;
border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
background: #6F7640;
color: #FFF;
line-height: 15px;
}
.form_settings textarea, .form_settings select {
font: 100% 'Droid Sans', arial, sans-serif;
border: 1px solid #C0CB77;
border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
width: 250px;
overflow: auto;
}
.form_settings select {
width: 304px;
}
.form_settings .checkbox {
margin: 4px 0;
padding: 0;
width: 14px;
border: 0;
background: none;
}
ul.images {
width:450px;
height:450px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
}
ul.images li {
position:absolute;
margin:0;
padding:0;
left:0;
right:0;
list-style:none;
}
ul.images li.show {
z-index:500;
}
ul img {
border:none;
}
/* from here: http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers */
.lavaLampWithImage {
position: relative;
height: 25px;
padding: 10px 5px 15px 0;
margin: 10px 0 0 0;
overflow: hidden;
float: right;
}
.lavaLampWithImage li {
float: left;
list-style: none;
}
.lavaLampWithImage li.back {
background: #63604F;
border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border: 15px 15px 15px 15px;
height: 28px;
z-index: 8;
position: absolute;
}
.lavaLampWithImage li a {
font: 109% 'Droid Sans', arial, sans-serif;
text-decoration: none;
color: #FFF;
outline: none;
text-align: center;
letter-spacing: 0;
z-index: 10;
display: block;
float: left;
height: 30px;
padding: 6px 9px 0 9px;
position: relative;
overflow: hidden;
margin: auto 10px;
}
.lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {
border: none;
}
.curlycontainer{
border: 1px solid #b8b8b8;
margin-bottom: 1em;
width: 466px;
}
.curlycontainer .innerdiv{
background: transparent url(images/brcorner.gif) bottom right no-repeat;
position: relative;
left: 2px;
top: 2px;
padding: 1px 4px 15px 5px;
}
a.css3dbutton {
background: darkred; /* background color of button */
color: white;
text-decoration: none;
font: bold 28px Arial; /* font size and style */
position: relative;
top: 0; /* anchor main button's position */
bottom: -12px; /* Depth of 3D effect. :after pseudo element inherits this value so it's animated in Chrome. See: kizu.ru/en/pseudos */
margin-bottom: 12px;
-moz-box-shadow: 0 -15px 5px darkred inset;
-webkit-box-shadow: 0 -15px 5px darkred inset;
box-shadow: 0 -15px 5px darkred inset;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
a.css3dbutton, a.css3dbutton:after {
display: inline-block;
padding: 10px 15px; /* vertical and horizontal padding of button */
-moz-border-radius: 8px/15px;
-webkit-border-radius: 8px/15px;
border-radius: 8px/15px;
outline: none;
}
a.css3dbutton:after { /* pseudo element to construct 3D side of button */
content: "";
position: absolute;
padding: 0;
z-index: -1;
bottom: inherit; /* Inherit main button bottom value to animate it. See: kizu.ru/en/pseudos */
left: 0;
width: 100%;
height: 100%;
background: #6e0e0c; /* background color of 3D effect */
-moz-box-shadow: 1px 0 3px gray;
-webkit-box-shadow: 1px 0 3px gray;
box-shadow: 1px 0 3px gray;
}
a.css3dbutton:hover {
-moz-box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
-webkit-box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
background: #bc3835; /* background color when mouse rolls over button */
}
a.css3dbutton:active {
top: 12px; /* shift button down 12px when depressed. Change 12px to match button's "bottom" property above */
bottom: 0;
-moz-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
-webkit-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
}
a.button{
background: #ECECEC;
border-radius: 15px;
padding: 10px 20px;
display: block;
font-family: arial;
font-weight: bold;
color:#7f7f7f;
text-decoration: none;
text-shadow:0px 1px 0px #fff;
border:1px solid #a7a7a7;
width: 145px;
margin:0px auto;
margin-top:100px;
box-shadow: 0px 2px 1px white inset, 0px -2px 8px white, 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1);
-webkit-transition:box-shadow 0.5s;
}
a.button i{
float: right;
margin-top: 2px;
}
a.button:hover{
box-shadow: 0px 2px 1px white inset, 0px -2px 20px white, 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 8px 10px rgba(0, 0, 0, 0.1);
}
a.button:active{
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5) inset, 0px -2px 20px white, 0px 1px 5px rgba(0, 0, 0, 0.1), 0px 2px 10px rgba(0, 0, 0, 0.1);
background:-webkit-linear-gradient(top, #d1d1d1 0%,#ECECEC 100%);
}
hr{
border: 0; border-bottom: 1px dashed #ccc; background: #999;
}
.styled-button-8 {
background: #25A6E1;
background: -moz-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#25A6E1),color-stop(100%,#188BC0));
background: -webkit-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
background: -o-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
background: -ms-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
background: linear-gradient(top,#25A6E1 0%,#188BC0 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#25A6E1',endColorstr='#188BC0',GradientType=0);
padding:8px 13px;
color:#fff;
font-family:'Helvetica Neue',sans-serif;
font-size:17px;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border:1px solid #1A87B9
}
.display_img{
float: right;
}
This is my code where I print content.
<?php
echo"<div id=\"content\">";
echo"</div>";
?>
I'd like to add profile picture in a empty place (as seen in the picture) ,but how to move it to the right?
Here is a css of div content.
EDIT:
I want to move picture to right side (Shown in a picture where to)
Move right side

Answer 1

Give your image a class or id, and float it to right. This way it should move to the right of the div in which it is included. For example, give it a class named display_img and float it to right, like this:
.display_img{
float: right;
}
Another trick can be the following:
.display_img{
margin-right: 0;
/*you can keep the float here if you want, but it will not affect the results adversely if removed*/
}

Answer 2

Use float:right; for your profile picture.And float:left; for the rest of the content in your div.Instead of using float:left; as an overall for all your content in the div.

Answer 3

Not sure, If I get your point correctly, but you can try something like this:
<span>Skelbimas</span>
<table border="1">
<tr>
<td>Miestas</td>
<td rowspan="5">Insert Picture</td>
</tr>
<tr>
<td>Vardas</td>
</tr>
<tr>
<td>Telefono</td>
</tr>
<tr>
<td>El Pastas</td>
</tr>
<tr>
<td>Arnzius </td>
</tr>
</table>