Social Buttons
  1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Three divs side by side- How?

Discussion in 'HTML & Website Design' started by immortality, Feb 19, 2007.

0
Page 1 of 2
  1. #1
    What would the code be to put three divs side by side? I want one 164px wide one 400px wide and another 164px wide all side by side but when I try they just go under each other. Any help is appreciated.
    SEMrush
     
    immortality, Feb 19, 2007 IP
    SEMrush
  2. unitedrokz

    unitedrokz Peon

    Messages:
    86
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #2
    add float:left to the divs
     
    unitedrokz, Feb 19, 2007 IP
  3. immortality

    immortality Peon

    Messages:
    1,512
    Likes Received:
    50
    Best Answers:
    0
    Trophy Points:
    0
    #3
    When I try to put in three the last one just goes under the second one. I tried moving it around before and after each of the others but I could only get it to go between the two. How do I get it to go to the right of the middle one?

    Also, how do you center all three on the page?
     
    immortality, Feb 20, 2007 IP
  4. designcode

    designcode Well-Known Member

    Messages:
    738
    Likes Received:
    37
    Best Answers:
    0
    Trophy Points:
    118
    #4 
    
<div id="leftcol" style="float:left;width:164px;">
Left Column
</div>
<div id="maincol" style="float:left;width:400px;">
Middle Column
</div>
<div id="rightcol" style="float:right;width:164px;">
Left Column
</div>
    Code (markup):
    Add to my rep if it work out for you :D
     
    designcode, Feb 20, 2007 IP
    immortality and JEET like this.
  5. immortality

    immortality Peon

    Messages:
    1,512
    Likes Received:
    50
    Best Answers:
    0
    Trophy Points:
    0
    #5
    That still doesnt work, it just puts the last div under the second one.
     
    immortality, Feb 20, 2007 IP
  6. rgchris

    rgchris Peon

    Messages:
    187
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Might be a problem with your width.
     
    rgchris, Feb 20, 2007 IP
  7. immortality

    immortality Peon

    Messages:
    1,512
    Likes Received:
    50
    Best Answers:
    0
    Trophy Points:
    0
    #7
    I changed the widths to a few different settings and it just moved back and forth under the middle div.
     
    immortality, Feb 20, 2007 IP
  8. JEET

    JEET Notable Member

    Messages:
    3,606
    Likes Received:
    453
    Best Answers:
    19
    Trophy Points:
    235
    #8
    That code above works for me, both on IE and mozilla...
    Which browser are you using?
    Bye :)
     
    JEET, Feb 20, 2007 IP
  9. immortality

    immortality Peon

    Messages:
    1,512
    Likes Received:
    50
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Im using Firefox.

    I visited the site I had it uploaded to with IE and it was the same as it is in FF.
     
    immortality, Feb 20, 2007 IP
  10. MTbiker

    MTbiker Well-Known Member

    Messages:
    2,536
    Likes Received:
    123
    Best Answers:
    0
    Trophy Points:
    170
    #10
    When I've had that problem it was always due to the three div widths + margins/padding being greater than the main div width.
     
    MTbiker, Feb 20, 2007 IP
  11. immortality

    immortality Peon

    Messages:
    1,512
    Likes Received:
    50
    Best Answers:
    0
    Trophy Points:
    0
    #11
    I dont have any margins/paddings specified.
     
    immortality, Feb 20, 2007 IP
  12. Brandon Sheley

    Brandon Sheley Illustrious Member

    Messages:
    9,720
    Likes Received:
    611
    Best Answers:
    2
    Trophy Points:
    420
    #12
    sounds like your site is to narrow, or your screen res is to low ;)
     
    Brandon Sheley, Feb 20, 2007 IP
  13. immortality

    immortality Peon

    Messages:
    1,512
    Likes Received:
    50
    Best Answers:
    0
    Trophy Points:
    0
    #13
    There is nothing making my site a fixed width and my screen resolution is 1280x800 while the divs only make up 700ish pixels.
     
    immortality, Feb 20, 2007 IP
  14. MTbiker

    MTbiker Well-Known Member

    Messages:
    2,536
    Likes Received:
    123
    Best Answers:
    0
    Trophy Points:
    170
    #14
    I'm on that same res right now and everything looks good in FF. Here's the exact page code, with some borders around each div. I have to decrease the window width a lot to get the right div to go under the other two.

    <!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>

<body>

<div id="leftcol" style="float:left;width:164px;border:1px dashed green;">
Left Column
</div>

<div id="maincol" style="float:left;width:400px;border:1px dashed red;">
Middle Column
</div>

<div id="rightcol" style="float:right;width:164px;border:1px dashed blue;">
Left Column
</div>

</body>

</html>
    HTML:
     
    MTbiker, Feb 20, 2007 IP
    immortality likes this.
  15. immortality

    immortality Peon

    Messages:
    1,512
    Likes Received:
    50
    Best Answers:
    0
    Trophy Points:
    0
    #15
    When I put that in a separate document and open it it works, although the last div is way on the other side of the page. That code is all the same except I have my proxy code in the middle column but the last div likes to go beneath it. Oh well ill just keep it at two divs.

    How do you center divs on the page?
     
    immortality, Feb 20, 2007 IP
  16. Maujor

    Maujor Peon

    Messages:
    30
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #16
    Tell us the address were you put the page you are having the problem in order we can see the context were you mark up yours divs.
    To center a DIV in its parent element do the following:
    <div style="width:some width; margin: 0 auto";>
...
</div>
    Code (markup):
     
    Maujor, Feb 20, 2007 IP
  17. immortality

    immortality Peon

    Messages:
    1,512
    Likes Received:
    50
    Best Answers:
    0
    Trophy Points:
    0
    #17
    When I put the code in it did nothing. Is that code to center the divs on the whole page or just the content the divs hold? Because I want the divs centered on the whole page.
     
    immortality, Feb 20, 2007 IP
  18. immortality

    immortality Peon

    Messages:
    1,512
    Likes Received:
    50
    Best Answers:
    0
    Trophy Points:
    0
    #18
    Okay I found out what the problem was. I had an old div around my middle content that was causing the new middle div to not be recognized I guess. I took it out and the right div moved to the right spot.

    Does anyone know how to center all three of these divs on the whole page? The <center> codes dont work.
     
    immortality, Feb 20, 2007 IP
  19. tthomas

    tthomas Peon

    Messages:
    10
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #19
    <div style="margin:0 auto;">
    <div id="leftcol"></div>
    <div id="maincol"></div>
    <div id="rightcol"></div>
    </div>
     
    tthomas, Feb 20, 2007 IP
  20. immortality

    immortality Peon

    Messages:
    1,512
    Likes Received:
    50
    Best Answers:
    0
    Trophy Points:
    0
    #20
    That doesnt work, they just stay in the same spot as they were before.
     
    immortality, Feb 20, 2007 IP
Page 1 of 2