CSS - Positioning A Div Block Relative To Another

Okay, I have a few menu items and when I mouse over one of them, I want a sub div to show up. However, if I try and position the div relative to another, it gets positioned properly, but pushes the content below it downward, which I do not want. I want the content to float above like any sub menu would when the main menu item is rolled over.

However, when I absolutely position the div, it's position changes based on the current width of the browser. I could technically get the width of the browser when the page loads and dynamically position it but I'm obviously making this harder than it has to be. Besides, the function would have to rerun every time the person changes the width of the browser. Possible, but again I know I'm making this harder than need be.

I'd rather not spam devshed with a link to my site, but if you want to see the problem, I'll post it. Thanks in advance.

First this seems like a common problem but I couldn't find an answer. I did look, maybe I didn't use the right search terms but I did look.

So I have always wanted to do this but could never figure out a way to do it. I'd like to have relative positioned divs overlap each other and not push the rest of the layout around. Pretty much the exact same way absolute works, but just position relatively.

Code:

<div style="width: 500px; height: 500px;">
  <div style="position:relative; top: 0px; left: 0px; width: 30px; height: 10px;">at 0</div>
  <div style="position:relative; top: 10px; left: 0px; width: 30px; height: 10px;">at 10</div>
</div>

The divider seems to add a break rendering absolute positioning useless. How can I fix this so that I can use absolute positioning in more than one div inside the main fixed size container?

Thanks

ok, here's what i'm working with:

