Python Forum

How can I move the Amethyst in bold to the left of the page? I tried using float: left but it didn't work. Here is my code. Thanks for the help!

[html]
<!DOCTYPE html>
<html>
<head>
<title>Crystals</title>
<link href="./CSS.css" type="text/css" rel="stylesheet">
</head>
<body>

<h1>Crystal Healing</h1>

<strong>Amethyst</strong>
<p class="amethyst-paragraph">aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaa.</p>
<img src="http://hibiscusmooncrystalacademy.com/wp-content/uploads/2012/04/amethyst-cluster.jpg" class="amethyst">
[/html]

[css]
body {
background-color: mediumpurple;
}

nav {
border: 1px solid black;
}

.navclass {
padding-right: 10px;
}

.amethyst-paragraph {
float: left;
width: 400px;
}

.amethyst {
height: 200px;
width: 300px;
float: right;
}
[/css]

If you add float: left to Amethyst, it will move to the left. It appears at the beginning of the paragraph because they aren't in separate containers. Wrap each of them in div tags and they should get closer to what you want.

Your paragraph is managing a margin by default haven't gave the margin a value in your class.
Also the float:left on your pararaph is displaying the text left from the Strong tag because the strong tag hasn't any set float left.
However if you add float: left to the strong tag it will display next to the text not above it.

You should add a margin: 0 to your 'amethyst-paragraph' class and replace the 'float:left' with 'text-align:left'
You could also add a 'text-align:left' to your strong tag, just to be sure.

Hope this will awsner your question

DragonG

stullis

JDutch