Jump to content

div


ki

Recommended Posts

Im trying to float a div over a div, ive tried different methods trying this yet non seem to work here is the code im trying to make the div float over:

<style>
div#subjects { margin-bottom: 5px; display: block; }
div#msgbody { float: left; display: block; width: 100%; }
div.CB { float: left; width: 50px; }
div.FR { float: left; width: 100px; }
div.SB { float: left; }
div.MR { float: left; display: block; width: 100%; font-size: 14px; }
</style>
<div class="MH">Message(s)</div>
<div id="subjects">
<div class="MR"><div class="CB"><input type="checkbox" name="mail[]"></div><div class="FR"><a href="">name</a></div><div class="SB"><a href="javascript:message('')">subject</a></div></div>
</div>

 

and this is the div I want floated:

 

<div id="msgbody">
</div>

its not going to be moved but its going to popup in the center of a holder div (non of the above divs) that displays a message with AJAX.

 

any help is appreciated

Link to comment
Share on other sites

You cannot "float" a div on top of another. You would have to absolutely position them on top of one another (using z-index to determine which is on top:

 

HTML:

<div id="container">
  <div id="div-bottom">
    I'm on bottom!
  </div>
  <div id="div-top">
    I'm on top!
  </div>
</div>

 

CSS:

#container {
  position: relative;
}

#div-bottom {
  position: absolute;
  z-index: 100;
}

#div-top {
  position: absolute;
  z-index: 200;
}

 

Try something like that instead.

Link to comment
Share on other sites

your have to z-index them both? because I tried only one z-index

 

No, you don't have to, but I like to explicitly define anything that could possibly be misinterpreted by an obscure browser somewhere. Implicit CSS interpretation is not reliable in all browsers, sad to day.

Link to comment
Share on other sites

  • 2 weeks later...

corylulu,

 

My understanding is that tables will not be supported in the future browsers so getting to grips with divs as early as possible is important - do you know different?

 

I have not heard that anywhere; I believe most all browser will continue to support "founding father" tags. Some CSS styles and JavaScript methods will depreciate though; FireFox already has depreciated several older CSS styles and JavaScript methods. ;)

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.