how float is affecting background color?

Question

this is my html code

<html>
<head>
<link rel="stylesheet" href="main-pd.css"/>
</head>
<body>
<div class="menu-wrap">
<ul class="menu">
</ul>
</div>
</body>
</html>

and this is my css code

.menu-wrap{
background-color:pink;
}
ul{
background-color:blue;
height:100px;
border:solid;
width:350;
float:right;
}

without float:right property it is showing the background:pink color of the parent div and in the above case no pink background. Why is it happening?

It doesn't affect the background, but float elements have no impact on the height of a normal container, so it collapses to 0px tall. See [floating stuff within a div, floats outside of div. Why?](http://stackoverflow.com/q/2062258/1529630) — Oriol, Mar 19 '16 at 03:17
You need to understand WHAT IS FLOAT and HOW IT WORKS. When elements are floated then they will be removed from Normal Document Flow, so need to explicitly clear them. They will be no longer in the their parent container. If you use `clearfix` hack then you will get desire result. **FYI, float elements become Inline-block element.** It is best practice to use `clearfix` hack whenever you use floated elements. — Kalpesh Singh, Mar 19 '16 at 06:15
@epascarello both width:350px and width:350 have same effect on the height of ul. — k_learner, Mar 19 '16 at 14:36
Without units, you rely on a browser to guess the units for you. — epascarello, Mar 19 '16 at 14:45
oh! I am just a beginner so i don't know many things. I have watched just the basics tutorial of html and css. Can you suggest me some good books or any medium or advance level online tutorials? @epascarello — k_learner, Mar 19 '16 at 14:53

score 0 · Answer 1 · answered Mar 19 '16 at 03:44

Because you did not mention the width and height of parent div, So after putting float:right in child element, parent also float on right. Check below code:

.menu-wrap{
  background-color:pink;
  display:inline-block;
  width: 100%;
  height: 105px;
}
ul{
  background-color:blue;
  height:100px;
  border:solid;
  width:350px;
  float: right;
  position: relative;
  top: -17px;
}

<div class="menu-wrap">
  <ul class="menu">
  </ul>
</div>

score 0 · Answer 2 · answered Mar 19 '16 at 06:02

If i understood your question correctly then this is what i suggest:

HTML:

<body>
  <div class="menu-wrap">
   <ul class="menu">
   </ul>
  </div>
</body>

CSS:

.menu-wrap{
  width: 100%;
  height: 500px;
  float: left;
  background-color:pink;
}
ul{
  width:350px;
  height:100px;
  margin: 0;
  padding: 0;
  float: right;
  background-color:blue;
  border:solid;
}

OR:

CSS:

.menu-wrap{
  height: 500px;
  position: relative;
  background-color:pink;
}
ul{
  width:350px;
  height:100px;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  background-color:blue;
  border:solid;
}

Hope this helps you out.. definitely take a look at float and position:relative/position:absolute css properties in detail.

score 0 · Answer 3 · answered Mar 19 '16 at 13:41

0

Finally i have understood the reason :) it is simply because the parent element contained nothing but floated element, the height of it collapses to nothing. for more details refer:- https://css-tricks.com/all-about-floats/

answered Mar 19 '16 at 13:41

k_learner

127
1
8

score -1 · Answer 4 · answered Mar 19 '16 at 03:26

-1

You must have something else your css file that is doing that. I have tested your code in jsfiddle and is working fine. Have a look https://jsfiddle.net/max234435/boL8zs4a/

answered Mar 19 '16 at 03:26

max234435

587
5
18

how float is affecting background color?

4 Answers4