Member Avatar for Acute

Hello everyone,

I made a layout using float:left and it's ok until the browser window is resized. When window is resized everything messes up, how to fix it??? how to make it independent from window size? I mean whatever the window size is, layout keep it's positions.

Here is what I have:

body{
	margin: 1% 12% 1% 12%;
	
	border: 1px solid red;
}

div.header{
	float: left;
	
	padding: 7px;
	width: 98.5%;
	
	margin: 3px 0px 20px 0px;

	border: 1px solid red;
}

div.leftSpace{
	float: left;
	
	padding: 10px;
	width: 200px;
	margin: 0px 20px 20px 3px;
	
	border: 1px solid red;
}

div.content{
	float: left;
	
	padding: 10px;
	width: 50%;
	margin: 0px 20px 20px 0px;
	
	border: 1px solid red;
}

div.rightSpace{
	float: left;
	
	width: 170px;
	margin: 0px 3px 20px 0px;
	padding: 10px;
	
	border: 1px solid red;
}

div.footer{
	float: left;
	
	padding: 7px;
	width: 98.5%;
	margin: 0px;

	border: 1px solid red;
}

and the html:

<div class="header">
</div>

<div class="leftSpace">
</div>

<div class="content">
</div>
	
<div class="rightSpace">
</div>
	
<div class="footer">
</div>
  • 2 Contributors
  • 3 Replies
  • 125 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by skald89

Dani AI

Generated

Short diagnosis: the three floated columns are wrapping because the combined widths, plus padding and margins, exceed the available container width when the browser narrows. Using percentages or pixels won’t stop that — if the sum of column widths is larger than the parent, one or more floats will drop beneath the others. Also, floating header/footer is unnecessary and can complicate layout; make them normal block elements instead.

Two practical ways to fix it:

  • If the layout must stay fixed (never reflow), give the page a fixed wrapper width (or a min-width equal to the sum of the columns) so the browser shows a horizontal scrollbar instead of stacking columns.
  • If you want a cleaner solution, use Flexbox (or Grid) for the three-column row: pin the sidebars to fixed widths and let the center column flex. Use box-sizing: border-box so padding is included in width calculations, and add flex-wrap: nowrap (or set a min-width) to prevent unwanted wrapping.

Example Flexbox approach:

.wrapper { width: 960px; margin: 0 auto; box-sizing: border-box; overflow-x: auto; }

.row { display: flex; flex-wrap: nowrap; }

.left  { flex: 0 0 200px; }
.center{ flex: 1 1 auto; min-width: 400px; }
.right { flex: 0 0 170px; }

Notes and troubleshooting:

  • As hinted, percent widths react to window size, but the real issue is total width overflow. For , if you truly want no layout change, prefer a fixed wrapper width or min-width; otherwise add media queries to stack columns at small sizes.
  • Use DevTools to inspect computed widths, temporarily remove margins/padding to find the offending value, and ensure a standards doctype is present.
  • For details on box-sizing and Flexbox behavior, see MDN: box-sizing on MDN and Flexbox guide on MDN.

Recommended Answers

All 3 Replies

Member Avatar for skald89

I know very little and I am just trying to give back to the forum. With that said, maybe its because you have % as your sizes instead of px and it causes it to resize do the window size? I'm just making a logical guess, the % for the widths and margins are read by browsers to match the window size so it keeps changing when you resize the window.

Edited by skald89 because: n/a
Member Avatar for Acute

Thanks for reply.
Even when I put pxs instead of %s, I face the same problem: "float:left"s cannot fit in their places and they just jump under. I've read this http://www.maxdesign.com.au/articles/liquid/ so far, and tried to apply the liquid-fixed method, but problems begin when I use three columns :( I desperately need help :/

Member Avatar for skald89

oh maybe try changing the width of the divs to auto. That way its width will expand with the content instead of being a fixed width which causes overflow to jump to the next line.

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.