CSS float and HTML questions

css float center
css float: right not working
css position
css float top
css float: down
css float property
css float above
css clear

I have some questions about basic CSS that I was unable to understand or find an answer for.

First, I tried placing 3 div tags within another div tag. The first main div tag containing the 3 other tags had nothing set for it except a size, which was 400px by 400px. Of the other 3 divs inside, all were 20px by 20px, and 1 was assigned float:left, and the other two were assigned a style that was float right. All attributes were defined within a style, and the two divs that were float:right were assigned the same style. My problem is that out of the 2 divs, the one that came last in the code, would appear first in a browser, and I did not understand the reasoning for this.

Here is the code:

<html>
<head>
<style>
#main{ 
    border: red 4px dashed;
    width: 25%
    height: 25%,
    }
#left{ 
    float: left;    
    width: 20px;
    height: 20px,
    }
#right{ 
    float: right;   
    width: 20px;
    height: 20px,
    }
</style>
</head>
<body>
<div id="main">
<div id="left">1</div>
<div id="right">2</div>
<div id="right">3</div>
</div>
</body>
</head>
</html>

My problem is that out of the 2 divs, the one that came last in the code, would appear first in a browser, and I did not understand the reasoning for this.

I think that You misunderstood a "appear first". You set Your divs to be floating right. So a "2" div, which is FIRST in Your code, is FIRST to be floated right, so it goes first to the right side. A "3" div is then floated, so i goes to the left side of the "2" div - because "2" was first, it took first place at the right side of the browser window, and div "3" took second place at the right side of the window.

In this case "second place at the right side of the window" means "first, looking from the left" ;-)

All About Floats, Collapsing almost always needs to be dealt with to prevent strange layout and cross-browser problems. We fix it by clearing the float after the� CSS float and HTML questions. Ask Question Asked 11 years, 2 months ago. Active 1 month ago. Viewed 1k times 2. I have some questions about basic CSS that I was

At first, I would use class and not id for the divs. But there are also some typo's in the css:

#main{ 
    border: red 4px dashed;
    width: 25%;  /* <-- Missing ; */
    height: 25%; /* <-- change , to ; */
}
#left{ 
    float: left;        
    width: 20px;
    height: 20px; /* <-- change , to ; */
}
#right{ 
    float: right;       
    width: 20px;
    height: 20px; /* <-- change , to ; */
}

CSS float and HTML questions, My problem is that out of the 2 divs, the one that came last in the code, would appear first in a browser, and I did not understand the reasoning for this. I think that� The float property specifies how an element should float. Note: Absolutely positioned elements ignore the float property! Note: Elements after a floating element will flow around it. To avoid this, use the clear property or the clearfix hack (see example at the bottom of this page).

I don't know about the layering problem, but you can't have two elements with the same ID. You probably want:

...
<div class="right">2</div>
<div class="right">3</div>
...

and change #right to .right in the CSS.

CSS Float Logic, Here's the part of the linked answer that's most relevant to your question: When you float a block element, you are telling the browser to position� CSS Float. The CSS float property is a positioning property. It is used to push an element to the left or right, allowing other element to wrap around it. It is generally used with images and layouts. To understand its purpose and origin, let's take a look to its print display.

I think your problem is that you are using id instead of class. An ID is supposed to be unique, so the second div with id="right" is the only one with that id.

You could change your code such that you have:

< div class="right" >2< /div >

< div class="right" >3< /div >

(instead of id="right")

And in the css you would have:

.right {

float: right;       

width: 20px;

height: 20px,

}

(instead of #right)

CSS Float Theory: Things You Should Know — Smashing Magazine, However, the reason for these problems isn't the theory itself, but the way CSS Float Html Tutorial It's time to think outside the box, or maybe,� HTML Interview Questions. A list of top frequently asked HTML interview questions and HTML5 interview questions and answers are given below. HTML5 Interview Questions; 1) What is HTML? HTML stands for Hyper Text Markup Language. It is a language of World Wide Web.

you can use this code

<div id="main">
        <div id="left">1</div>
        <div id="right">3</div>
        <div id="right">2</div>
    </div>

CSS float property, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java� 35. Define float property of CSS? By float property, the image can be moved to the right or the left along with the text to be wrapped around it. Elements before this property is applied do not change their properties. 36. How does Z index function? Overlapping may occur while using CSS for positioning HTML elements.

interview: css questions, How can you clear sides of a floating element? some tricky questions in In a HTML document, the pseudo class :root always refers to the� 1. float. Question: What does float do? Answer: float pushes an element to the sides of a page with text wrapped around it. you can create entire page or a smaller area by using float. if size of a floated element changes, text around it will re-flow to accommodate the changes.

21+ Advanced CSS Interview Questions Web Developers Must , Come along and check the list of top most advanced CSS interview questions 50 CSS Interview Questions CSS 50. Junior. Answer. Float is a CSS positioning The browser converts HTML and CSS into the DOM (Document Object Model). The CSS float property is used to set or return the horizontal alignment of elements. But this property allows an element to float only right or left side of the parent body with rest of the elements wrapped around it. There is no way to float center in CSS layout. So, we can center the elements by using position property.

CSS Float, CSS Float. 11-06-2018. Float is a CSS property written in CSS file or directly in the style of an element. The float property defines the DOCTYPE html>. < html >. HTML Practice Problems (no CSS) These questions are geared toward those that have just learned HTML but not CSS yet. More advanced problems that include CSS are available in the second half of this practice test (see the table of contents).

Comments
  • you probably shouldn't have two DIVS with an id of "right" -- ids are supposed to be unique.
  • agreed - change the 'id="left/right"' to 'class="left/right"' (arguments about semantics aside), and change your css to ".left" and ".right"
  • Can I suggest separating out your questions? It'll make it easier for people to give specific answers :)
  • +1 this is correct - the other answers are pointing out some other issues with the code sample, but they don't address the problem. this answer explains what's going on.
  • that won't change his situation though. though it's not valid HTML, the browser still will render the CSS "correctly"
  • Perhaps, but I assumed that if you're doing something "illegal", the browser is free to interpret it whatever way it wants, which may not give you what you expect depending on the browser. I figure the best way to start is to have correct HTML.
  • you're correct in general, but in this case, it doesn't change anything.
  • The answer, while valid code, does not explain WHY you changed what you changed.