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

Need help with C, C++, perl, python, etc?

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

Postby s3a » 2017-02-06 23:30

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
s3a
 
Posts: 799
Joined: 2008-07-17 22:13

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

Postby ralph.ronnquist » 2017-02-07 04:10

Have you tried with spaces before # in the css?
User avatar
ralph.ronnquist
 
Posts: 300
Joined: 2015-12-19 01:07
Location: Melbourne, Australia

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

Postby grumpy_geek » 2017-02-07 09:52

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
grumpy_geek
 
Posts: 22
Joined: 2017-01-20 16:03

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

Postby s3a » 2017-02-08 22:37

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: 799
Joined: 2008-07-17 22:13

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

Postby s3a » 2017-02-21 00:17

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!
User avatar
s3a
 
Posts: 799
Joined: 2008-07-17 22:13


Return to Programming

Who is online

Users browsing this forum: No registered users and 3 guests

fashionable