Scheduled Maintenance: We are aware of an issue with Google, AOL, and Yahoo services as email providers which are blocking new registrations. We are trying to fix the issue and we have several internal and external support tickets in process to resolve the issue. Please see: viewtopic.php?t=158230

 

 

 

[SOLVED] I'm having trouble with CSS floats/floating

Programming languages, Coding, Executables, Package Creation, and Scripting.
Post Reply
Message
Author
User avatar
s3a
Posts: 831
Joined: 2008-07-17 22:13
Has thanked: 6 times
Been thanked: 2 times

[SOLVED] I'm having trouble with CSS floats/floating

#1 Post by s3a »

Hello to everyone who is reading this. :)

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;
}
Could someone please tell me why it's not behaving as I intend it to, or at least point me to a resource that should help me figure out how to solve my problem myself?

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!
Last edited by s3a on 2017-02-21 00:17, edited 1 time in total.
Use Mnemosyne to Study for School!

User avatar
ralph.ronnquist
Posts: 342
Joined: 2015-12-19 01:07
Location: Melbourne, Australia
Been thanked: 6 times

Re: I'm having trouble with CSS floats/floating

#2 Post by ralph.ronnquist »

Have you tried with spaces before # in the css?

User avatar
grumpy_geek
Posts: 22
Joined: 2017-01-20 16:03

Re: I'm having trouble with CSS floats/floating

#3 Post by grumpy_geek »

s3a wrote:I'm trying to get both images to float to opposite sides
One way of doing it (even though I'd settle for IDs or classes):

Code: Select all

<html>
  <head>
    <style>

      .some_stuff {
        width: 100px;
        height: 100px;
        padding: 10px;
      }

      #float_left {
        border: 3px solid red;
        float: left;
      }

      #float_right {
        border: 3px solid green;
        float: right;
      }

    </style>
  </head>
  <body>

    <div class="some_stuff" id="float_left">LEFT</div>

    <div class="some_stuff" id="float_right">RIGHT</div>

  </body>
</html>

User avatar
s3a
Posts: 831
Joined: 2008-07-17 22:13
Has thanked: 6 times
Been thanked: 2 times

Re: I'm having trouble with CSS floats/floating

#4 Post by s3a »

Thanks for the answers.

Grumpy_geek, why does what you did work (when I add a lot of text to fully test it with) and what I did in the opening post of this thread not work?

Also, instead of just using your squares, I noticed that I can put an <img> tag within opening and closing <div> tags and have my problem be solved, but why does that work and what I did in the opening post of this thread does not?

After some thinking about why the div tags make things work, I even read about <img> elements having a default display of inline-block, so I set it to block (like the div elements), instead, but that doesn't seem to fix the problem with the syntax from the opening post of this thread.
Use Mnemosyne to Study for School!

User avatar
s3a
Posts: 831
Joined: 2008-07-17 22:13
Has thanked: 6 times
Been thanked: 2 times

Re: I'm having trouble with CSS floats/floating

#5 Post by s3a »

It turns out that what I pasted here does indeed work, and that what I was using locally had typos where the class names didn't have an s at the end and the second ID was image_flag_1 as well, instead of image_flag_2.

I will now mark this thread as solved. :)
Use Mnemosyne to Study for School!

Post Reply