Make div flow across screen

VaMoose · 02-16-2013, 10:05 AM

My parent div has a width of 980px, but I want the div to have a background colour of #171717, 150px high, and to flow from the left of the screen to the right without making it have the horizontal scroll bar. How do I do this?

Also, I want to store icons in the div, 3 to be particular, how do I space them evenly whole using the width of 980px like the 'grandparent' div?

Thanks.

sunfighter · 02-16-2013, 05:24 PM

I have a feeling this is not what you want:

Code:

<!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" xml:lang="en" lang="en">
<head>
<style type="text/css">
#container{
	height: 150px;
	width: 980px;
	background-color: #171717;
}
.sq{
	height: 50px;
	width: 100px;
	background-color: #385;
	float:left;
	margin: 50px 113px;
}
</style>
</head>

<body>
<div id="container">
	<div class="sq"></div>
	<div class="sq"></div>
	<div class="sq"></div>
</div>
</body>
</html>

You left out some important thing about the three divs inside the mother div. So I made the height, width, and background color.

How to equally space them. Used the parent height and width.
Height 150 - 50 = 100. Divide that by two and it becomes the top and bottom margin.

Width 980 /3 = 326.6 The width space needed by one smaller div. Then 326.6 - 100 = 226.6. And divide that by 2 = 113.3 the left and right margins.