CSS doubts about resizing equally two boxes inline

Question

I'm trying to make two boxes where to put a chart and I'd like them to have same width for the entire width of page and autoresizing when I resize the page:

<style>
#middle_row_contents li {
    display: inline-block;
    list-style-type: none;
    padding-right: 2em;
    *display: inline;
}
</style>
<div class="middle_row_box">
<ul id="middle_row_contents">
    <li>
        <div class="hours_rooms_used">
            <div><h3>Meeting hours per room</h3><select id="years_rooms_used"></select></div>
            <div class="tab_rooms_used"><canvas id="chart_rooms_used"></canvas></div>
        </div>
    </li>
    <li>
        <div class="hours_per_customer">
            <div><h3>Meeting hours per customer</h3><select id="years_rooms_customer"></select></div>
            <div class="tab_rooms_customer"><canvas id="chart_per_customer"></canvas></div>
        </div>
    </li>
</ul>
</div>

I tried to put width: 50%; on both

and assing width: 100% on middle_row_box's div but it didn't worked...how I could do that? And if I put two elements like and a inside a , shouldn't they appear side by side since in my case looks like in a new row?

Cheers, Luigi

Please be more specific. What exactly is the problem? What goes wrong? Which two elements need to be side by side? Also, why are you using a `
` for this? — Thijs Riezebeek, Feb 04 '15 at 08:41

score 0 · Accepted Answer · answered Feb 04 '15 at 08:40

You need to set width to LIs too. How they should know you want to resize them?

#middle_row_contents {margin: 0; padding: 0;}

#middle_row_contents li {
    display: inline-block;
    list-style-type: none;
    padding-right: 2%; /* ems and % aren't compatible, use the same units */
    *display: inline;
    width: 47%; /* lower than 48% because of a white-space gap between inline-block elements. Use float to avoid this gap. */
    background: red;
}

http://jsfiddle.net/x98g7c3k/

score 0 · Answer 2 · edited May 23 '17 at 11:43

0

Try this javascript snippet

document.getElementById("hoursd_per_customers").style.width = (document.getElementById("hours_rooms_used").clientWidth - 10) + "px";

Hope it will work.

For more details, Click here...

edited May 23 '17 at 11:43

Community

1
1

answered Feb 04 '15 at 08:41

User

4,023
4
37
63

CSS doubts about resizing equally two boxes inline

2 Answers2