Jump to content

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


lazarantal

Recommended Posts

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?

 

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 2 weeks later...

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.