Positioning two absolute elements horizontally without javascript

Question

I have a page with a heading and two columns below it. These two columns are positioned absolutely so that they can expand their background colors to the bottom of the page. Here are the limitations:

• I want the left edge of the right column to start where the right edge of the left column ends.
• The text in the left column changes with some ajax requests. It needs to expand, so I cannot use a fixed width in the left column.
• The right column width does not matter. Its height should at least fill the page vertically 100% from the bottom. If the content goes below the bottom of the page, the background should expand with it.

The idea is that the user will visit this main page and it will look “full”, since it occupies almost the entire page horizontally in all three columns, and should display the entire page vertically. When they scroll down, the left column may end , and the right column can continue.

I accomplished this with javascript.

$("#right").css('left', $("#left").width()+'px'); 

I do not want to use javascript. Can I redo this page with these restrictions only using CSS3?

http://jsfiddle.net/m3ta/BJFME/2/

Answer 1

Based on the "float" hint, this is the way to go:

• reinstall the left column so that it is inside the right col element.
• set the correct col element to 100% width
• set the left column "float: left" and give it a height of 100%
• check if you need another "middle" vis;)

CSS

 #left { float:left; background: SkyBlue; height:100%; } #right { position: absolute; background: YellowGreen; right: 0; top: 0; bottom: 0; left: 0; } 

HTML

 <div id = "mid"> <div id = "right"> <div id = "left"> <p>Lorem Ipsum Something</p> <p>Lorem Ipsum Something 23</p> <p>Lorem Ipsum Something 23 and much more text</p> </div> <p>And here goes the content for the right part</p> </div> </div> 

see this forked fiddle for an example http://jsfiddle.net/UXGjt/

Answer 2

Adding to the foobored post - since it was faster than me - add Max-width to the left div. And as it expands, it goes no more than 50% of the page, keeping the text inside.

JSFIDDLE

 * { margin: 0; padding: 0 } #top { height: 100px; background: orange } #mid { position: absolute; top: 100px; bottom: 0; width: 100% } #left { float:left; max-width: 50%; background: SkyBlue; height:100%; } #right { position: absolute; background: YellowGreen; right: 0; top: 0; bottom: 0; left: 0; } 

Answer 3

Try the following:

 * { margin: 0; padding: 0 } #top { height: 100px; background: orange } #mid { position: absolute; top: 100px; bottom: 0; width: 100% } #left { float:left; max-width: 50%; background: SkyBlue; height:100%; width: auto; } #right { position: absolute; background: YellowGreen; right: 0; top: 0; bottom: 0; left: 0; width: auto; height: auto; overflow: auto; } 

Fiddle

Answer 4

If you understood correctly, this is your solution:

http://jsfiddle.net/BJFME/3/

 #flexbox { display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: start; -webkit-box-align: start; display: -moz-box; -moz-box-orient: horizontal; -moz-box-pack: start; -moz-box-align: start; display: box; box-orient: horizontal; box-pack: start; box-align: start; overflow: hidden; } #flexbox .col { width: 27.333%; padding: 30px 3% 0; margin-bottom: -99999px; padding-bottom: 99999px; } #flexbox .col p { margin-bottom: 30px; } #flexbox .col:nth-child(1) { -moz-box-ordinal-group: 2; -webkit-box-ordinal-group: 2; box-ordinal-group: 2; background: #ccc; } #flexbox .col:nth-child(2) { -moz-box-ordinal-group: 1; -webkit-box-ordinal-group: 1; box-ordinal-group: 1; background: #eee; } #flexbox .col:nth-child(3) { -moz-box-ordinal-group: 3; -webkit-box-ordinal-group: 3; box-ordinal-group: 3; background: #eee; } 

Just took the codes from this site:

http://css-tricks.com/fluid-width-equal-height-columns/

There are several solutions for this.

Answer 5

I think you are trying to get a table layout try http://jsfiddle.net/MtBXf/

 <div id = "top"></div> <div id = "mid"> <div id = "left"> <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation </p> </div> <div id = "right"> <p>And here goes the content for the right part</p> </div> </div> * { margin: 0; padding: 0 } #top { height: 100px; background: orange } #mid { display:table-row; top: 100px; bottom: 0; width: 100% } #left, #right { display:table-cell; width: 50%; max-width: 50%; } #left { background: SkyBlue; } #right { background: YellowGreen; } 

Answer 6

Perhaps the following css 2.1 solution, which works even in older versions of IE:

 <div id = "top"></div> <div id = "mid"> <div id = "left"> <p>Lorem Ipsum Somささsething</p> <p>Lorem Ipsum Something 23dsdsdsdsd</p> <div id = "right"> dsdsdsdsd </div> </div> </div> * { margin: 0; padding: 0 } #top { height: 100px; background: orange } #mid { position: absolute; top: 100px; bottom: 0; width: 100% } #left { position: absolute; background: SkyBlue; top: 0; bottom: 0; } #right { position: absolute; background: YellowGreen; top: 0; left: 100%; min-height: 100%; }