1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Cant get divs in a row!!!!!!

Discussion in 'Web Development & Web Hosting' started by tobo, Jan 7, 2009.

  1. tobo

    tobo Bit Poster

    28
    1
    8
    Hi All

    I'm trying to layout a page with divs. but my problem is trying to get the divs to sit next to each other? every time I add a div it sits under the previous one?? for instance I have <div id=one> with an image and I want <div id=two> to appear next to it with text about the image. I have tried playing with the div size to see if it was an overflow issue but no luck. the only way I have solved this is by setting the image in div one as a no repeat background and giving div two a margin the same size as the image. but I'm sure there must be a better way to do this and its not ideal as I would like to assign a link to the image which I cant do when it is a background.

    here is part of the code for the page im struggling with.

    <!--CSS
    #container {
    background-image: url(Images/img.png);
    background-repeat:no-repeat;
    width: 725px;
    height: 1000px;
    text-align:left;
    }

    #photo {
    margin-left:10px;
    margin-top:10px;
    height:400px;
    background-image:url(Images/Large.jpg);
    background-repeat:no-repeat;
    text-align:left;
    }

    #text {
    margin-left:200px;
    margin-top:10px;
    width:230px;
    font-size:12px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    }


    */HTML*/
    <div id="container">
    <div id="photo">
    <div id="text">
    Text about Image
    </div>
    </div>
    </div>


    I am a bit of a noobie to this so let me know if I am missing somthing??? its very likley I am!!

    Many Thanks.
     
  2. westernkings

    westernkings Gigabyte Poster

    1,432
    60
    107
    Code:
    Float: Left/Right;
    Add that to the DIV CSS you want to float next to the other. That should do it.

    It may actually be a good idea to create a class to wrap the image and text in and have the columns next each other.

    Code:
    #imagewrap {Float: Right;}

    Code:
    <div class="imagewrap">
    
    <div class="image"> </div>
    <div class="text"> </div>
    
    </div>
    
    <div class="imagewrap">
    
    <div class="image"> </div>
    <div class="text"> </div>
    
    </div>
    kind of like having a box with the image and text inside it, but the same box next to it with another image and text in.
     
    Certifications: MCITP:VA, MCITP:EA, MCDST, MCTS, MCITP:EST7, MCITP:SA, PRINCE2, ITILv3
  3. tobo

    tobo Bit Poster

    28
    1
    8
    Excellent! thanks! I'll try that. what a speedy service!! :D
     
  4. westernkings

    westernkings Gigabyte Poster

    1,432
    60
    107
    Also, try not to use background images as you will not be able to copy them or use the divs again (as you will have the same image in every div). just create the div and tailor your images so they are a;ll the same size, you can also use CSS to define a caption underneaths an image as well if you do a quick google.

    You also do not need to specify a height of the container div, as you will have to keep changing it when you want more content, just let it expand along the Y axis automatically.
     
    Certifications: MCITP:VA, MCITP:EA, MCDST, MCTS, MCITP:EST7, MCITP:SA, PRINCE2, ITILv3
  5. tobo

    tobo Bit Poster

    28
    1
    8
    Thanks I only used the Background image because I wanted to place some text and links above the image. dont know how to place divs on top of each other like layers do you??

    Thanks Again.
     
  6. westernkings

    westernkings Gigabyte Poster

    1,432
    60
    107
    I couldn't tell you off the top of my head, the only time I ever do is with multiple background images,

    So 'ill have wrapper1, wrappe2 and so on all nested within each other but exactly the same size, each with a different background image to create the desire effect I need. Along with HTML and BODY background images.

    They are the only time I use it.

    As far as I am aware, Z index is for that purpose, but you have to specify a few CSS properties otherwise it simply doesn't work.
     
    Certifications: MCITP:VA, MCITP:EA, MCDST, MCTS, MCITP:EST7, MCITP:SA, PRINCE2, ITILv3
  7. tobo

    tobo Bit Poster

    28
    1
    8
    Yeah I had a go with Z index but couldnt get it to work.

    Thanks for all your help really appreciate it.
     
  8. Evilwheato

    Evilwheato Kilobyte Poster

    414
    4
    20
    I'll make you feel better- I had exactly the same problem- couldn't get two divs to sit next to each other :)
    Either way, glad it's sorted!
     
  9. westernkings

    westernkings Gigabyte Poster

    1,432
    60
    107
    Z Index has to have certain properties specified otherwise it simply won't work. One of these is the position property, it needs to be specificalyl set to any of the options.

    Kind of like

    If i wanted normal test I would just type it, but in order for the Z index to work, I would have to set it to Text-Transform: Normal.
     
    Certifications: MCITP:VA, MCITP:EA, MCDST, MCTS, MCITP:EST7, MCITP:SA, PRINCE2, ITILv3
  10. tobo

    tobo Bit Poster

    28
    1
    8
    Sorry you've lost me there??? got any code examples to look at?

    Cheers.
     
  11. westernkings

    westernkings Gigabyte Poster

    1,432
    60
    107
    I have a DIV with some text in, I don't want any formatting on that text, just bog standard text.

    the CSS would look like

    Code:
    #example1{
    }
    If I wanted normal text, I wouldn't specify anything.

    However, I could change it too

    Code:
    
    #example1{ text-transform: normal;}
    The end result would still be, normal text with no formatting, just bog standard text like in notepad. So in a real world, you would NOT put that CSS property in (after all, it isn't needed as that is what CSS defaults to if it is no specified)

    It is the same with Z Index, you NEED to specify a few CSS properties regardless.

    Position: Relative>Absolute>Inherit (or whatever the properties are)

    I think if you do not specify in the CSS the above property, it defaults to relative, but in order to use Z-Index you would have to specifically set it to "Position: Relative;". Usually you wouldn't bother entering that into the CSS as the default is relative, but in order to use Z-Index you have to specify it.

    That was a pretty long winded example.

    but in short, you need to specify a few CSS properties that you would usually leave out because they are defaults.

    Another way is using Negative MArgins to overlap DIVs

    IE

    Margin: 0 0 -50px 0;
     
    Certifications: MCITP:VA, MCITP:EA, MCDST, MCTS, MCITP:EST7, MCITP:SA, PRINCE2, ITILv3
  12. soundian

    soundian Gigabyte Poster

    1,460
    71
    107
    <div id="container">
    <div id="photo">
    </div>
    <div id="text">
    Text about Image
    </div>
    </div>

    Did you try that?
     
    Certifications: A+, N+,MCDST,MCTS(680), MCP(270, 271, 272), ITILv3F, CCENT
    WIP: Knuckling down at my new job
  13. westernkings

    westernkings Gigabyte Poster

    1,432
    60
    107
    it isn't a nesting issue, it is a float issue mate. :)
     
    Certifications: MCITP:VA, MCITP:EA, MCDST, MCTS, MCITP:EST7, MCITP:SA, PRINCE2, ITILv3
  14. soundian

    soundian Gigabyte Poster

    1,460
    71
    107
    Still makes my inner programmer cringe when I see incorrect nesting though, especially when you have inheritance to contend with.
    Mind you, my inner programmer cringes at the thought of having to deal with the erm... eccentricities of CSS full stop.
     
    Certifications: A+, N+,MCDST,MCTS(680), MCP(270, 271, 272), ITILv3F, CCENT
    WIP: Knuckling down at my new job
  15. tobo

    tobo Bit Poster

    28
    1
    8
    That is how I ended up doing it Soundian but I did want to have the text div next the photo within the photo div guess thats not the done thing?

    Westernkings the suggestion for the minus margins is golden!! sorted my issues easily!

    Thaks to every ones suggestions and help.
     

Share This Page

Loading...