4 divs, 3 with fixed width, and a middle one with 100% width

[lazarantal]

Hi,

 

I would like to achieve the following:

 

--------------------------------------------------------------------------

| fixed width | fixed width |              100% width                   |  fixed width   |

--------------------------------------------------------------------------

 

Dou you know how could I achieve this with css?

 

 

[yomanny]

Try this:

body {
	background-color: #000;
}

#container {
	float: left;
	width: 100%;
	background-color: #fff;
}

.left-box {
	float: left;
	width: 200px;
	background-color: #9C3;
}

.right-box {
	float: right;
	width: 200px;
	background-color: #FC9;
}

<div id="container">
	<div class="left-box">
    	Left box 1
    </div>
	<div class="left-box">
    	Left box 2
    </div>
    <div class="right-box">
    	Right box
    </div>
</div>

- W

[lazarantal]

Try this:

body {
	background-color: #000;
}

#container {
	float: left;
	width: 100%;
	background-color: #fff;
}

.left-box {
	float: left;
	width: 200px;
	background-color: #9C3;
}

.right-box {
	float: right;
	width: 200px;
	background-color: #FC9;
}

<div id="container">
	<div class="left-box">
    	Left box 1
    </div>
	<div class="left-box">
    	Left box 2
    </div>
    <div class="right-box">
    	Right box
    </div>
</div>

- W

 

Hi!

 

Thanks for the replay. I wasn't precise enough. There are four divs inside the container, 3 with fixed width and the middle one with 100% width.

 

Regards,

Tony

[Libellula]

In regards to the provided code above, it should acheive what you are asking for no? If three of the div sections are fixed, your middle one will fill in the rest automatically - if you want it 100% within the useable space. What is the code above doing or not doing that you need it to. I'll try to figure it out for you.