multiple rows of data (divs stacked on top of eachother, we'll call main_container), with 2 columns each. the right hand column has a list of emails (call it sent_details), but it only shows as many as can fit in main_container. the design calls for me to put a "more" link on the bottom right hand corner of sent_details. so, i have to give sent_details a position of relative and the more link an absolute position fixed to the bottom right. in firefox, when i click "more", sent_details will expand, reveling more emails (sent_details was given overflow: hidden). in IE, however, sent_details will expand, however all sent_details below it will remain in their fixed positions, making the expanded div above it overlap.

does anyone have a suggestion to fix this? do i need to post code?

thanks

Hi,

I'm not sure if this is possible or not, but I can't get it to work accurately, and I wondered if anyone could give me some help.

I would like to position a layer at an absolute position (T:128 L:253) which is no problem, but then I would like that layer to have a relative width from that fixed point, expanding/contracting to whatever size the browser is.

I've tried several different things, but can't seem to get this particular setup. If I set the width of the layer to 100%, the layer positions itself correctly on the page, but pushes beyond the right hand side of the browser causing a horizontal scroll.

Has anyone done this before? Am I missing something critical? or is this impossible to do with layers/css

Thank you!

Hi all

I have uploaded the page I am having problems with to http://www.nickcb.com/JesseHora/ so you can check it out and see my problem.

The problem is that I want to have about a 10px margin between each of the horizontal bars. (The red will be different images eventually)

Previously the site was left justified and the black portions of the bars were not there. I used a relative positioning to move the bars up slightly to cover up the area where the bubble on the end would be. The bubble on the end is floated over banner image so that the image can be switched with PHP at a later date. The person I am making it for decided that they wanted the site centered with black bars extending to the left side of the screen. I did this with the class .blackleft in the code below.

That seems to work except it pushed all the horizontal bars further apart. This makes sense though because there is an addition horizontal item that pushes them down. Now the problem is that if I increase the amount that I relatively position each bar up it only moves the second bar up. To maintain an even spacing I have to keep moving each bar up by more and more. I could do this because I am going to generate the page with PHP but I would prefer to fix it in CSS.

Page HTML (view source on above page for all code)
Code:

<div class="container">	

		<div class="blackleftnew"></div>
		<div class="barnew">
			<a href="page.php">
				<img src="images/banner.gif" width="700" height="97" class="bannernew"/>
				<img src="images/illustration_new.gif"  class="typebubblenew"/>
			</a>
		</div>

		
		<div class="blackleft" style="top: -140px"></div>
		<div class="bar" style="top: -249px">
			<a href="page.php">
				<img src="images/banner.gif" width="700" height="97" class="banner"/>
				<img src="images/design.gif" width="100" height="100" class="typebubble"/>
			</a>
		</div>


		<div class="blackleft"  style="top: -240px"></div>

		<div class="bar" style="top: -349px">
			<a href="page.php">
				<img src="images/banner.gif" width="700" height="97" class="banner"/>
				<img src="images/dircord.gif" width="100" height="100" class="typebubble"/>
			</a>
		</div>
			
		<div class="blackleft"></div>
		<div class="bar">
			<a href="page.php">

				<img src="images/banner.gif" width="700" height="97" class="banner"/>
				<img src="images/artdir.gif" width="100" height="100" class="typebubble"/>
			</a>
		</div>
		
		<div class="blackleft"></div>
		<div class="bar">
			<a href="page.php">
				<img src="images/banner.gif" width="700" height="97" class="banner"/>
				<img src="images/random.gif" width="100" height="100" class="typebubble"/>

			</a>
		</div>
		
		<div class="blackleft"></div>
		<div class="bar">
			<a href="page.php">
				<img src="images/banner.gif" width="700" height="97" class="banner"/>
				<img src="images/photo.gif" width="100" height="100" class="typebubble"/>
			</a>
		</div>

Style Sheet (excerpt)

Code:

.container {
    z-index: 0; 
    width: 744px;
    padding: 0px;  
    margin: 0 auto 0 auto;
}

.blackleft {
	z-index: 1;	
	position: relative;
	top: -40px; 
	left: -700px;
	width: 744px;
	height: 97px;
	background-color: black;
}

.bar {
	z-index: 5;
	position: relative; 
	top: -149px;
	margin: 10px 0px 10px 0px;
	overflow: hidden;
	height: 105px;
}

.typebubble {
	z-index: 10;
	display: block;
	margin: 0px;
	padding: 0px;
	position: relative; 
	top: -100px;
	left: +645px;
}

.blackleftnew {
	z-index: 1;	
	position: relative;
	top: 10px;
	left: -700px;
	width: 744px;
	height: 97px;
	background-color: black;
}

.barnew {
	z-index: 5;
	position: relative; 
	top: -137px; 
	margin: 10px 0px 10px 0px;
	overflow: hidden;
	height: 145px;
}

.typebubblenew {
	z-index: 30;
	position: relative; 
	top: -130px; 
	left: +625px;
}

.bannernew {
	display: block;
	margin-top: 40px;
}

.banner {
	margin-top: 2px;
}

.footer {
	position: relative; 
	top: -40px; 
	text-align: center;
}

Thanks for any help.

Hello

Can anybody explain me the difference between the absolute and the relative positioning methods?

If i use nested <span> elements in a table row which one is suitable?

And also what the "Z-index" property tells us?

I am so confused with these terms nowadays.And waiting your help.

Thank You Very Much...

How can I position several elements, relative to the position of another element?

I tried this:

<div>
Test
<span style="position:relative;top:40;left:40">Foo</span>
<span style="position:relative;top:40;left:40">Bar</span>
</div>


I want both Foo and Bar to be 40 pixels to the right and below of Test.

But they appear next to eachother instead of stacking on top of eachother.

How can I position them "relative" to the div tag?

Is it bad css form to use negative values when you are working with relative positioning? I have a graphic intensive site that was drawn in photoshop and I am trying to code it. The graphics require exact placement but also need to move with the design if the browser window is re-sized, relative positioning will do this but I find myself having to use negative values on some of the graphics to have them place properly.

I know if I move a graphic above another in the html code the relative values will change but I am having problems figuring out what should go first, second, third... I know relative positioning deals with the regular flow of the page but when you are dealing with all graphics how do you know what to put first etc...

I hope I made sense and I wish I had an address for you to look at the page but I don't at the moment... Can anyone help?

Thank you,
Jen

I'm aiming to have a flash navigation console nested inside a div which extends outside the left boundary of it's parent div.

It's very hard to explain exactly so I've drawn some diagrams.

Here's what I'm trying to acheive:
URL

Here's the actual result i've come up with so far:
http://www.advancedschoolyearbooks.com/divtest.html
The results differ depending on the browser. In IE the horizontal positioning of the "NavInner" DIV is spot on but vertically it is hugging the top of the "Wrapper" table when it should be hugging the top of the "Navigation" DIV
In firefox I can not see the image contained in the "NavInner" DIV at all.


Here's a snip of my CSS:
Code:

body, html, #wrapper {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #000000;
	height: 100%;
}

