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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Help with div tags and positioning

    I hope one of you kind people can help me with a problem that kept me up most of last night - no matter how I arrange the div tags for the layout below, I simply can't get image2 to align with image3 + text1.
    If I make two containers, one for image1, image3 and text1, then another for image2, then float the first container left, then the second container right, I don't seem to be able to get text1 to stick to the right of image3. The separate div tags for text1 and image3 are both set to float:left, but they just sit there on top of each other, mocking me.
    I know it has something to do with absolute and relative positioning, but in spite of searching the web, reading until my eyes bleed, I can't work out how to make text1 sit to the right of image3 without screwing everything else up.
    I can post the code and css stylesheet, but it's now in such an ugly mess that I'm not sure it would make it any clearer and you'll all laugh at my dimwit coding
    All I'm hoping is that someone can quickly explain 1) How to organise the div tags 2) How to set positioning so they all sit where they should.
    Even a link to a tutorial / book / video which would help would be really useful.
    On a more cheerful note, text2 sits where it should thanks to a clear:both function
    Thank you!!!!
    Attached Thumbnails Attached Thumbnails Help with div tags and positioning-question.jpg  

  • #2
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    see examples for div tag http://www.tizag.com/htmlT/htmldiv.php

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks, but that site just explains what a div tag does, which I'm nice and easy with. My question is about how to float one main container to the left of another, but for the elements within that container to sit side by side.

  • #4
    Regular Coder
    Join Date
    Jan 2012
    Posts
    134
    Thanks
    0
    Thanked 32 Times in 32 Posts
    There are like a 100 ways to do this, so no one solution will be correct. Here's one I came up with:

    Code:
    <html>
    <head>
    	<title>test</title>
    </head>
    <body style="padding: 20px;">
    
    <div style="width: 100%; border: 1px solid black;">
    	<div style="background: red; float: left; height: 100px; width: 30%;">image 1</div>
    	<div style="background: yellow; float: left; height: 50px; width: 15%; clear: both;">image 3</div>
    	<div style="background: blue; float: left; height: 50px; width: 25%;">text 1</div>
    	<div style="background: orange; float: right; height: 400px; width: 25%; margin-top: -100px;">image 2</div>
    	<div style="background: green; float: left; height: 25px; width: 100%; clear: both;">text 2</div>
    	<div style="clear: both;"></div>
    </div>
    
    </body>
    </html>
    I used a clear to get image 3 and text 1 below image 1. Unfortunately, that puts image 2 down too low. To fix that, I added a negative top margin equal to the height of image 1.

    Edited to close an open <div>
    Last edited by KuriosJon; 01-27-2012 at 01:48 PM.

  • Users who have thanked KuriosJon for this post:

    timbob (01-27-2012)

  • #5
    Regular Coder
    Join Date
    Dec 2011
    Location
    NW England
    Posts
    194
    Thanks
    8
    Thanked 15 Times in 15 Posts
    You should have containers, for example, image1, text1 and image3 will be in 1 container, image 2 will be in another and footer in the 3rd. To make container 1 and 2 to float next to each other, you need to set their width, but make sure that when they are added together, they do not exceed the width you have set your website to.

    So, you should make the 2nd container (image 2) float right, but in your html file, it should be BEFORE the 1st container and if you have your widths properly, container 1 shouldn't need to float: left;
    example, this will make container2 float beside container1:

    Code:
    #container1{
        width: 70%;
        height: 200px;
        padding: 0;
        margin: 0;
    }
    
    #container2{
        width:30%;
        height: 200px;
        float: right;
        padding: 0;
        margin: 0;
    }
    But, ONLY if you have container2 first in the html code. And I think I am also right in saying that this would also work for IE 6/7 too

    Now, you should be able to use some of the same code to align the images in container1 too
    Last edited by melloorr; 01-27-2012 at 07:30 PM.

  • Users who have thanked melloorr for this post:

    timbob (01-27-2012)

  • #6
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Thumbs up

    That is so cool of you both - each of your suggestions worked like a dream - a happy codey div-tag dream.
    Thanks for taking the time to explain - appreciated muchly.


  •  

    Posting Permissions

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