Jump to content


Photo

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


  • Please log in to reply
3 replies to this topic

#1 lazarantal

lazarantal

    Member

  • Members
  • PipPip
  • 11 posts

Posted 10 March 2013 - 12:59 PM

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?

 

 



#2 yomanny

yomanny

    Advanced Member

  • Members
  • PipPipPip
  • 36 posts
  • LocationStockholm, Sweden
  • Age:24

Posted 12 March 2013 - 11:48 AM

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



#3 lazarantal

lazarantal

    Member

  • Members
  • PipPip
  • 11 posts

Posted 19 March 2013 - 04:19 PM

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



#4 Libellula

Libellula

    Member

  • Members
  • PipPip
  • 23 posts

Posted 28 March 2013 - 02:07 PM

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.






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com