August 7, 200818 yr ok so i am having some trouble getting my divs in the right place, i have drawn up a basic example to demonstrate here goes: basically i want divs inside divs, and this is proving troublesome here is some basic code i just put down to demonstrate: <html> <style type="text/css"> <!-- #wrapper { width: 500px; margin: auto; text-align: center; } #left { float: left; } #right { float: right; } --> </style> </head> <div id="wrapper">text in wrapper <div id="left">left</div> <div id="right">right</div> </div> </html> (i have made the styles inside rather than extrnally for ease) and im expecting to have a box 500px wid with 2 boxes inside it but this is what i get: (you can only just see it lol) i have put the "wrapper text" in to illustrate it position tia
August 7, 200818 yr Hi, You need to givea height to you #wrapper div e.g. height: 200px; or use overflow: auto;
August 7, 200818 yr your boxes are inside the div....if they weren't the left div would be the very left of the screen and the right the very right now if you want things in the middle between the two divs you will need to make a third. Also you will have to set a width for the divs, example: <html> <style type="text/css"> <!-- #wrapper { width: 500px; margin: auto; text-align: center; } #left { float: left; width:200px } #right { float: right; width:200px } #middle { float: left; width:100px} --> </style> </head> <div id="wrapper"> <div id="left">left</div> <div id="middle"> <p>test</p> </div> <div id="right">right</div> </div> </html> Now if you have a background in your wrapper to get that to span all the way down you need to add this to the after the close of the right div: <div style="clear:both"></div> and that will force the wrapper down. However this only works when you are using floats. However a little note, don't trust what you see in design view of dreamweaver always do tests in browsers as design view isn't always a good indication of how the site will look
August 7, 200818 yr NEVER trust what you see unless it's being rendered by the browser. overflow: auto; will make them (look) like they're in the main container. Like dizi says, give the left and right a width.
Create an account or sign in to comment