#wrapper {
	margin: 0 auto;
	text-align: left;
	vertical-align: middle;
	width: 100%;
}

#OuterFull {
	width: 100%;
	text-align: center;
	display: block;
}

#OuterBoxed {
	width: 969px;
	height: 650px;
	display: block;
	margin: 0 auto;
}

#LeftCol {
	width: 485px;
	height:650px;
	float: left;
}

#RightCol {
	width: 484px;
	height: 650px;
	float: left;
	background: url(bg.jpg) bottom left no-repeat;
}

#Navigation {
	width: 484px;
	height: 180px;
	float: right;
	overflow: hidden;
	text-align: right;
	margin: 0 auto;
}

#NavInner {
	width: 969px;
	height: 180px;
	float: right;
	text-align: right;
	position: relative;
	left: -485px;
}

#Content {
	width: 484px;
	height: 470px;
	float: right;
	overflow-y: auto;
	overflow-x: hidden;
}

Here's my HTML:
Code:

<body>
    <table width="100%" border="0" cellspacing="0" cellpadding="0" id="wrapper">
        <tr>
            <td align="center" valign="middle">
                <div id="OuterFull" align="center">
                    <div id="OuterBoxed">
                        <div id="LeftCol">LeftCol</div>
                        <div id="RightCol">
                            <div id="Navigation">
                                <div id="NavInner"><img src="nav.jpg" /></div>
                            </div>
                            <div id="Content">Content</div>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</body>

EDIT: OK, I've worked out all of the issues except the fourth one, which doesn't really have to do with CSS specifically. Why do line breaks insert gaps? The problem is especially prevalent in IE.

First issue: I'm trying to position one image over another image and its inserting this big gap! As seen on http://www.zacwittedesign.com/olive/pool.html we have the "about the pool" image position on top of the big image to the left side, but you can see there is a big gap above the big image. If I simply comment out the 'about the pool' image, the gap goes away and all is fine. I thought relatively placed elements were not supposed to affect the flow of elements beneath them? Can you see anything wrong in my code?

Second Issue: There are two issues with the layer on the top of the page where the dots should be coming out of 'new projects' (id=projects_layer). It should be positioned over top.jpg as seen in hotstuff.html. In that page I manually moved it down by adding an additional 60px to the relative offset, but the space where it would have occupied remains and pushes the whole page down. Everything should look like it does in portfolio.html which doesn't currently use layers. You can see a version without my manually shifting it down and demonstrating the third issue at pool-valign.html.

Third Issue: The vertical-align of all the images inside the projects layer. For the layout to be correct, the images need to be top-aligned or they won't line up with the dots and they'll slightly cover the button images beneath them. I have a style property set vertical-align:top; but it doesn't seem to do anything. Do I misunderstand the vertical-align property? There's also a small gap beneath the images when viewed with IE. I've changed the background color of the layer so you can more easily see the problem.

Fourth issue: You've probably noticed in my code that I insert and HTML comment for every line break. That is because if I don't, IE reads the line beaks as non-whitespace and inserts both vertical or horizontal gaps between the images. Whats the deal there?

Fifth Issue: In IE there is a one or two pixel gap above right.jpg where the tim olive logo is. This doesn't happen on firefox and it doesn't happen on pages that don't use layers like portfolio.html.

