CODEWITHSUNDEEP
javascripthtmlcss
Hahanap
Hahanap

Reputation: 1

CSS Position: Sticky not Working When there is Float:left

My Codes:

`

#topMenu
{
position:sticky;
top:0;
}
#leftContent
{
float:left;
width:200px;
}
#rightContent
{
float:right;
width:200px;
}

</style>
</head>
<body>
<div id="topMenu">This message is sticky</div>

<div id="leftContent">Testing<br><br><br><br><br><br><br>Test<br><br><br>Testing<br><br><br><br><br><br><br>Test<br><br><br></div>

<div id="rightContent">Testing<br><br><br><br><br><br><br>Test<br><br><br>Testing<br><br><br><br><br><br><br>Test<br><br><br></div>`

The #topMenu's Position: Sticky works if i remove the float:left of #leftContent

How can i make #topMenu Sticky while having the #leftContent and #rightContent appear in same horizontal with/without using float:left?

`

Upvotes: 0

Views: 55

Answers (1)

Damzaky
Damzaky

Reputation: 10826

You can add <div style="clear: both" /> to clear the floats if you wish to still use the float like this:

#topMenu {
  position: sticky;
  top: 0;
}

#leftContent {
  float: left;
  width: 200px;
}

#rightContent {
  float: right;
  width: 200px;
}
<div id="topMenu">This message is sticky</div>

<div id="leftContent">Testing<br><br><br><br><br><br><br>Test<br><br><br>Testing<br><br><br><br><br><br><br>Test<br><br><br></div>

<div id="rightContent">Testing<br><br><br><br><br><br><br>Test<br><br><br>Testing<br><br><br><br><br><br><br>Test<br><br><br></div>

<div style="clear: both" />

The more modern way (without using float) is by using flexbox model, like this:

#topMenu {
  position: sticky;
  top: 0;
}

#leftContent {
  width: 50%;
}

#rightContent {
  width: 50%;
}

.flexbox {
  display: flex;
}
<div id="topMenu">This message is sticky</div>

<div class="flexbox">
  <div id="leftContent">Testing<br><br><br><br><br><br><br>Test<br><br><br>Testing<br><br><br><br><br><br><br>Test<br><br><br></div>

  <div id="rightContent">Testing<br><br><br><br><br><br><br>Test<br><br><br>Testing<br><br><br><br><br><br><br>Test<br><br><br></div>
</div>

Upvotes: 1

Related Questions