Hai folks below is my layout. it has 3 div's. each placed inside another. this is the code. <div id="base_box" align="center" style="border:10px solid blue;width:1000px;height:635px"> <div align="left" id="map" style="width:100%;height:100%px;border:3px solid red;"> <div id="info" style="width:250px;height:200px;position:relative;top:10px;left:10px;border:1px solid yellow;">test</div> </div> </div> Code (markup): now my question is, i want to insert an image in to the map div (red box) which is here in red. now problem is, if i insert an image, the yellow info guy jumps to bottom i dont want to use the picture as the map div (red box) backgroud since i want to assign image mappings.
Use absolute positioning on the yellow box. This tutorial will give you a better idea of how to do it: http://www.barelyfitz.com/screencast/html-training/css/positioning/
tx qazu, i find that useful. one more question. if i want to make that blue base box center of the page for what ever resolution, how do i ? coz <div id=basebox align="center"... will center only its contains and not itself. so how do i?
http://www.barelyfitz.com/screencast/html-training/css/positioning/ #4 position:relative + position:absolute If we set relative positioning on div-1, any elements within div-1 will be positioned relative to div-1. Then if we set absolute positioning on div-1a, we can move it to the top right of div-1: Code (markup): that solved my issue tx
You need to add align center to the <body> tag and add margin 0 auto to the basebox div. This article explains it better: http://simplebits.com/notebook/2004/09/08/centering.html
With this code, you try again. <div id="info" style="width:250px;height:200px;top:10px;left:10px;border:1px solid yellow;position:absolute;z-index:1;">test</div>
Do not use align="left" as that is a deprecated HTML attribute and may not be supported by some browsers. To left-align text or images (inline elements) within a div, put "text-align: left;" in the style.
Oh ya, don't forget to check with another browser such as IE. although many people who will open the website using firefox or other web bowser, but make sure you css perfect for all browsers. because as a visitor your website would feel uncomfortable if your design not perfect. keep up your good work, dear!
tx folks. nwo i am using this and and document not appear in center. /* CSS Document */ body{ margin: 0px; padding: 0px; text-align:center; } #outerWrapper{ /* main box*/ position: absolute; left: 50%; width: 1000px; margin-left: -500px; } * note my main box has the width of 1000px.