Jump to content

Why do width/height void the float property?


Mike3456

Recommended Posts

I have been playing with the float property. As an example I use two consecutive paragraphs but you could substitute other elements as well.

 

Once I set float: left for the first paragraph, the second paragraph fails to position next to the floated first paragraph as long as its width/height are set.

It works as expected with float:right, or the second paragraph has no width/height

 

 

 

================================

<!DOCTYPE html>
<html>
<head>
<style>

#p1 {
float: left;
width: 100px;
height: 50px;
}

#p2 {
width: 100px;
height: 50px;
}

</style>
</head>
<body>

<p id="p1">paragraph1</p>
<p id="p2">paragraph2</p>


</body>
</html>

Edited by Mike3456
Link to comment
Share on other sites

So float both paragraphs. I don't see width or height affecting the float property.

 

If you don't declare a width and height an element will still have the default values.

 

If you put a border around each element you can more easily see where their boundaries are. Float removes a element from the normal flow.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...