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
    Oct 2010
    Posts
    30
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Aligning Div tags issue.

    So far this is three threads, so sorry to the people whom have helped me. I don't like jumping back with questions at people, but i've hit a new problem with alignment.

    Im just not getting the principle of alignment yet, so my questions might be repetitive.

    I have four images, and I am unsure how to code this so that they appear in such a way.

    Do I wrap all four images in a single div tag, then create a seperate div tag for each image? If that's right, how do I position them so that they fit properly?

    I suppose my main question is, are websites entirely structured with div tags? And can someone help me understand the concept of the Float tag? I think I know how to use it but it's relationship to other elements is still eluding me.

    Im going to attempt to do this with relative/absolute positioning because I am unsure of any other way of doing this. Any advice would be great. Thanks

    Code:
    <html>
    <head>
    <title>test</title>
    <style type="text/css">
    
    div.container {
    width:1500px;	
    margin-left:auto;
    margin-right:auto;
    position:relative;
    background-color:white;
    min-height:600px;
    }
    
    
    div.1 {
    float:left;
    background-image:url('1.jpg');
    width:556px;
    height:22px;
    }
    
    
    div.2 {
    background-image:url('1.jpg');
    width:112px;
    height:18px;
    border:1px solid red;
    overflow:auto;
    min-height:600px;
    }
    
    
    div.3 {
    background-image:url('3.jpg)
    }
    
    
    div.4{
    background-image:url('4.jpg');
    float:right;
    }
    
    </style>
    
    <body>
    
    <div class="container">
    
    <div class="1">
            </div>
    
    <div class="3">
            </div>
    <div class="4">
            </div>
    <div class="2">
            </div>
          
    </div>
    
    
    </body>
    </html>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Take a look at http://bonrouge.com/3c-hf-fixed.php to see how the three columns are aligned using floats.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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