Member Avatar for Lolalola

Hi, how to make that div "left and "rigth" would have 50% empty window. And div "center" always be the center.
Now div make one after another

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
div.body{
margin:0;
padding:0;
}
div.left{
float: left;
width: 50%;
height: 686px;
background-color: #336699;
}
div.center{
float: left;
width: 700px;
height: 686px;
background-color: #5292d9;
}
div.banner{
height: 200px;
}
div.right{
float: left;
width: 50%;
height: 686px;
background-color: #336699;
}

</style>

</head>
<body>
<div class = "left">
</div>
<div class = "center">
    <div class = "banner">
	    <img src="banner.jpg" />
	</div>
</div>
<div class = "right">
</div>
</body>
</html>
  • 3 Contributors
  • 4 Replies
  • 91 Views
  • 21 Hours Discussion Span
  • Latest Post Latest Post by ko ko

Dani AI

Generated

For 's goal (a fixed-width center column with left/right areas that fill the remaining window), a modern, reliable method is CSS Flexbox. It avoids complex floats/absolute positioning and keeps the center element visually centered while the side panels expand or contract. This also addresses the percent-based idea from and the absolute-position fallback offered by , but with simpler behavior and better responsiveness. See the Flexbox basics for details: MDN — Basic concepts of Flexbox.

Example layout (structure + CSS):

<div class="layout">
<div class="side left"></div>
<main class="center">
<div class="banner"><img src="banner.jpg" alt=""></div>
</main>
<div class="side right"></div>
</div>

.layout { display: flex; min-height: 686px; margin: 0; }
.side { flex: 1 1 0%; min-width: 0; background: #336699; }
.center { flex: 0 0 700px; box-sizing: border-box; background: #5292d9; }
.banner { height: 200px; }

Notes and practical tips:

  • The two .side elements share leftover space so the center stays centered. Use min-width: 0 on flex children to avoid unexpected overflow from wide content.
  • To make the center shrink on very small viewports, change its rule to flex: 0 1 700px; max-width: 100%; and add media queries to stack or collapse side panels when needed.
  • For very old browsers, keep a simple float/absolute fallback (as discussed by and ) behind the Flexbox rules; apply flexbox as progressive enhancement.

Recommended Answers

All 4 Replies

Member Avatar for ticalico

I'm not sure if understand the question, but i'm guessing you want 3 columns, if that's so, you can try....

div.left{

float: left;

width: 25%;

height: 686px;

background-color: #336699;

}

div.center{

float: left;

width: 50%;

height: 686px;

background-color: #5292d9;

}

div.banner{

height: 200px;

}

div.right{

float: left;

width: 25%;

height: 686px;

background-color: #336699;

}

Hi, how to make that div "left and "rigth" would have 50% empty window. And div "center" always be the center.
Now div make one after another

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
div.body{
margin:0;
padding:0;
}
div.left{
float: left;
width: 50%;
height: 686px;
background-color: #336699;
}
div.center{
float: left;
width: 700px;
height: 686px;
background-color: #5292d9;
}
div.banner{
height: 200px;
}
div.right{
float: left;
width: 50%;
height: 686px;
background-color: #336699;
}

</style>

</head>
<body>
<div class = "left">
</div>
<div class = "center">
    <div class = "banner">
	    <img src="banner.jpg" />
	</div>
</div>
<div class = "right">
</div>
</body>
</html>
Member Avatar for Lolalola

Look this:

I want that div to a fixed size and varied only "left" and "rigth" divs.

Sorry for the English language

Member Avatar for Lolalola

I want to be as follows:

I hope to understand

Member Avatar for ko ko

Your theory is wrong. Left and right were 50% of width, so the total width of these two elements is the full size of the window, and there is no space for center element. The point is you need the center element has the fixed width and the left and right were decided by the resolution. So, you must give standard width for the center. How much width do you want for the center? And how much resolution is the standard to use?For example, you design based on 1024 resolution, you give the center element width to 600px wide. It means it has 60% of the browser width. So you can give the left and right half of 40%, each has 20% width. But this is not good. You should set all element width for percentage value. Or try with absolute position. Here is the example.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
	margin: 0;
	padding: 0
	}
div.body{
    margin:0;
    padding:0;
    }
div.left{
	position: absolute;
	left: 0;
	top: 0;
    width: 20%;
    height: 686px;
	background-color: #336699;
    }
div.center{
    width: 600px;
    height: 686px;
	margin: 0 auto;
    background-color: #5292d9;
    }
div.banner{
    height: 200px;
    }
div.right{
    position: absolute;
	top: 0;
	right: 0;
    width: 20%;
    height: 686px;
    background-color: #336699;
    }
</style>
</head>
<body>
<div class = "left">
</div>
<div class = "center">
<div class = "banner">
<img src="banner.jpg" />
</div>
</div>
<div class = "right">
</div>
</body>
</html>

It would help a little. But not the good solution too. Try with percentage values for all, that is the best solution I think.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.