Results 1 to 4 of 4

Thread: spread to the edge of the browser

  1. #1
    Join Date
    Dec 2009
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default spread to the edge of the browser

    <div id="Div1">
    <div id="Div2"></div> <---of height 20px
    <div id="Div3"></div><---of height 20px
    </div>

    I want all these <div> tags to spread to the edge of the browser and with a gap in between .

    what CSS to apply to these div's ?

  2. #2
    Join Date
    Sep 2008
    Posts
    48
    Thanks
    0
    Thanked 4 Times in 4 Posts

    Default

    Something like this?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
    	<title>Untitled</title>
    <style>
    body {
    margin: 0;
    padding: 0;
    }
    #Div1 {
    margin: 0;
    padding: 0;
    float: left;
    height: 20px;
    background-color: red;
    width: 45%
    }
    #Div2 {
    margin: 0;
    padding: 0;
    float: left;
    height: 20px;
    background-color: blue;
    width: 10%
    }
    #Div3 {
    margin: 0;
    padding: 0;
    float: right;
    height: 20px;
    background-color: green;
    width: 45%
    }
    </style>
    	
    </head>
    
    <body>
    
    <div id="Div1"></div>
    <div id="Div2"></div> 
    <div id="Div3"></div>
    
    
    </body>
    </html>

  3. #3
    Join Date
    Dec 2009
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    No, not like that....not all of them in the same line.

    Red should spread to the end

    blue will be down to the red . blue will also spread to the end

    green will be down to the red . green will also spread to the end.

  4. #4
    Join Date
    Sep 2008
    Posts
    48
    Thanks
    0
    Thanked 4 Times in 4 Posts

    Default

    Change the above width's to 100% on each div.

Bookmarks

Posting Permissions

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