I am creating a two column layout with one column having fixed and the other not.
For clear fix I am using the following code:
content: "";
display: table;
clear: both;
But when I have long content in my columns the horizontal scroll bar is visible.
How do control this? Can I, or should I, increase my clearfix code?
div.panel:after {
content: "";
display: table;
clear: both;
}
div.fixed {
margin-right: 40px;
text-align: right;
width: 360px;
float: left;
}
div.fluid {
margin-right: -400px;
width: 100%;
float: left;
}
div.frame {
margin-right: 400px;
text-align: left;
} <h1>The example</h1>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Luctus accumsan tortor posuere ac ut consequat semper viverra nam. Sagittis eu volutpat odio facilisis mauris sit amet. Turpis cursus in hac habitasse platea dictumst quisque sagittis. Sagittis nisl rhoncus mattis rhoncus urna neque viverra. Vel fringilla est ullamcorper eget nulla. Et malesuada fames ac turpis egestas maecenas pharetra. Id semper risus in hendrerit gravida rutrum quisque non tellus. Viverra accumsan in nisl nisi scelerisque eu. Orci dapibus ultrices in iaculis nunc. Laoreet non curabitur gravida arcu ac. Sociis natoque penatibus et magnis dis parturient montes.
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Luctus accumsan tortor posuere ac ut consequat semper viverra nam. Sagittis eu volutpat odio facilisis mauris sit amet. Turpis cursus in hac habitasse platea dictumst quisque sagittis. Sagittis nisl rhoncus mattis rhoncus urna neque viverra. Vel fringilla est ullamcorper eget nulla. Et malesuada fames ac turpis egestas maecenas pharetra. Id semper risus in hendrerit gravida rutrum quisque non tellus. Viverra accumsan in nisl nisi scelerisque eu. Orci dapibus ultrices in iaculis nunc. Laoreet non curabitur gravida arcu ac. Sociis natoque penatibus et magnis dis parturient montes.
</div>
</div>
</div>
<p> End of example</p>CodePudding user response：
I can see the problem is with the margin-right property. Why it must be right? It will create an invisible space to the right, thus the hoz scrollbar. You can simply change that to margin-left with the same value and it still work (without the hoz scrollbar).
div.panel:after {
content: "";
display: table;
clear: both;
}
div.fixed {
margin-right: 40px;
text-align: right;
width: 360px;
float: left;
}
div.fluid {
margin-left: -400px;
width: 100%;
float: left;
}
div.frame {
margin-left: 400px;
text-align: left;
} <h1>The example</h1>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Luctus accumsan tortor posuere ac ut consequat semper viverra nam. Sagittis eu volutpat odio facilisis mauris sit amet. Turpis cursus in hac habitasse platea dictumst quisque sagittis. Sagittis nisl rhoncus mattis rhoncus urna neque viverra. Vel fringilla est ullamcorper eget nulla. Et malesuada fames ac turpis egestas maecenas pharetra. Id semper risus in hendrerit gravida rutrum quisque non tellus. Viverra accumsan in nisl nisi scelerisque eu. Orci dapibus ultrices in iaculis nunc. Laoreet non curabitur gravida arcu ac. Sociis natoque penatibus et magnis dis parturient montes.
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Luctus accumsan tortor posuere ac ut consequat semper viverra nam. Sagittis eu volutpat odio facilisis mauris sit amet. Turpis cursus in hac habitasse platea dictumst quisque sagittis. Sagittis nisl rhoncus mattis rhoncus urna neque viverra. Vel fringilla est ullamcorper eget nulla. Et malesuada fames ac turpis egestas maecenas pharetra. Id semper risus in hendrerit gravida rutrum quisque non tellus. Viverra accumsan in nisl nisi scelerisque eu. Orci dapibus ultrices in iaculis nunc. Laoreet non curabitur gravida arcu ac. Sociis natoque penatibus et magnis dis parturient montes.
</div>
</div>
</div>
<p> End of example</p>Or you can use display: flex in class .panel and flex-shrink: 0 in class .fixed and remove the other classes codes, result is the same.
.panel {
display: flex;
}
div.fixed {
margin-right: 40px;
text-align: right;
width: 360px;
flex-shrink: 0;
}<h1>The example</h1>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Luctus accumsan tortor posuere ac ut consequat semper viverra nam. Sagittis eu volutpat odio facilisis mauris sit amet. Turpis cursus in hac habitasse platea dictumst quisque sagittis. Sagittis nisl rhoncus mattis rhoncus urna neque viverra. Vel fringilla est ullamcorper eget nulla. Et malesuada fames ac turpis egestas maecenas pharetra. Id semper risus in hendrerit gravida rutrum quisque non tellus. Viverra accumsan in nisl nisi scelerisque eu. Orci dapibus ultrices in iaculis nunc. Laoreet non curabitur gravida arcu ac. Sociis natoque penatibus et magnis dis parturient montes.
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Luctus accumsan tortor posuere ac ut consequat semper viverra nam. Sagittis eu volutpat odio facilisis mauris sit amet. Turpis cursus in hac habitasse platea dictumst quisque sagittis. Sagittis nisl rhoncus mattis rhoncus urna neque viverra. Vel fringilla est ullamcorper eget nulla. Et malesuada fames ac turpis egestas maecenas pharetra. Id semper risus in hendrerit gravida rutrum quisque non tellus. Viverra accumsan in nisl nisi scelerisque eu. Orci dapibus ultrices in iaculis nunc. Laoreet non curabitur gravida arcu ac. Sociis natoque penatibus et magnis dis parturient montes.
</div>
</div>
</div>
<p> End of example</p>Edit: Another way to fix is just add overflow-x: hidden to class .panel and the hoz scroll will disappear.