CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Terence Chow
Terence Chow

Reputation: 11153

Overlapping elements in a clean manner?

I have multiple text boxes which I've placed in Bootstrap RowFluid and Span12.

Float is left, which based on width, causes 4 boxes to show up on each row.

What I'd like to do is place an X at the top right of each box so that someone can click the X and delete the box.

I can't seem to figure out how to overlap in a clean way. Can someone suggest a method and I'll hack away at it?

html

<div class="box-list">
    <div class="row-fluid">
        <div class="span12">
            <a href="/box/1">First box</a>
            <a href="/box/2">Second box</a>
            <a href="/box/3">Third box</a>
            <a href="/box/4">Fourth box</a>
            <a href="/box/5">Fifth box</a>
            ...etc
        </div>
    </div>
</div>

CSS

 .box-list a{
     width:22%;
     height:100px;
     font-size:20px;
     line-height: 50px;
     padding:25px 0 25px 0;
     text-align: center;
     border: 1px dashed #333333;
     float:left;
     background-color:#EEE;
     margin: 5px 1% 5px 1%;
     color:#333;
     display:block;
 }

I've tried a number of things but haven't been able to get it to look right at all. I've tried putting the links in containers and setting the CSS of the container to the above CSS. Then I added new 'delete' links where the text is only an X and put position:absolute but it results in really odd results. I've tried creating 2 boxes one with text and one without but then the boxes can't seem to overlap each other 100%. I'm at a loss so any suggestions would help

Including a fiddle with some changes I attempted: http://jsfiddle.net/sX2BC/

Upvotes: 2

Views: 883

Answers (1)

kennypu
kennypu

Reputation: 6051

First off, you had many margins/paddings on the container and box that affected the overlap. Removing most of them will allow the box to overlap nicely with the container. Next, I removed the float:left on the boxes, as it is not necessary, and will remove the box from the regular flow. Lastly, to make the a tags display as a box, I changed its display to display:inline-block. It should be close to what you wanted :

updated fiddle: http://jsfiddle.net/sX2BC/3/

Upvotes: 1

Related Questions