Solved

div tramping

Posted on 2008-10-08
3
134 Views
Last Modified: 2012-05-05
how i can specify div location in a way that one wont be over the other?

i mean for example i have already one image that have a specific location on the page
how i can insure that the other image that i will add wont run over?



this it the situation that i am trying to avoid:
<div style="position: absolute; top: 70px; left: 255px; width: 50px; height:20px;background-color: yellow;">

<img src=google.gif border=0>

</div>

<div style="position: absolute; top: 80px; left: 255px; width: 50px; height:20px;background-color: yellow;">

<img src=google.gif border=0>

</div>

Open in new window

0
Comment
Question by:Sasha-N
3 Comments
 
LVL 16

Accepted Solution

by:
rbudj earned 250 total points
Comment Utility
you would prevent this by using your absolute positioning.  absolute positioning will place the div exactly where you want it so if you dont want it overlapping, it wont.  as a beginner though, I would stay away from absolute positioning... you will end up with different layouts across different browsers.
0
 
LVL 44

Assisted Solution

by:scrathcyboy
scrathcyboy earned 250 total points
Comment Utility
I agree that using absolute positioning will cause this problem, so simply don't use it.  You can either use relative positioning, or if you don't need to specifically position the image, put in a <BR> or two between them, without any positioning specified, and that will guarantee your images will not conflict.
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now