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.
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?
<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
I changed the widths to a few different settings and it just moved back and forth under the middle div.
Im using Firefox. I visited the site I had it uploaded to with IE and it was the same as it is in FF.
When I've had that problem it was always due to the three div widths + margins/padding being greater than the main div width.
There is nothing making my site a fixed width and my screen resolution is 1280x800 while the divs only make up 700ish pixels.
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:
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?
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):
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.
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.
<div style="margin:0 auto;"> <div id="leftcol"></div> <div id="maincol"></div> <div id="rightcol"></div> </div>