DIV width automatic with CSS?

Question

I have 3 columns with divs, the middle one has fixed size 977px, Left and Right one have no width, Im trying to set them automatic to have size equal to max window size - middle div size (977px) and devided by 2. So the left and right one are the same size. Is there any way to do that.

You could make 2 container div, with max size, and inner div's make on %. — Arturs
– Arturs, Commented Aug 23, 2013 at 11:05
Since you tagged "CSS3", will you be satisfied with flexbox? — Passerby
– Passerby, Commented Aug 23, 2013 at 11:18
As far as I know, it's not possible without the calc() function introduced in CSS3. like width:calc(100% - 400px); — Kotzilla
– Kotzilla, Commented Aug 23, 2013 at 11:23

hresult · Accepted Answer · 2013-08-23 11:58:11Z

1

Are u looking like this ?

HTML

<div id="container">
    <div id="left"></div>
    <div id="mid"></div>
    <div id="right"></div>
</div>

CSS

body {
    margin: 0;
    padding: 0;
}

#container {
    width: 100%;
}

#mid {
    width: 977px;
    margin: 0 auto;
    background-color: red;    
    height: 100px;
}

TEST

edited Aug 23, 2013 at 11:58

hresult

3012 silver badges17 bronze badges

answered Aug 23, 2013 at 11:46

ANonmous Change

8083 gold badges11 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mangled · Accepted Answer · 2013-08-23 11:22:19Z

0

You can use the same class style for them and set a common size for them if you want

like this:

<div id="container>
    <div id="left" class="outerdivs"></div>
    <div id="mid"></div>
    <div id="right" class="outerdivs"></div>
</div>

answered Aug 23, 2013 at 11:22

Mangled

3291 gold badge2 silver badges13 bronze badges

Collectives™ on Stack Overflow

DIV width automatic with CSS?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related