April 20, 201016 yr On a page, I might have something centered at the top, such as a title graphic. I'd like to float a div box to one side, but I find that it pushes my centered graphic off-center so that it's centered between the edge of the floating box and the other side of the page. I want this: +--------------------------------------+ | | | +----+ +-------+ | | | | | title | | | | | +-------+ | | | | | | +----+ | | | | | +--------------------------------------+ I'm getting this: +--------------------------------------+ | | | +----+ +-------+ | | | | | title | | | | | +-------+ | | | | | | +----+ | | | | | +--------------------------------------+ css code for floating box: div.floatingbox { float: left; width: 100px; } css code for div surrounding graphic title: div.graphictitle { text-align: center; }
April 21, 201016 yr This works. The left floatingbox is position: absolute so that it doesn't affect the positioning of the graphictitle. The #wrap div has position: relative so that the position: absolute div takes its position from the top left corner of the #wrap div:- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta name="keywords" content="Wickham"> <meta name="description" content="Test items"> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>Test</title> <style type="text/css"> #wrap { position: relative; width: 600px; margin: auto; background: pink; height: 300px; } .floatingbox { position: absolute; left: 30px; top: 50px; background: lime; height: 150px; } .graphictitle { position: relative; width: 150px; height: 50px; margin: auto; top: 50px;background: skyblue; } </style> </head> <body> <div id="wrap"> <div class="floatingbox">Left box</div> <div class="graphictitle">Title</div> </div> </body> </html>
Create an account or sign in to comment