Light blog

Archive for the ‘CSS’ Category

align 3 divs, 2 fixed sides and the middle div auto size

November 2nd, 2011 |

Author: admin

How to align 3 divs using only css, from which 2 have fixed sides and the middle one will auto fit.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<style type="text/css">

body { min-width: 630px; }

#header { background-color:brown; }

#mainContent { width:1000px; margin:0px auto; }

#container { padding-left: 200px; padding-right: 190px; }

#container .column { position: relative; float: left; }

#center { padding: 10px 20px; width: 100%; background-color:green; }

#left { width: 180px; padding: 0 10px; right: 240px; margin-left: -100%; background-color:blue; }

#right { width: 130px; padding: 0 10px; margin-right: -190px; background-color:red; }

#footer { clear: both; background-color:brown; }

/*** IE Fix ***/

* html #left { left: 150px; }

</style>

</head>

<body>

<div id="mainContent">

        <div id="header">header</div>

        <div id="container">

                <div id="center" class="column">mid container</div>

                <div id="left" class="column">left side</div>

                <div id="right" class="column">right side</div>

        </div>

        <div id="footer">footer</div>

</div>

</body>

</html>

source: http://www.alistapart.com/articles/holygrail