4

Using this code

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial;}

/* Style the tab */
.tab {
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
    float: left;

}

</style>
</head>
<body>

<p>Click on the buttons inside the tabbed menu:</p>

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

</script>

</body>
</html>

The div has no bg color as seen here: img1

If I remove float:left from tab.button as here

/* Style the buttons inside the tab */
.tab button {

}

You can see the bg color appears: img2

(Question 1 & 2): My question is why I could not see bg color in first case, and I can see it now?

And final question is, if I add the float:left property back, but change .tab style like this:

.tab {
    overflow:hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
         float: left;

}

I can see bg color.

(Question 3): Can you explain why overflow:hidden allowed me to see bg color in this case? (when without it -granted I still used float:left on tab.button- I could not see it as in first example?)

Here are above three questions summed up:

1) Why I can't see the bg color with only float:left on .tab button?

2) Why I can see bg color when I remove float:left .tab button?

3) Why I can see bg color when I add float:left to .tab button, but also add overflow hidden to .tab?

PS I am in a way beginner with CSS

0 Answers0