...And I haven't even tried it on a mac browser yet...

I am listing a number of events from a database on this page

Here's the code:
Code:

<div id='eventblurb'>
                             $Comment
                         </div>
                         <div id='eventdetails'>

                              <p class='countrylist'>
                                 Date: $Date<br>
                                 Time: $Time<br>
                                 Cost: $Cost<br>
                                 City: $City<br>
                                 Contact: <a href='mailto:$Email'>$Contact</a> - $Phone <br>
                                 Address: $Addr1 <br>
                                 Address: $Addr2 <br>
                                 Address: $Addr3 <br>
                                 Address: $Addr4 <br>
                                 Website: $Website <br>
                              </p>
                         </div>

and the css:
Code:

#eventblurb {
    position:relative;

    border-width: 1px;
    border-style: solid;
    border-color: #FFFFFF;
    height: 200px;
    width: 250px;

    border-width: 1px;
    border-style: solid;
    border-color: #FFFFFF;

    margin: 0 0 0 10px;
    padding: 10px;
}
#eventdetails  {
    position:relative;
     top: -200px;
    left: 300px;
    width: 250px;


    border-width: 1px;
    border-style: solid;
    border-color: #FFFFFF;

    margin: 0 0 0 10px;
    padding: 10px;
}

As you can see there is a big gap underneath each event. I know that this is caused by moving the relatively positioned div.

My question is, how can I do this without using tables and still keep the div in content flow?

Thank you

Hi - I am using HVMENU from dynamicdrive.com. I have set this up to use relative positioning with the menu using the horizontal format.

The code in my html file is:

Quote:
<div id="MenuPos" style="position:relative; width:750px; height:20px;"><img src="images/redspacer.gif" width="750" height="20" alt=""></div>


This all lines up and works correctly using IE6.

I have a problem when using firefox. If I set var MenuCentered='center' in the script file the menu is misaligned by about 10 - 20 pixels to the left on a page when there is a scroll bar on the side of the firefox browser. It works ok on short pages that do not have a scroll bar.

If I set var MenuCentered='left' in the script file the problem is reversed in regard to the scrollbar.

Have I overlooked anything? Is there anything I can do to correct this using CSS?

im creating ajax auto complete text box

but my div tag does not appear correctly in IE7
(ok on firefox) appearing behind the textbox

IE7 screen shot URL

Firefox screen shot URL


codes are

HTML

Code:

            <tr>
                <td align="left">PHONE BRAND</td>
                <td>:</td>
                <td>
                    <div class="au_cm_loc">
                        <asp:TextBox ID="txtBrand" runat="server" CssClass="textbox"></asp:TextBox>
                        <div id="pnlBrand" class="au_cm_pnl"></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td align="left">PHONE MODEL</td>
                <td>:</td>
                <td>
                    <div class="au_cm_loc">
                        <asp:TextBox ID="txtModel" runat="server" CssClass="textbox"></asp:TextBox>
                        <div id="pnlModel" onmouseout="autoComplete.closeSuggestionPanel(event, this)" class="au_cm_pnl"></div>
                    </div>
                </td>
            </tr>

CSS

Code:

.au_cm_loc
{
	text-align:left;
	position:relative;
}

.au_cm_pnl
{
	position:absolute;
	top:25px;
	left:0px;
	border:1px solid #39AAE4;
	width:204px;
	max-height:50px;
	overflow-x: hidden; 
	overflow-y: auto; 
	visibility:hidden;
	background-color:#FEFEFE;
	z-index:500;
}

.au_cm_pnl a
{
	display:block;
	padding:5px 0px;
	width:95%;
	margin:-7px 0px;
	color:Blue;
	text-decoration:none;
	padding-left:5%;
	background-image:url(../Images/textbox_bg.jpg);
}

.au_cm_pnl a:hover
{
	background-image:url(../Images/button_bg.jpg);
	color:#FFFFFF;
}

please help me to fix this problem

thank you

chathura