Skip to content Skip to sidebar Skip to footer
Home / Css / Html

3 Divs Side By Side - The Center One Fixed Width And Other Ones Take The Rest Of The Screen Space

Post a Comment
I've been trying all day long to create a 'container' for my website. I need 3 divs positioned side by side. The center div has a fixed width, 800px and be positioned in the center

Solution 1:

Its possible by div as follows:

<divclass="container"><divclass="left-wrap"><divclass="left-wrap-inner"><divclass="left-div"></div></div></div><divclass="right-wrap"><divclass="right-wrap-inner"><divclass="right-div"></div></div></div><divclass="central-div"></div></div>

& css

.container{display:block; position:relative;}
.left-wrap{display:block; float:left; width:50%;}
.left-wrap.left-wrap-inner{display:block; padding:0400px00;}
.left-wrap.left-wrap-inner.left-div{display:block; height:50px; background:#f00;}

.right-wrap{display:block; float:right; width:50%;}
.right-wrap.right-wrap-inner{display:block; padding:000400px;}
.right-wrap.right-wrap-inner.right-div{display:block; height:50px; background:#0f0;}

.central-div{display:block; width:800px; height:50px; position:absolute; top:0; left:50%; marging:000 -400px;}

Solution 2:

Try adding another div that will contain all your divs like:

<divclass = "wrap"><divclass = 'left'>1</div><divclass = 'center'>2</div><divclass = 'right'>3</div></div>

Then give it full width:

.wrap{
   width: 100%;
}

Then float both the left and center divs to left and maybe remove all your absolute positioning and see if this works without those.

Solution 3:

The full HTML:

<!doctype html><html><head><title></title><style>#three {
                margin-top: 30px;
                display: table;
            }

            #three > div {
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                display: table-cell;
            }

            #three > .left {
                background: cyan;
            }

            #three > .right {
                background: purple;
            }

            #three > .center {
                width: 600px;
                background: blue;
            }

            p:first-child {
                margin-top: 0;
            }
        </style></head><body><divid="three"><divclass="left"><div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat consequat nulla, sed dignissim diam molestie non. Ut est erat, ullamcorper sed mauris et, fermentum lacinia mi. Ut sollicitudin venenatis purus nec facilisis. Pellentesque non elit nibh. Aenean pellentesque lorem elit, nec condimentum purus posuere nec. Vivamus tincidunt dolor a velit gravida ultricies. Donec scelerisque ultrices dignissim. Praesent malesuada est velit, a egestas elit bibendum at. Morbi ornare ipsum non auctor hendrerit. Mauris varius quam id leo egestas rhoncus. Quisque magna augue, eleifend at velit vel, aliquam varius urna. Vivamus non aliquam nisl. Aliquam erat volutpat. Curabitur et pulvinar magna. Mauris aliquet aliquet sapien at commodo.</p><p>Cras sed tincidunt ligula. Suspendisse in ipsum et nulla eleifend sodales. Donec justo mauris, fermentum dignissim lectus vitae, dignissim interdum est. Aenean commodo tincidunt lacinia. Suspendisse luctus adipiscing auctor. Quisque porttitor feugiat leo, eu feugiat elit mollis sit amet. Vivamus eget dignissim nisl. Aliquam vitae lorem ac quam porttitor mattis at at leo. Nam id interdum elit.</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer a ante eget dolor ultrices iaculis. Nunc varius faucibus dui, et pharetra urna imperdiet ut. Nulla et eleifend libero. Integer sodales ornare risus at scelerisque. Aliquam quis tincidunt erat, eu molestie mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla interdum mollis ultricies. Proin urna justo, luctus in felis quis, ultricies sodales odio. Donec pretium neque sit amet nisl rutrum, bibendum tempor orci dignissim. In auctor purus id enim pellentesque sollicitudin.</p><p>Nunc sagittis mauris consequat felis pharetra condimentum. Maecenas a nisl sit amet lorem molestie imperdiet quis eget diam. Curabitur eleifend purus quis dui semper lobortis. Proin pharetra at elit et consectetur. Nullam scelerisque eros massa, in lobortis augue fringilla non. Aenean et rutrum arcu. Mauris sem nisl, pulvinar vitae sem vitae, pharetra posuere libero.</p><p>Vestibulum a arcu vel tellus commodo dapibus at a nibh. Curabitur lobortis diam ut elit mollis viverra. Cras ultricies, elit eu tempus eleifend, metus enim fringilla purus, et lacinia urna mi sit amet nibh. Vestibulum congue magna eget ante sagittis, quis fringilla sapien mattis. Maecenas at hendrerit velit. Donec lacinia, sem sed gravida fermentum, est eros ullamcorper eros, in congue risus purus eu mauris. Aliquam posuere lorem et posuere viverra. Pellentesque at ullamcorper lacus. Donec nunc arcu, elementum sit amet diam a, elementum vulputate urna. Donec id urna hendrerit, lobortis velit vitae, tempor eros. Proin vel massa augue.</p></div></div><divclass="center"><div><p>Cras sed tincidunt ligula. Suspendisse in ipsum et nulla eleifend sodales. Donec justo mauris, fermentum dignissim lectus vitae, dignissim interdum est. Aenean commodo tincidunt lacinia. Suspendisse luctus adipiscing auctor. Quisque porttitor feugiat leo, eu feugiat elit mollis sit amet. Vivamus eget dignissim nisl. Aliquam vitae lorem ac quam porttitor mattis at at leo. Nam id interdum elit.</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer a ante eget dolor ultrices iaculis. Nunc varius faucibus dui, et pharetra urna imperdiet ut. Nulla et eleifend libero. Integer sodales ornare risus at scelerisque. Aliquam quis tincidunt erat, eu molestie mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla interdum mollis ultricies. Proin urna justo, luctus in felis quis, ultricies sodales odio. Donec pretium neque sit amet nisl rutrum, bibendum tempor orci dignissim. In auctor purus id enim pellentesque sollicitudin.</p><p>Nunc sagittis mauris consequat felis pharetra condimentum. Maecenas a nisl sit amet lorem molestie imperdiet quis eget diam. Curabitur eleifend purus quis dui semper lobortis. Proin pharetra at elit et consectetur. Nullam scelerisque eros massa, in lobortis augue fringilla non. Aenean et rutrum arcu. Mauris sem nisl, pulvinar vitae sem vitae, pharetra posuere libero.</p></div></div><divclass="right"><div><p>Nunc sagittis mauris consequat felis pharetra condimentum. Maecenas a nisl sit amet lorem molestie imperdiet quis eget diam. Curabitur eleifend purus quis dui semper lobortis. Proin pharetra at elit et consectetur. Nullam scelerisque eros massa, in lobortis augue fringilla non. Aenean et rutrum arcu. Mauris sem nisl, pulvinar vitae sem vitae, pharetra posuere libero.</p><p>Vestibulum a arcu vel tellus commodo dapibus at a nibh. Curabitur lobortis diam ut elit mollis viverra. Cras ultricies, elit eu tempus eleifend, metus enim fringilla purus, et lacinia urna mi sit amet nibh. Vestibulum congue magna eget ante sagittis, quis fringilla sapien mattis. Maecenas at hendrerit velit. Donec lacinia, sem sed gravida fermentum, est eros ullamcorper eros, in congue risus purus eu mauris. Aliquam posuere lorem et posuere viverra. Pellentesque at ullamcorper lacus. Donec nunc arcu, elementum sit amet diam a, elementum vulputate urna. Donec id urna hendrerit, lobortis velit vitae, tempor eros. Proin vel massa augue.</p></div></div></div></body></html>

This is a much better solution than my earlier answer. It uses display:table and display:table-cell to make the divs behave like they're table cells, without resorting to using tables.

Caveat This will not work in old browsers. Check http://caniuse.com for compatibility

Post a Comment for "3 Divs Side By Side - The Center One Fixed Width And Other Ones Take The Rest Of The Screen Space"