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 Coder
    Join Date
    Mar 2007
    Location
    Bulgaria, Plovdiv
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts

    3 divs in header (can't float properly)

    Hi guys,
    i have a simple problem, that i cannot solve for a while. Here is my code:
    PHP Code:
    <!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">
    <
    head>
    <
    meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <
    style type="text/css">
    <!--
    body,html {
    margin0;
    padding0;
    background-colorblack;
    height100%;
    }
    #main {
    background-colorgreen;
    height100%;
    }
    #header {
    background-colormagenta;
    width100%;
    height100px;
    }
    #header-left {
    floatleft;
    background-colorred;
    width100px;
    height100px;
    }
    #header-center{
    floatleft;
    background-colorgray;
    width500px;
    height100px;
    }
    #header-right {
    floatleft;
    background-colorblue;
    width100px;
    height100px;
    }
    -->
    </
    style>
    <
    title>3 DIVS</title>
    </
    head>
    <
    body>
    <
    div id="main">
    <
    div id="header">
    <
    div id="header-left"></div>
    <
    div id="header-center"></div>
    <
    div id="header-right"></div>
    </
    div>
    body -> width100%; height100%; colorblack;<br />
    main div -> width100%; height100%; colorgreen;<br />
    header -> width100%; height100pxcolormagenta;<br />
    header-left -> floatleftwidth100pxheight100pxcolorred;<br />
    header-center -> floatleftwidth500pxheight100pxcolorgray;<br />
    header-right -> floatleftwidth100pxheight100pxcolorblue;<br />
    </
    div>
    </
    body>
    </
    html
    Let me explain:

    1. When i try to resize the window, the red and blue box divs go over and under the gray one. How i can fix that?

    2. I want the red and blue box stretch all over the magenta (header div). I tried with width: auto, but it doesnt work (width: % too). The red and blue should be same width and center with fixed width.

    I know that can be done very easy with this small piece of text:
    PHP Code:
    <table border="1" style="width: 100%">
    <
    tr>
    <
    td style="background-color: red; width: auto;">left</td><td style="background-color: gray; width: 500px;">center</td><td style="background-color: blue; width: auto;">right</td>
    </
    tr>
    </
    table
    but i dont want to do it that way.

    10x in advance.

  • #2
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    Code:
    <!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">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
    <!--
    body,html {
    margin: 0;
    padding: 0;
    background-color: black;
    height: 100%;
    }
    #main {
    width: 800px;
    background-color: green;
    height: 100%;
    margin: 0 auto;
    }
    #header {
    background-color: magenta;
    width: 100%;
    height: 100px;
    }
    #header-left {
    float: left;
    background-color: red;
    width: 100px;
    height: 100px;
    }
    #header-center{
    background-color: gray;
    height: 100px;
    margin-left: 100px;
    }
    #header-right {
    float: right;
    background-color: blue;
    width: 100px;
    height: 100px;
    }
    -->
    </style>
    <title>3 DIVS</title>
    </head>
    <body>
    <div id="main">
    <div id="header">
    <div id="header-left">left</div>
    <div id="header-right">right</div>
    <div id="header-center">centre</div>
    </div>
    
    </div>
    </body>
    </html>
    Something like this?
    Last edited by jlhaslip; 10-03-2007 at 05:57 PM.


  •  

    Posting Permissions

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