css class not working properly - html

Question

i'm redesigning my website. and doing that i'm finding myself in some problems using the css code i wrote.
i use div's to get an image and some text next to each other.
i'm unable to get the text moved to the correct place (see pictures) the margin-left doesn't seem to work when it is in the css file but it works when directly embedded in the div tags, am i doing something wrong?
also i'dd like to add that i don't need to set the image size in the html code but its in the css code is this possible?
What i get
What i want
body
{
background:#333 url(bg.jpg) repeat top left;
font-family:Arial;
color:white;
text-align:center;
}
body header.heading
{
width:1150px;
/*background:transparent url(../images/menu/MEbanner.jpg) no-repeat top;
background-size: 1150 100px;
padding-top:101px;*/
margin:0 auto;
z-index:0;
}
body.Content
{
width:1150px;
}
main
{
width:1150px;
margin: 0 auto;
}
section
{
text-align:left;
margin:0 auto;
}
header nav
{
width:1150px;
background:transparent url(../images/menu/MEbanner.jpg) no-repeat top;
background-size: 1150 100px;
padding-top:101px;
margin:0 auto;
z-index:0;
}
header nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
header nav li {
float: left;
border-right: 1px solid #bbb;
}
header nav li:last-child {
border-right: none;
}
/*header nav li a {
display: block;
color: white;
text-align: center;
padding: 20px 16px;
text-decoration: none;
}*/
/* Change the link color to #111 (black) on hover */
header nav li a:hover {
background-color: #111;
}
header nav li.active {
background-color: #4CAF50;
}
header nav li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 20px 16px;
text-decoration: none;
}
header nav li a:hover, .dropdown:hover .dropbtn {
background-color: #111;
}
header nav li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
nav
{
text-align:left;
margin:0 auto;
}
.hidden {display:none}
hr
{
border-left: none;
border-right: none;
height:4px;
margin: 2em 0 2em 0;
}
main a:link {color:#fff;} /* unvisited link */
main a:visited {color:#fff;} /* visited link */
main a:hover {color:#159;} /* mouse over link */
blockquote{
color:white;
border-left: 8px solid;
border-color: #0BD676;/*#0DFF8C;*/
padding-left:10px;
}
h2
{
font-size: 30px;
color:Black;
}
h1,h2,h3,h4
{
font-family: 'Open Sans Condensed', sans-serif;
color:#4CAF50;
text-decoration:underline;
}
h2, h3
{
font-size: 1.6em;
letter-spacing: -1px;
margin: 0 0 0.75em 0;
}
h3
{
font-size:1.3em;
}
h1
{
font:bold;
}
h4
{
font-size:1em;
margin: 0.5em 0 0.5em;
padding-left:1em;
}
.green
{
border-left: 8px solid;
border-color: #0BD676;/*#0DFF8C;*/
padding-left:10px;
color: #4CAF50;
margin-left:40px;
font-style:oblique;
}
article.centeralign
{
text-align:center;
}
div.wrapper{
width: 800px;
overflow: hidden;
}
div.toolsWrapper{
width: 980px;
overflow: hidden;
}
div.left{
width: 200px;
float:left;
margin-right:40px;
padding-left:40px;
}
div.right{
float:left;
margin-left: 20px;
}
div.cc
{
width:200px;
text-align:right;
font-size:10px;
}
div.ccf
{
text-align:center;
font-size:12px;
}
iframe
{
text-align:center;
float:center;
}
/* ===========================
====== Contact Form =======
=========================== */
input, textarea {
padding: 10px;
border: 1px solid #E5E5E5;
width: 200px;
color: #999999;
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
}
textarea {
width: 400px;
height: 150px;
max-width: 400px;
line-height: 18px;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
border-color: 1px solid #C9C9C9;
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
}
.form label {
margin-left: 10px;
color: #999999;
}
/* ===========================
====== Submit Button ======
=========================== */
.submit input {
width: 100px;
height: 40px;
background-color: #474E69;
color: #FFF;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
table, th, td {
border: 1px solid black;
border-color:white;
}
th, td {
padding: 15px;
}
.blue{
background: url(blue.png) no-repeat left center;
color: #109CEF;
padding: 0px 40px 0px 20px;
font-style:oblique;
}
.red{
background: url(red.png) no-repeat left center;
color:#FF0000;
padding: 0px 40px 0px 20px;
font-style:oblique;
}
<article>
<h1>Audio Projects</h1>
<blockquote>
<h3>
<a href="Damp">
Class D Amplifier
</a>
</h3>
<div class="wrapper">
<div class="left">
<img src="Damp/Damp_front.JPG"/>
</div>
<div class="right">
Some text that should be next to image
</div>
</div>
</blockquote>
</article>

Answer 1

I changed those:
.h1 {
text-align: left;
}
.h3 {
text-align: left;
}
div.left{
float: left;
}
div.right {
width: 500px;
float: left;
margin-left: 20px;}
results
https://i.stack.imgur.com/7rswY.png

Answer 2

You just need to change a few styles, and replace the <article> with a <div> (For IE support)
div.wrapper {
width: 800px;
overflow: hidden;
}
div.toolsWrapper {
width: 980px;
overflow: hidden;
}
div.left {
width: 200px;
float: left;
margin-right: 40px;
padding-left: 40px;
}
div.right {
color: white;
display: inline-block;
position: absolute;
top: 0;
}
.wrapper {
position: relative;
width: 50%;
}
.title {
color: #4B9F49;
}
.inner_title {
color: white;
}
.blockquote {
border-left: 3px solid #0CD673;
padding-left: 5px;
}
#article {
background: black;
}
<div id="article">
<h3>
Audio Projects
</h3>
<blockquote class="blockquote">
<h3>
Class D Amplifier
</h3>
<div class="wrapper">
<img src="Damp/Damp_front.JPG" style="height:80px; width:200px;"/>
<div class="right">
Some text that is now next to the image.
</div>
</div>
</blockquote>
</div>

Answer 3

I guess problem is with width of left class division. Try to make it auto.
div.left{
width: auto;
....
}

Answer 4

Option 1, my preferred way of doing this:
Remove the float in .left take the inline left margin out of the .right and give both .left and .right
display: inline-block;
Giving you
div.left{
width: 200px;
/*float:left;*/
display: inline-block;
margin-right:40px;
padding-left:40px;
}
div.right{
display: inline-block;
width: 520px;
margin-left: 20px;
}
For those two classes
Option 2:
Give both a float:left
div.left{
width: 200px;
float:left;
margin-right:40px;
padding-left:40px;
}
div.right{
float:left;
width: 520px;
margin-left: 20px;
}
This should cause them to stack in the same way that inline-block does, but floats can cause trouble later. In either case you have to limit the width on .right or the text will prefer to be full width and not be inline, but rather be below the image. The total width of the two divs has to be less than the available width in .wrapper

Answer 5

Your image is probably larger than the .left container (given that this is the only element that is not included in your snippet to test properly).
Try the following ...
img{
height: auto;
width: auto;
max-height: 100%;
max-width: 100%;
}
... you should probably add a class for that image, rather than styling all images this way.

Answer 6

well, what i can advice you is to put the text in the same division as the image like in paragraph tag and then give the image css attribute called "float:left" according to what you want.
thank you
hope this is going to help you

Answer 7

use .classname only
instead of div.classname