...

View Full Version : relative positioning



Radovan
08-02-2011, 02:21 AM
Hello,

I want to make this layout:

http://i51.tinypic.com/974cjs.jpg

There are 4 relative positioned divs next to each other in some container.

The red line in my picture shows where the container's height should end but it doesn't because of the last div which default position is down there. I can't set fixed height for container because of random stuff above.

How to do it?

vikram1vicky
08-02-2011, 08:59 AM
Share mockup of layout you want and your present code in which you have issue...

Radovan
08-02-2011, 12:47 PM
I don't think it's important, but if you need it anyway ...

CSS


#container
{
width:600px;
background:blue;
margin:0 auto;
}

.box
{
float:left;
width:196px;
height:318px;
background:red;
}

#box1
{
position:relative;
left:-140px;
float:left;
}

#box2
{
position:relative;
left:-102px;
}

#box3
{
position:relative;
left:-66px;
}

#box4 //this div is doing the mess because it's default position is under the other 3 divs and that's why the container stretches.
{
position:relative;
left:558px;
top:-318px;
}



HTML


<div id="container">

<div>RANDOM CONTENT</div>

<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<div class="box" id="box4"></div>

<div style="clear:both"></div>
</div>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum