Stop DIVs moving next line

Hello,

I’m trying to develop a layout in a such way that DIVs will stop move to the next line as width of the browser changes.

here is a code:

<html><head>
<style>
div
{
width: 100px;
height: 100px;
float: left;
border: 1px solid black;
margin: 1em;
}
</style>
</head>

<body>
<div>DIV1</div>
<div>DIV2</div>
</body>
</html>

If I would use table, divs will stay on one line, even the rightest div will be cutted. Is it possible to do same with css?

This is what happens with floats. That’s how floats are designed to behave.

If you don’t want that behaviour, don’t use floats. Use absolute positioning instead, or make sure that the container is wide enough to accommodate all floated elements.

Hello

? design for a min width, wrap them in container, use min width on body, etc


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>12345 12345 12345 12345 12345 </title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	*{margin:0;padding:0;}
	
	body{min-width:770px;}
	
	.x div,.y div{
	display:inline;
	width:98px;
	height:98px;
	float:left;
	border:1px solid black;
	margin:9px 0 0 9px;
	}
	.x{clear:both;overflow:hidden;width:445px;padding-bottom:9px;}
	</style>
	<!--[if IE]><style type="text/css">body {width:expression( documentElement.clientWidth < 770 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 770 ? "770" : "auto") : "770px") : "auto" );}</style><![endif]-->
</head>

<body>
<div class="y">
<div>DIV1</div>
<div>DIV2</div>
<div>DIV1</div>
<div>DIV2</div>
<div>DIV1</div>
<div>DIV2</div>
<div>DIV1</div>
<div>DIV2</div>
<div>DIV1</div>
<div>DIV2</div>
<div>DIV1</div>
<div>DIV2</div>
<div>DIV1</div>
<div>DIV2</div>
<div>DIV1</div>
<div>DIV2</div>
</div>

<div class="x">
<div>DIV1</div>
<div>DIV2</div>
<div>DIV1</div>
<div>DIV2</div>
<div>DIV1</div>
<div>DIV2</div>
<div>DIV1</div>
<div>DIV2</div>
<div>DIV1</div>
<div>DIV2</div>
<div>DIV1</div>
<div>DIV2</div>
<div>DIV1</div>
<div>DIV2</div>
<div>DIV1</div>
<div>DIV2</div>
</div>

</body>
</html>

Thanks a lot!! That’s just what I wanted. :slight_smile: