Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to override existing CSS to let child <div> 1 has fixed width and child <div> has remaining width of parent?

Tags:

css

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 */
}
like image 310
LiuYan 刘研 Avatar asked Jun 25 '12 10:06

LiuYan 刘研


People also ask

How do you make a child DIV element wider than the parent DIV?

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.

How do I make a DIV take up the remaining width?

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.


1 Answers

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.

like image 92
Mr Lister Avatar answered Sep 24 '22 02:09

Mr Lister