2 div boxes side by side with space

I would like to get 2 DIVs to sit side by side each other inside a DIV. I created a quick image to show what I mean.


Right now i have the div2 floating to the right, but when you start to make the browser larger or smaller, that gap (pink) will not stay the same width. Any idea what I could be doing wrong?

Float both of them to the left and add a margin on one of them.

float both left
have the containing div have a certain width

you don’t need to have %s for the two smaller divs but I suggest doing that when you have them in a containing div with a certain width

that’s what I do : )

I float one left and the other right and then don’t use 100% of the width. That way there’s some space between the two smaller divs

Hey guys, thank you for your replies.

I’m still having some trouble with this. I’m trying to get the yellow box to push the blue box the remaining pixels filling the whitespace.


Here is the code I’m playing with:


<!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">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Untitled Document</title>
	
	
	<style type="text/css">
	<!--
	#container {
		width:100%;
	}
	#box1	{
		background:yellow; border:1px solid #000;
		float:left; min-height:230px; margin-right:10px;
	}
	#box2 	{
		background:blue; border:1px solid #000;
		float:left; min-height:230px; width:250px;
	}
	-->
	</style>	
</head>
<body>


<div id="container">
	<div id="box1">
		This box should strech the remaining pixels left, pushing the blue box as well
	</div>
	<div id="box2">
		This box should be 250px in width no matter the browser size
	</div>
	
</div>
</body>
</html>

Any suggestions? Thanks everyone!

You could give the container a yellow background;margin-right:250px; and apply a float:right to box2.


<!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">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Untitled Document</title>
	
	
	<style type="text/css">
	<!--
	#box1	{ 
		border:1px solid #000;
		background:yellow;
		min-height:230px;
		margin-right:260px;
	}
	#box2 	{
		float:right;
		background:red;
		border:1px solid #000;
		min-height:230px;
		width:250px;
	}
	-->
	</style>	
</head>
<body>


<div id="container">
	<div id="box2">
		This box should be 250px in width no matter the browser size
	</div>
	<div id="box1">
		This box should strech the remaining pixels left, pushing the blue box as well
	</div>
</div>
</body>
</html>

Thanks Razor, there is no space between the two boxes, honestly this will do just fine. I’m tired of fighting with it. I appreciate the help!

Hi, I edited. You should have a space between the boxes now.

Razor > God. Thanks man! :slight_smile:

I would use a clearing div instead of the min-heights
that’s just how I would do it because then the height of the two divs adjust without having to change the css all the time.