I'm trying to get both images to float to opposite sides, but it seems that they're both only floating to the left, and that whatever the float values are for flag_image_1 and flag_image_2, only the floating that I want done to flag_image_1 is done, but it's done for both images.
This image ( https://i.stack.imgur.com/gh5Os.png ) represents what I'm trying to achieve.
The following is the HTML and CSS syntax I typed.
Code: Select all
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
<title>Name/Title of the Page</title>
</head>
<body>
<h1>This is a headline</h1>
<p>This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence.
<p>This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence.
<p>This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence.
<p>This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence.
<p>This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence.
<img id="flag_image_1" class="flag_images" src="image1.png" alt="first_image" title="This is the first image.">
<p>This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence.
<p>This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence.
<p>This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence.
<p>This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence.
<p>This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence.
<img id="flag_image_2" class="flag_images" src="image2.png" alt="second_image" title="This is the second image.">
<p>This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence.
<p>This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence.
<p>This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence.
<p>This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence.
<p>This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence.
</body>
</html>
Code: Select all
img#flag_image_1 {
float: left;
}
img#flag_image_2 {
float: right;
}
img.flag_images {
width: 200px;
}
I already tried to follow the advice in the following link about a similar situation as mine unsuccessfully.:
http://stackoverflow.com/questions/6036 ... of-one-div
Any help would be GREATLY appreciated!