CODEWITHSUNDEEP
javascripthtmlcsscss-position
Munir Hachemi Guerrero
Munir Hachemi Guerrero

Reputation: 33

CSS Positioning a table and blocks

¡Hello! I designed a Budget Calculator and implemented it in Drupal 7. You can see the result here:

http://www.delengua.es/curso-espanol-espana/calculadora-de-precios

I'm sure it has a lot of errors. But the one i want to fix is related to the position of the blocks. You may see that if you click on some option in the optgroup called "Cursos" (or in another one), you'll se an information square sided to the right of the table (i mean the table that contains the form). Specifically, if you click on "Cursos específicos" and you select something in the new optgroup, you'll get two information blocks. As you can see if you inspect them, they're positioned like this:

display: none; position: absolute; right: 6.5%; top: 12.5%; margin: 15px 15px; width: 220px; height: auto; padding: 10px 10px;

Though that looks as working fine, it changes the position in firefox, and i'm frightened that it will cause more trouble. So my question is... would it be any other way to position it in relation to the table? I mean, the 'y' position should be the same as the table, and the 'x', the same + some number of pixels. I think it can be done through two ways:

a) With JavaScript (i don't know how, but i guess i could learn googling it).

b) Just with html and css.

As i prefer this option, i've tried to group the table and the information labels in only one '<div>', to declare the labels as 'inline:block;', to float them to the right, but when i do one of those things, i cannot modify the "top" position property. I got that ideas from other threads in Stackoverflow, but i don't know what can i try else. So i'll really thank any help.

Upvotes: 0

Views: 73

Answers (2)

Everton Lenger
Everton Lenger

Reputation: 1446

I've tried something close to what you've said in the question and it worked for me without any problems.

First of all, wrap your form and infos in one div, like this:

<div id="wrap">
    <form id="calculadoracont" method="post" onclick="test()">
        // Your form
    </form>
    <div class="informacion" id="infoespecificos">
        // Your info
    </div>
    <div class="informacion2" id="infoliteratura">
        // Your info
    </div>

    // Your other infos 
</div>

And in your css, just float them to where you want:

form {
    float: left;
}

.informacion, .informacion2 {
    // Remove the position absolute
    float: right;
}

That will give you the same layout without absolute positioning.

Give it a try and let me know if it helps!

Upvotes: 0

Joshua Whitley
Joshua Whitley

Reputation: 1186

Making a parent container position: relative will make the position: absolute on these elements relative to that parent container. Also, top/bottom/left/right attributes only apply for position: fixed, position: relative, and position: absolute. Floated elements ignore them unless one of those positions is defined, in which case the float is ignored.

Upvotes: 1

Related Questions