HTML/CSS - Style on div not registering

Question

So, this is annoying. Been trying to get this to work for too long now, and I just cant see any reason why it wont.

I'm trying to position a div using my *.css, but it seemes like it doesnt use it. Though, it uses it for my other divs.

Here are some code to show you guys:

<div id="projRight">
    <!-- Project header -->

    <?php
    echo '<div id="projHeader">'.$showproject.'</div>';

    if($proj["description"]) echo '<br /><div id="projDesc">'.$proj["description"].'</div>';

    ?>


    <div id="projRightMid">
        <a href="javascript:animatedcollapse.toggle('projTeam')"><h3>Project Team</h3></a>
        <div id="projTeam">
            3D Artist: Stian Berg Larsen
        </div>
    </div>

    <div id="projRightBottom">
    Test div...
    </div>
</div>

#projRight{
position:absolute;
right:10px;
top:10px;
width:353px;
height:388px;
}

#projRightMid{

}

#projRightBottom{
position:absolute;
bottom:10px;
right:10px;
height:90px;
width:300px;
background-color:#00FF00;
    font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color:#666;
}

#projTeam{
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color:#666;
}

EDIT: The divs that I'm having problems with are #projRightBottom, #projTeam.

Here is a screencast of what I want: http://screencast.com/t/g0QDkJVtKt This is an iframe loaded when you click a project.

-Left side contains main video/image.
-Right side contains:
   -Project title (top)
   -Description (top, below header)
   -Similar buttons (bottom, above Project team) {opens a new page}
   -Project Team (bottom, above the devider and other images)(clicking this opens the div, revealing the team. (how do I make it slide up, and not down? Using this: http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm
   -Divider (dividing top content from the 3 other images at the bottom)
   -3 images (at the bottom. 3 more images from the project).

For now, I'm only trying to set it all up so that it will be in the right places. And then fill in content as I go along.

If i add the style to the div itself (inside the html code) it works, but I'd like to keep it tidy in the external css.. — Stian Berg Larsen, Jul 19 '12 at 07:14
what div and css are you talking about or is it for us to find out? — bart s, Jul 19 '12 at 07:17
Do you mean those two divs aren't getting any styles applied at all? Or you just can't get them to look like the screenshot you provided? — brains911, Jul 19 '12 at 07:44
No styles at all.. Tried to arrange it differently now, and it seems to work. But if someone got some tips for a nice proper way to do this then I'd be happy to hear! :D — Stian Berg Larsen, Jul 19 '12 at 07:53

score 0 · Answer 1 · edited May 23 '17 at 12:12

0

I am not sure for which div you refer to.

In order to use the position: absolute you must have a div(holder) with position: relative;. z-index could also be a good solution for your problem.

edited May 23 '17 at 12:12

Community

1
1

answered Jul 19 '12 at 07:19

flangofas

332
1
5
15

Updated my question with a screengrab of my target design. In general, I want two divs next to each other (left & right), and in the right div I need to position the elements as shown in the picture (pictures at bottom, project team and similar project above that, and header/description at the top). Thanks! – Stian Berg Larsen Jul 19 '12 at 07:39

score 0 · Accepted Answer · answered Jul 19 '12 at 09:44

0

Ok Stian, this what I would use to start with.

I use borders to help you understand what is what.

http://jsfiddle.net/KGupZ/1/

Hope it helps you!

answered Jul 19 '12 at 09:44

flangofas

332
1
5
15

I cant get it to work. I have 3 divs next to each other (Video area, divider and description). I get the video and divider next to each other, but the description ends up below the other two divs. Inside the description div, I need one top and one bottom div. – Stian Berg Larsen Jul 19 '12 at 10:11
Floated all 3 to left, and it worked. Thanks! Could you explain why you use the "clear:both;" div at the end? – Stian Berg Larsen Jul 19 '12 at 10:34
So, 3 divs next to each other, done. How to get 3 more divs, inside the rightmost div? This time on top of each other. The first is stuck to the top, and the last is stuck to the bottom. The middle is stuck on top of the bottom one.. – Stian Berg Larsen Jul 19 '12 at 10:43

HTML/CSS - Style on div not registering

2 Answers2