#1
  1. Trapped on the forums...help
    Devshed Demi-God (4500 - 4999 posts)

    Join Date
    Aug 2003
    Location
    /Users/edman007
    Posts
    4,617
    Rep Power
    906

    Question help positioning stuff with CSS


    i'm trying to layout a page i have with CSS so that i have a big image on the left and a some small images and some other stuff i want on the right of the image, the problem i have is the small images and other stuff wont go to the right of the image, it just stays under the image to the left

    how do i get it to go to the direct left of the big image? What do i have to add? i have tried changing left, right, text-align, and padding for some of the css part, but it isn't helping

    here is what i have

    ---the--html-----
    Code:
    <div id="ms_all" >
    <input alt="Map" id="ms_main_image" type="image" name="mapa" src="map_img.phtml?PHPSESSID=b330837baaa9ecdda6296b145be4dc7e" /><!-- This is the large Image -->
    <div id="ms_side_bar" ><!-- This is the stuff i want on the right of the image -->
    <div class="ms_button_name" >
    Pan
    </div>
    <input class="ms_button" type="radio" name="zoom" value="0" checked="checked" />
    <div class="ms_button_name" >
    Zoom In
    </div>
    <input class="ms_button" type="radio" name="zoom" value="1"  />
    <div class="ms_button_name" >
    Zoom Out
    </div>
    <input class="ms_button" type="radio" name="zoom" value="-1"  />
    <div class="ms_button_name" >
    Zoom Size
    </div>
    <input class="ms_button" type="text" name="zsize" value="3" size="2" />
    <div class="ms_button_name" >
    Full Extent
    </div>
    <input class="ms_button" type="submit" name="full" value="Go" size="2" />
    <input type="hidden" name="submitted" value="1" />
    <input type="hidden" name="PHPSESSID" value="b330837baaa9ecdda6296b145be4dc7e" />
    <br />
    <img id="ms_ref_image" alt="Refence Image" height="120" width="120" src="map_ref_img.phtml?PHPSESSID=b330837baaa9ecdda6296b145be4dc7e" />
    <br />
    <img id="ms_scale_bar" alt="Scale Bar" height="34" width="200" src="map_scale_img.phtml?PHPSESSID=b330837baaa9ecdda6296b145be4dc7e" />
    </div>
    </div>
    </form>
    </div>
    ---the-css--
    Code:
    #ms_all		{
    			padding:5px;
    			position: relative;
    			}
    #ms_main_image {
    			padding:2px;
    			position: relative;
    			width:600px;
    			height:600px;
    			}
    #ms_scale_bar {
    			position: relative;
    			}
    #ms_ref_image {
    			position: relative;
    			}
    .ms_button	{
    			position: relative;
    			right:2px;
    			}
    .ms_button_name {
    			position: relative;
    			}
    #ms_side_bar {
    			position: relative;
    			padding:2px;
    			vertical-align:top;
    			width:200px;
    			}
  2. #2
  3. HTML/CSS/Photoshop maven
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    CA
    Posts
    184
    Rep Power
    13
    If you put stuff within a container <div>, you can give it an absolute position. You could use absolute (instead of relative) positioning to slam the image flush into the top-left corner {position: absolute; top: 0px; left: 0px} and move the container <div> right of it {position: absolute; top: 0px; left: 610px}.
  4. #3
  5. Trapped on the forums...help
    Devshed Demi-God (4500 - 4999 posts)

    Join Date
    Aug 2003
    Location
    /Users/edman007
    Posts
    4,617
    Rep Power
    906
    thanks that worked

IMN logo majestic logo threadwatch logo seochat tools logo