Question About Css And Html

What is the best way to make a page with DIVs that have different positions? Here is an example:

Solution 1:

That looks like you need to use absolute positioning, with a fixed width and height for each element.

Solution 2:

With CSS absolute positioning. You can find an explanation here
Basically it would look something like

#div1 {
    position:absolute;
    left:100px;
    top:150px;
    width:80px;
    height:30px;
}

#div2 {
    position:absolute;
    left:120px;
    top:200px;
    width:100px;
    height:30px;
}

etc...

Solution 3:

Create absolute positioned DIVs and set the top and left CSS parameters for each of them.

You may wrap them with a relative positioned div.

Solution 4:

See: http://jsfiddle.net/Yz9e4/

How does this work? http://css-tricks.com/absolute-positioning-inside-relative-positioning/

The beauty in my answer is #boxContainer > div, which means you can avoid specifying position: absolute for every single box.

CSS:

#boxContainer {
    width: 500px;
    height: 500px;
    background: #ccc;
    border: 1px dashed #444;
    position: relative
}
#boxContainer > div {
    /* put properties common to all positioned divs here */
    position: absolute;
    background: #999;
    border: 2px dotted #444
}

#box1 {
    top: 50px;
    left: 50px;
    width: 100px;
    height: 75px
}
#box2 {
    top: 200px;
    left: 300px;
    width: 180px;
    height: 125px
}

HTML:

<div id="boxContainer">
    <div id="box1"></div>
    <div id="box2"></div>
</div>

Solution 5:

HTML

<div id="A"></div>
<div id="B"></div>
<div id="C"></div>
<div id="D"></div>

CSS

#A, #B, #C, #D {
    position: absolute;   
    width: 50px;
    height: 50px;
}

#A {
    top: 20px;
    left: 45px;
    background-color: aqua;
}

#B {
    top: 50px;
    left: 100px;
    background-color: blue;
}

#C {
    top: 50px;
    left: 200px;
    background-color: red;
}

#D {
    top: 200px;
    left: 100px;
    background-color: green;
}

See fiddle.