asked on

php css

css code:
------------
.container {
      position:absolute;
      width:950px;
      z-index:15;
      top:55%;
      left:50%;
      margin:-475px 0 0 -475px;
      border: thin solid #CC6666;
height: 825px;
}

.divMainContainer {
      width: 950px;
      float: none;
      display: block;
      border: thin solid #666666;
      text-align: center;
      height: 825px;
      position: absolute;
}
.divLeftContainer {
      height: 500px;
      width: 350px;
      float: left;
      display: block;
      overflow: auto;
      padding-left: 10px;
      position: relative;
      padding-right: 10px;
}
.divRightContainer {
      width: 525px;
      float: left;
      display: block;
      border: 1px solid #66CC66;
      padding: 15px;
      text-align: left;
}
end css code
------------------------
Please can someone give me some advice as to how to add another div element above the "divLeftContainer" such that it does not push the "divRightContainer" down the page

IanTh

add the widths of left and right adds to over the width of their container make them both 425 (425 *2 = 950)

COBOLdinosaur

A fragment of out of context CSS does not tell us anything about the page. Post a link or at the very least the rendered source so we have some idea of how this is supposed to sit in the page.

Cd&

IanTh

yes we actually need the php as you have included only the css file forget my earlier comment I got my maths wrong me bad.

COBOLdinosaur

Actually the PHP source is much less useful than the rendered source. The problem is a presentation problem (CSS), not a generation problem.

Cd&

doctorbill

ASKER

I have attached the php page and the css
I need to be able to add a div element above the following code in the php page such that it does not cause the div element next to it on the page (<div class="divRightContainer" id="test" align="center">) to be pushed down the page. I would like it to be positioned at the same level:

<NEW DIV HERE>
<div align="left" class="divLeftContainer" id="headingText">Artists
<br /><br /><span id="contentText">
<?php do { ?>

<a id="my-target" href="<?php echo $row_im[im_large]; ?>" title="<?php echo $row_im[im_Artists]; ?>: <?php echo $row_im[im_comments]; ?>" class="highslide" onClick="return hs.expand(this, { targetX: 'my-target 400px', targetY: 'my-target -20px' })"><?php echo $row_im[im_Artists]; ?></a> :: <a href="gallery.php?artist=<?php echo $row_im[im_Artists]; ?>">Gallery ::</a>  <a href="artist_about.php?artist=<?php echo $row_im[im_Artists]; ?>">About The Artist </a><br />
main.css
artists.php

COBOLdinosaur

Well Ian seems to think the PHP is enough; so good luck with that. I'm not going to spend any aditional time on it without a link or rendered code that let's me see what the browser sees. It should be as simple as positioning a div, but I don't make guesses. I analyze code and give a standards based solution.

Cd&

ASKER CERTIFIED SOLUTION

lightspeedvt

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

COBOLdinosaur

??? position:absolute on a floated element ???

That should be interesting.

Cd&

lightspeedvt

Yes, position absolute. Float at those element is not needed any more and can be cut off, as it is needed to deal with positioning, as to be able to keep element at needed place.

Example with positioning:
http://jsfiddle.net/C8Fd9/

COBOLdinosaur

The code you posred has both position absolute and float: left... that is invalid. In the fiddle you have float none which is redundant because none is the default.

You just need a little more care in the code, because the OP my not always be at a level where they can solve minor quality issues.

Cd&

lightspeedvt

Actually to have "position:absolute" and "float" at the same time in same declaration (or in other declarations of css properties) is not invalid at all. There are no restrictions that prohibits this. From logic side "position" disables "float" and that is normal. So, it makes no sense to have them both at the same time if you are sure that position will be always absolute and you are not expecting possible overrides of "position:absolute" where you need element to be floated on edfault. This explains the situation when it is needed to have both options.

In our case, we may cut off float (as I said in my previous comment and providing demo).

doctorbill

ASKER

Thanks very much for all the input
I now have a much better unberstanding of how to use and position div elements having spent the last few hours reading the comments, other documentation and experimenting

I have been using tables in web pages up until recently so changing to divs had been an education - very glad I have changed though

doctorbill

ASKER

I've requested that this question be closed as follows:

Accepted answer: 0 points for doctorbill's comment #a38886924

for the following reason:

gained experience

COBOLdinosaur

Why are you not awarding the points to lightspeedvt?

They gave you what you asked for and you said yourself:

I now have a much better unberstanding (sic) of how to use and position div elements having spent the last few hours reading the comments, other documentation and experimenting

lightspeedvt,

You should post an objection, so a moderator reviews the Q.

Cd&

doctorbill

ASKER

Sorry about that - I didn't look carefully enough at all the replies. You are indeed correct - the solution from lightspeedvt was the most accurate for my situation. I am perfectly happy to award lightspeedvt points for his suggestion

doctorbill

ASKER

helped me on my way

COBOLdinosaur

:^) Thanks for correcting it.

Cd&

lightspeedvt

Thanks! I am glad that was able to help a little.