CODEWITHSUNDEEP
htmlcss
Neir0
Neir0

Reputation: 13377

question about css and html

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

Upvotes: 0

Views: 153

Answers (6)

Sujit Agarwal
Sujit Agarwal

Reputation: 12518

<style>
#cont{
background:#ff0000;
postition:relative;
width:800px;
height:800px;
}
#inn{
background:#00ff00;
position:relative;
height:100px;
width:100px;
}
</style>
<body>
<div id="cont">
<div id="inn" style="top:100px;left:100px;"></div>
<div id="inn" style="top:300px;left:100px;"></div>
<div id="inn" style="top:420px;left:170px;"></div>
<div id="inn" style="top:200px;left:400px;"></div>
</div>
</body>

Upvotes: 0

melhosseiny
melhosseiny

Reputation: 10154

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.

Upvotes: 0

thirtydot
thirtydot

Reputation: 228302

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>

Upvotes: 0

aorcsik
aorcsik

Reputation: 15552

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.

Upvotes: 1

didi_X8
didi_X8

Reputation: 5068

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...

Upvotes: 1

Joel C
Joel C

Reputation: 5567

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

Upvotes: 1

Related Questions