Question

I am trying to create a sort of a window, formed by multiple divs. I’m basically putting div after div in my cshtml page, and trying to set their positions in the .css files.
After a considerable effort, I managed to set the divs in their beautiful positions. But as soon as I start to put text, or dom element or whatever inside one of those divs, it changes its position, and pushes other divs, creates a mess.
I somehow managed to keep some by using float, but it is really difficult. Isn’t there an easy way to manage the inside elements of a div? Why does the inside elements cause the container div to travel to other places?

Here’s the .html and .css code. The divs are empty and positioned correctly. You can simply write “qwe” inside div id=”fiyat”> for example and see what I’m talking about.

.html code:

<div id="tablodetay">
    <div id="secimler">     
    </div>

        <div id="parcacerceve">
        </div>

        <div id="resim">   
        </div>

        <div id="ebatsecimvefiyat">
            <div id="ebatsecim"> 

            </div>

            <div id="fiyat">
            </div>
        </div>

        <div id="urunozellik">       
        </div>
    </div>

.css code:

div#tablodetay div#secimler
{
    border:1px solid #000000;
    margin:2px;
    display:block;
    width:706px;
    height:100px;
    display:block;
}

div#tablodetay div#parcacerceve
{
    border:1px solid #000000;
    margin:2px;
    display:inline-block;
    width:86px;
    height:400px;
}

div#tablodetay div#resim
{
    border:1px solid #000000;
    margin:2px;
    height:400px;
    width:400px;
    display:inline-block;
}

div#tablodetay div#ebatsecimvefiyat
{
    margin:2px;
    height:402px;
    width:200px;
    display:inline-block;
}

div#tablodetay div#ebatsecim
{
    border:1px solid #000000;
    height:248px;
    width:200px;
    margin-bottom:2px;
}

div#tablodetay div#ebatsecim form input
{
    float:left;
    border:1px solid #000000;
}

div#tablodetay div#fiyat
{
    border:1px solid #000000;
    height:148px;
    width:200px;
}

div#tablodetay div#urunozellik
{
    border:1px solid #000000;
    height:120px;
    width:706px;
    margin-top:-2px;
    margin-left:2px;
}

Answer 1

You need to define css attributes for each div. To prevent it from changing size or position you need

div ... {
   position:absolute;
   left: 50px;
   top:50px;
   width:100px;
   height:50%;
}

position:absolute; ignores all other divs and puts your div on the spot you define.