I'm trying to write Firefox stylish css (full screen width style) for our StackExchange sites.
In the tagged question list page (eg: https://stackoverflow.com/questions/tagged/java ), the HTML is like the following
<div class='question-summary'>
<div class='statscontainer'>
<div>n votes</div>
<div>n answers</div>
<div>n views</div>
</div>
<div class='summary'>
<h3>Question title</h3>
<div>question excerpt ...</div>
<div>tag1 tag2 tagN </div>
</div>
</div>
The original CSS use fixed width on parent/child 1/child 2
<style>
.question-summary
{
float: left;
width: 730px;
background-color: silver;
}
.statscontainer
{
float: left;
width: 86px;
margin-right: 8px;
background-color: gray;
}
.summary
{
float: left;
width: 635px;
background-color: lightgray;
}
</style>
Now I try to override CSS to let it fit full screen width
.question-summary
{
float: left;
width: 100% !important; /* parent: full screen width */
background-color: silver;
}
.statscontainer
{
float: left;
width: 86px; /* child 1: fixed width */
margin-right: 8px;
background-color: gray;
}
.summary
{
float: left;
/*
width: 80% !important; <--- how to let child 2 has remaining width ?
left: 95px;
right: 0px;
*/
background-color: lightgray;
}
The question is, how to let child 2 has remaining width ? I know when using <table>
to control layout, it is pretty easy.
<table style='width:100%'>
<tr>
<td bgcolor='gray' style='width:80px'>fixed width</td>
<td bgcolor='lightgray'>automatically has remaining width</td>
<tr>
</table>
Edit
According both @sandeep and @MrLister 's answers, it should override 3 CSS properties to get this work
.question-summary .summary {
width: auto !important; /* original = width: 735px; */
float: none !important; /* original = float: left; set to 'none' to get the 'overflow' property work */
overflow: hidden !important; /* original = not set, default is visible */
}
In this case, we set the child element's width to be 100% of the viewport width by using a percentage viewport unit (vw), then, we move it to the left side (by the distance of the viewport's half, minus 50% of the width of the parent element) with the left property.
The width property is used to fill a div remaining horizontal space using CSS. By setting the width to 100% it takes the whole width available of its parent. Example 1: This example use width property to fill the horizontal space. It set width to 100% to fill it completely.
You should reset the width to its initial value, which is auto
.
Edit:
As you noted though, in order for width:auto
to work, you should also reset the float
property, otherwise the width won't take up the rest of the available space.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With