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

Thread: CSS issue

  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    CSS issue

    I have the following HTML file:
    <html>
    <head>
    <title>FV.com - See it your way</title>
    <style>
    * {
    margin: 0;
    padding: 0;
    }
    #topNav {
    margin: 0 auto;
    padding: 0px 0px 0px 0px;
    text-align: left;
    width: 100%;
    background: #000000;
    height: 55px;
    position: absolute;
    background-image: url(bg.png);
    }
    #leftpart {
    margin: 0 auto;
    padding: 0px 0px 0px 0px;
    text-align: left;
    float: left;
    width: 500px;
    height: 55px;
    position: relative;
    border-radius: 5px;
    -moz-border-radius: 5px;
    }
    #rightpart {
    margin: 0 auto;
    padding: 0px 10px 0px 10px;
    text-align: center;
    float: right;
    width: 500px;
    height: 55px;
    background: #ffffff;
    position: relative;
    border-radius: 5px;
    -moz-border-radius: 5px;
    }
    #emptypartl {
    margin: 0 auto;
    padding: 0px 10px 0px 10px;
    text-align: center;
    float: left;
    width: 20px;
    height: 55px;
    position: relative;
    }
    #emptypart {
    margin: 0 auto;
    padding: 0px 10px 0px 10px;
    text-align: center;
    float: right;
    width: 20px;
    height: 55px;
    position: relative;
    }
    </style>
    </head>

    <body>
    <div id="topNav">
    <div id="emptypartl"></div>
    <div id="leftpart">THIS IS A TEXT</div>
    <div id="rightpart"></div>
    <div id="emptypart"></div>
    </div>
    </body>
    </html>

    what i am trying to do is have the emptypartl indent the leftpart from the left and emptypart index the rightpart from the right something similar to the image below.



    Thanks!

  • #2
    Senior Coder
    Join Date
    Dec 2005
    Location
    Slovenia
    Posts
    1,960
    Thanks
    120
    Thanked 76 Times in 76 Posts
    Code:
    <html>
    <head>
    <title></title>
    <style>
    * {
    margin: 0;
    padding: 0;
    border:1px solid black;
    }
    
    #emptypartl 
    {
    width: 20px;
    height: 55px;
    float:left;
    }
    
    #leftpart {
    width: 500px;
    height: 55px;
    float:left;
    
    }
    #rightpart {
    width: 500px;
    height: 55px;
    float:right;
    }
    
    #emptypartr 
    {
    width: 20px;
    height: 55px;
    float:right;
    }
    </style>
    </head>
    
    <body>
    
      <div id="emptypartl">el</div>
      <div id="leftpart">left</div>
    
      <div id="emptypartr">er</div>
      <div id="rightpart">right</div>
    
    
    </body>
    </html>
    Note the order of elements in HTML, at red part. That is important !
    Found a flower or bug and don't know what it is ?
    agrozoo.net galery
    if you don't spot search button at once, there is search form:
    agrozoo.net galery search


  •  

    Posting Permissions

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