Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Make div flow across screen

    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.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,206
    Thanks
    23
    Thanked 605 Times in 604 Posts
    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •