Member Avatar for gloris

Hi,
I need three tables (div).
The left and right sides of the occupied 50% of the free window.
The center is fixed.

Everything seems fine, but right down to jump off the table.

<!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>
<style type="text/css">
body{
	margin:0;
	padding:0;
}
#left{
	float: left;
	width: 50%;
	background: #FDA02E;
	margin-left: -300px;
}
#center{
	float: left;
	width: 600px;
	margin-right: 300px;
	background: #C8FF98;
}
#right{
	float: left;
	width: 50%;
	margin-left: -300px;
	background: #FDE95E;
}
</style>
</head>
<body>
<div id="pag">
	<div id="left">
	    Left
	</div>
    <div id="center">	
		Center
	</div>
	<div id="right">
		Right
	</div>
</div>
</body>
</html>
  • 2 Contributors
  • 3 Replies
  • 89 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by gloris

Dani AI

Generated

Short answer: use modern layout (Flexbox) so the left and right columns share the remaining space while the center stays a fixed width. As described, floats with negative margins are fragile and will drop when the viewport gets too small. As pointed out, give the side columns a sensible min-width to avoid the “infinite squeeze.” Below are two practical approaches.

<!-- HTML -->
<div class="wrap">
  <div class="side left">Left</div>
  <div class="center">Center (600px)</div>
  <div class="side right">Right</div>
</div>

/* CSS */
.wrap  { display: flex; align-items: stretch; }
.center{ flex: 0 0 600px; width: 600px; box-sizing: border-box; }
.side  { flex: 1 1 0; min-width: 160px; box-sizing: border-box; overflow: hidden; }
@media (max-width: 980px) { .wrap { flex-direction: column; } }

Why this helps: flex:1 makes left/right split the leftover space equally; flex:0 0 600px locks the center; min-width prevents the sides from shrinking below usable widths; the media query stacks columns on small screens. Add box-sizing: border-box to make padding predictable.

If Flexbox is not an option, a calc() based float layout can work: set each side to width: calc((100% - 600px) / 2) and the center to width: 600px. In all cases test three things: total minimum widths (center + 2 * side min), how content (text/images) behaves at small widths, and browser support. For modern reference on Flexbox and calc(), see the MDN guides: Flexbox layout and calc().

Recommended Answers

All 3 Replies

Member Avatar for Member #120589

Sorry don't understand. Do you want left and right to be equal sizes and the divs to fill the screen?

Member Avatar for gloris

Thanks

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.