<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { min-width: 550px; } #container { padding-left: 200px; padding-right: 150px; } #container .column { height: 200px; float: left; } #center { width: 100%; background: red; } #left { background: blue; width: 200px; margin-left: -100%; position: relative; right: 200px; } #right { background: green; width: 150px; margin-right: -150px; } </style> </head> <body> <div id="container"> <div id="center" class="column"> </div> <div id="left" class="column"> </div> <div id="right" class="column"> </div> </div> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
min-width: 550px;
}
#container {
padding-left: 200px;
padding-right: 150px;
}
#container .column {
height: 200px;
float: left;
}
#center {
width: 100%;
background: red;
}
#left {
background: blue;
width: 200px;
margin-left: -100%;
position: relative;
right: 200px;
}
#right {
background: green;
width: 150px;
margin-right: -150px;
}
</style>
</head>
<body>
<div id="container">
<div id="center" class="column">
</div>
<div id="left" class="column">
</div>
<div id="right" class="column">
</div>
</div>
</body>
</html>