www.webdeveloper.com
Results 1 to 5 of 5

Thread: Div pushes other div to the right

  1. #1
    Join Date
    Aug 2009
    Posts
    4

    Div pushes other div to the right

    I have this html:
    Code:
    <div id="test1" class="VertLine"></div>
    <div id="zone2" class="ActivityZone"><img src="images/conditional.png" align="middle" width="63" height="27"></div>
    And this css
    Code:
    .VertLine{
    	background-image:url(images/dot.bmp);
    	background-repeat:repeat-x;
    	width:100px;
    	height:1px;
    	position:relative;
    	margin-top:15px;
    	float:left;
    	overflow:auto;
    }
    .ActivityZone{
    	position:relative;
    }
    I want the .ActivityZone stay in place when I add .VertLine. Now .ActivityZone is pushed to the right. ActivityZone has to be relative as it depends on other divs. Can someone help me?

  2. #2
    Join Date
    Jul 2009
    Posts
    184
    Need more info than that eh...
    But maybe you could try adding

    position: absolute;

    to your .vertline

  3. #3
    Join Date
    Aug 2009
    Posts
    4

    Does not work

    When I do that the divs go over eath other. What more info do you need?

  4. #4
    Join Date
    Aug 2009
    Posts
    12
    more info like html around those divs and other css rules would be helpful for sure, since they can affect the layout of these elements.

    For me ActivityZone div go over VertLine div with code you posted, but you told that it was pushed to the right (I was looking in FF3.0.12)

    If I understood correctly what you're trying to achieve, maybe removing float: left from VertLine will help.

    Anyway, if you cannot post more code, maybe you can do screenshot of what you have, and mark down on it what you're trying to achieve

  5. #5
    Join Date
    Aug 2009
    Posts
    4

    More information

    I will try to explain what I want to achieve. Finally I want to create a workflow diagramm (so with pictures and lines).

    I start with one picture on the top (start). This picture has to stay in the middle always(!) even when my page gets wider. Under that first picture other pictures are following to create the flowchart. It gets complicated when I add a (for example) yes/no contstruction. Then a picture is added right under the first picture and from that lines go to the left en the right. It has to be something like this:

    http://www.oasis-open.org/khelp/memb...mbershipwf.png

    I hop this explains it a bit

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles